JS事件

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

• DOM0级事件处理程序：
  通过JavaScript指定事件处理程序就是把一个方法赋值给一个元素的事件处理程序属性。
  每个元素都有自己的事件处理程序属性，这些属性名称通常为小写，如onclick等，将这些属性的值设置为一个函数，就可以指定事件处理程序，如下

DOM0级方法指定的事件处理程序被认为是元素的方法，事件处理程序在元素的作用域下运行，this指向当前元素，在事件处理程序中可通过this访问元素的任何属性和方法，以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。
可将事件处理程序属性赋值为null来删除通过DOM0级方法指定的事件处理程序。

btn.onclick = null; //删除事件处理程序

• DOM2级事件处理程序：
  1.addEventListener
  2.removeEventListener

所有的DOM节点都包含这两个方法，并且它们都接受三个参数：

1.事件类型
2.事件处理方法
3.布尔参数，如果是true表示在捕获阶段调用事件处理程序，如果是false，则是在事件冒泡阶段处理
刚才的例子我们可以这样写

上面代码为button添加了click事件的处理程序，在冒泡阶段触发，与上一种方法一样，这个程序也是在元素的作用域下运行，不过有一个好处，我们可以为click事件添加多个处理程序

这样两个事件处理程序会在用户点击button后按照添加顺序依次执行。

通过addEventListener添加的事件处理程序只能通过removeEventListener移除，移除时参数与添加的时候相同，这就意味着刚才我们添加的匿名函数无法移除，因为匿名函数虽然方法体一样，但是句柄却不相同，所以当我们有移除事件处理程序的时候可以这样写

attachEvent与addEventListener的区别？

在添加事件处理程序事addEventListener和attachEvent主要有几个区别

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

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

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

4.为一个事件添加多个事件处理程序时，执行顺序不同，addEventListener添加会按照添加顺序执行，而attachEvent添加多个事件处理程序时顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的，但是添加的多了就无规律了)，所以添加多个的时候，不依赖执行顺序的还好，若是依赖于函数执行顺序，最好自己处理，不要指望浏览器

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

• IE的事件流叫做事件冒泡（event bubbling）即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。

示例:

    
        
    
    
        
Click Me
    

当点击div区域，click事件首先在元素上发生，而这个元素就是我们单击的元素。然后click事件沿DOM树向上传播，在每一级节点上都会发生直至传播到document对象。

事件冒泡模型

所有现代浏览器都支持事件冒泡，但IE5.5及更早版本中的事件冒泡会跳过元素，从直接到document，IE9、Firefox、Chrome、Safari则将事件一直冒泡到window对象。

• DOM2级事件传播机制规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。以前面简单的HTML页面为例，单击
  元素会按照下图所示顺序触发事件。
  

  

  DOM2事件流

  
  以上面代码为例，捕获阶段事件从ducument到再到后就停止了，下一阶段是“处于目标”阶段，事件在

  上发生并在事件处理中被视为冒泡阶段的一部分，接着冒泡阶段发生，事件又传播回文档。

IE9、Opera、Firefox、Chrome、Safari都支持DOM事件流，IE8及更早版本不支持事件流，只支持事件冒泡。
即使DOM2级事件规范明确要求捕获阶段不会涉及事件目标，但IE9,Firefox,Chrome,Safari和Opera9.5及更高版本都会在事件捕获阶段触发事件对象上的事件，结果就是有两个机会在目标对象上操作事件。

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

• DOM浏览器
  阻止冒泡e.stopPropagation();
  阻止默认事件event.preventDefault()
• IE浏览器
  阻止冒泡e.cancelBubble = true;
  阻止默认事件event.returnValue = false;

有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容

        
这里是
        
饥人谷
        
前端6班

补全代码，要求：

当点击按钮开头添加时在

这里是

元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在最后一个 li 元素后添加用户输入的非空字符串.
当点击每一个元素li时控制台展示该元素的文本内容。

    

        
这里是
        
饥人谷
        
前端6班
    
    
    开头添加
    结尾添加

补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。

    

        
鼠标放置查看图片1
        
鼠标放置查看图片2
        
鼠标放置查看图片3