js的事件

一、DOM0 事件和DOM2级在事件监听使用方式上有什么区别？

• DOM0事件：通过JavaScript指定事件处理程序就是把一个方法赋值给一个元素的事件处理程序属性。如下两种：

    <input type="submit" value="点我" onclick="console.log('1');">
    <input type="submit" value="点我2" class="btn";>

    <script>
        var btn = document.getElementsByClassName("btn")[0];
        btn.onclick=function(){
            console.log("1");
        }
    </script>

这种方法虽然简单直接，删除时只需要把元素的onclick属性设置为null就可以了，但是应会尽量避开使用这样的方法。因为这种方法。内联事件会转化元素的属性，那意味着当指定多个的内联事件时，它之前所指定的内联事件会被覆盖掉。

• DOM2事件：DOM2级事件定义了两个方法用于处理指定和删除事件处理程序的操作。它们是addEventListener（新增）removeEventListener （删除）；如下：

        var btn = document.querySelector(".btn");
        function echo() {
            console.log("1")
        }
        btn.addEventListener("click",echo);   //新增一个事件；
        btn.removeEventListener("click",echo); //删除一个事件；

这两个方法都接受三个参数：1.事件类型；2.事件处理方法；3.布尔参数(如果是true表示在捕获阶段调用事件处理程序，如果是false，则是在事件冒泡阶段处理)；使用addEventListener有一个很重要的优点，就是它可以给一个元素添加多个实践，不过需要注意的时，使用addEventListener新增的事件，只能使用removeEvenListener来删除，这意味着如果我们添加的匿名函数无法删除；

二、attachEvent与addEventListener的区别？

• 参数个数不相同，这个最直观，addEventListener有三个参数、attachEvent只有两个，attachEvent添加的事件处理程序只能发生在冒泡阶段，addEvent-Listener第三个参数可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理（我们一般为了浏览器兼容性都设置为冒泡阶段）
• 第一个参数意义不同，addEventListener第一个参数是事件类型（比如click，load），而attachEvent第一个参数指明的是事件处理函数名称（onclick，onload）；
• 事件处理程序的作用域不相同，addEventListener的作用域是元素本身，this是指的触发元素，而attachEvent事件处理程序会在全局变量内运行，this是window。
• 为一个事件添加多个事件处理程序时，执行顺序不同，addEventListener添加会按照添加顺序执行，而attachEvent添加多个事件处理程序时顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的，但是添加的多了就无规律了)，所以添加多个的时候，不依赖执行顺序的还好，若是依赖于函数执行顺序，最好自己处理，不要指望浏览器。

三、解释IE事件冒泡和DOM2事件传播机制？

• IE事件冒泡传播机制：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素；

• DOM2事件传播机制：DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段；

四、如何阻止事件冒泡？ 如何阻止默认事件？

• 阻止默认时间：

function stopDefault(e) {  
    if(e && e.preventDefault) {  
    　　e.preventDefault();  
    } else {  
    　　window.event.returnValue = false;   
    }  
    return false;  
}  

• 阻止事件冒泡：

function stopBubble(e) { 
    if(e && e.stopPropagation) {  
  　　e.stopPropagation();   
    } else {  
  　　window.event.cancelBubble = true;  
    }  
    return false;   
}