事件

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

• DOM0事件是将一个函数赋值给一个事件处理程序属性：

var btn=document.getElementById("xxx")
btn.onclick=function(){
      //代码
}

有一个缺陷就是只能处理一个程序，如果再次向同一个元素添加同一个事件，将会被最后的覆盖。

• DOM2级事件定义了两个方法用于处理指定和删除事件处理程序的操作：
  • addEventListener
  • removeEventListener

var btn=document.getElementById("xxx")
btn.addEventListener('click',function(){
       //代码
}，true/false)

第一个参数为绑定什么事件，
第二个参数是事件发生什么，
第三个参数如果是
true表示在捕获阶段调用事件处理程序，
如果是false，则是在事件冒泡阶段处理

2.attachEvent与addEventListener的区别？

1.参数个数不相同，这个最直观，addEventListener有三个参数，attachEvent只有两个，attachEvent添加的事件处理程序只能发生在冒泡阶段，addEventListener第三个参数可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理（我们一般为了浏览器兼容性都设置为冒泡阶段）

element.addEventListener（"Event"，function(){},true/false）

element.attachEvent("Event",function(){})

2.第一个参数意义不同，addEventListener第一个参数是事件类型（比如click，load），而attachEvent第一个参数指明的是事件处理函数名称（onclick，onload）

3.事件处理程序的作用域不相同，addEventListener的作用域是元素本身，this是指的触发元素，而attachEvent事件处理程序会在全局变量内运行，this是window，所以刚才例子才会返回undefined，而不是元素id

4.为一个事件添加多个事件处理程序时，执行顺序不同。addEventListener 会按照添加的顺序执行。 attachEvent 添加多个事件处理程序时，顺序是无规律的。

3.解释IE事件冒泡和DOM2事件传播机制？

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

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

ps:Opera、Firefox、Chrome、Safari都支持DOM事件流，IE不支持事件流，只支持事件冒泡

Paste_Image.png

4.如何阻止事件冒泡？ 如何阻止默认事件？

• DOM
  阻止冒泡

element.onclick=function(e){
      e.stopPropagation(); 
}
element.addEventListener("event",function(e){
      e.stopPropagation(); 
})

组织默认事件：

element.onclick=function(e){
     e.preventDefault();  
}

element.addEventListener("event",function(e){
      e.preventDefault（）; 
})

• IE
  阻止冒泡：e.cancelBubble = true;
  阻止默认事件：event.returnValue = false;