js下DOM 事件的一些方法

事件的绑定和解绑

//绑定事件
document.onclick=function () {
        alert(1);
    }
//解除事件
document.onclick=null;

这是最常用的为对象绑定事件的方法。但是只能给一个对象绑定一个相同时间，想绑定第二个会覆盖。在Js中提供了一些方法让我们可以给一个对象进行多次绑定。

/**obj. addEventListener("click",fun(){},false)
*    添加事件
*    不兼容IE678;
*           事件名称不带on
*           第二个是事件函数
*           事件捕获。默认false
*obj.removeEventListener("click",fn2)；
*    事件解绑
*/
document.addEventListener("click",fn1);
document.addEventListener("click",fn2);
document.removeEventListener("click",fn2);
// 解绑前，弹出1，弹出2；
//解绑后，弹出1。
function fn1() {
    alert(1)
}
function fn2() {
    alert(2)
}

/*obj.attachEvent("onclick",fun{})   
*     兼容IE678
*     只接收俩参数
*        第一个是事件名称，是带on的事件名字
*        第二个是事件函数。
*
*obj.detachEvent("onclick",fn)
*     事件解绑
*      fn可以使匿名函数，但需和绑定的匿名函数完全一致，包括空格
*
**/
document.attachEvent("onclick",function () {
        alert(1)
});
document.attachEvent("onclick",fn);
document.detachEvent("onclick",fn);
//解绑前，弹出2，弹出1
//解绑后，弹出1
function fn() {
    alert(2)
}

我们可以发现attachEvent方法和addEventListener的执行顺序是相反的。
下面提供一种兼容写法，仅供参考

//添加事件
function addEvent(obj,eName,eFn) {
    if(obj.attachEvent){ //判断支不支持attacgevent方法，如果支持就是ie678
        obj.attachEvent("on"+eName,eFn) //兼容IE678
    }else{
        obj.addEventListener(eName,eFn)//兼容标准浏览器
    }
}
//移除事件
function removeEvent(obj,eName,eFn) {
    if(obj.attachEvent){ //判断支不支持attacgevent方法，如果支持就是ie678
        obj.detachEvent("on"+eName,eFn) //兼容IE678
    }else{
        obj.removeEventListener(eName,eFn)//兼容标准浏览器
    }
}

但是这并不能解决执行顺序不同的问题，不过在使用中影响不大。

事件捕获

在上面我们提到addEventListener方法的第三个参数为事件捕获，默认为false。现在我们来了解一下事件捕获。

<div id="box1">1
    <div id="box2">2
        <div>
            <div id="box3">3</div>
        </div>
    </div>
</div>
<script>

    /*
    *   事件捕获
    *       事件在传递的时候会有一个触发的顺序
    *       false:从里到外，true：从外到内
    *       同时属性为true的事件会先于false执行
    *       只有在标准浏览器下才有这个概念
    *
    * */

    box1.addEventListener("click",fn1，false)
    box2.addEventListener("click",fn2，false)
    box3.addEventListener("click",fn3，false)

    function fn1() {
        console.log(1)
    }
    function fn2() {
        console.log(2)
    }
    function fn3() {
        console.log(3)
    }
//点击box3
// 3 2 1
// 若都设置为true 1 2 3 
</script>

事件冒泡

我们在讲事件捕获的时候可以发现一件很有趣事情就是，我只是点击了最里面的盒子，但是包裹该盒子的大盒子的事件也被触发了，这就是事件冒泡了。
那这是为什么呢？仔细想想不难发现，虽然我们点击的是一个小盒子。但是因为小盒子在大盒子内，点击小盒子的同时，我们也点击了大盒子。所以会触发大盒子的事件。
但是很多时候我们并不希望如此，所以我们有必要来清除事件冒泡。

<div id="box1">1
    <div id="box2">2
        <div>
            <div id="box3">3</div>
        </div>
    </div>
</div>
<script>

   /*
    *   事件冒泡
    *       事件会从自己身上往上传递
    *
    *   阻止冒泡
    *       e.cancelBubble = true；
    *       事件源
    *
    * */

    box1.onclick=function (e) {
        e=e||window.event;
        e.cancelBubble = true;
        console.log(1)
    }
    box2.onclick=function (e) {
        e=e||window.event;
        e.cancelBubble = true;
        console.log(1)
    }
    box3.onclick=function (e) {
        e=e||window.event;
        e.cancelBubble = true;
        console.log(3)
    }
    //点击box3    3
    //点击box2    2
    //点击box1    1
</script>

清除默认事件

js中带有一些默认事件。例如我们对文本进行操作时，默认存在选中事件。在必要的时候我们可以去掉我们不想要的默认事件。

   /*
    *      e.preventDefault()
    *           清除默认事件
    *           不兼容IE678
    *      e.returnValue=false; 
    *           只支持IE678
    *       return false
    *           也可以清除默认事件
    *    obj.事件=function (e) {
    *        e = e||window.event;
    *        e.returnValue = false;
    *        //e.preventDefault();
    *        //return false;
    *    }
    *    //根据实际情况选择
    * */