事件

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

• DOM0级事件

var btn = document.getElementById("myBtn");
btn.onclick = function(){
    //do sth...
    console.log(this); // myBtn
}
// 事件以'on'开头，如onmouseover, onmouseout等

使用DOM0级方法指定的事件处理程序被认为是元素的方法，此时事件处理程序是在元素的作用域里中运行，所以此时this指向的是元素本身。而且这种添加方式的缺陷是，只能存在一个处理程序，如果再次向同一个元素添加另外一个处理程序，上一个处理程序会被覆盖。

• DOM2级事件
  DOM2级别事件监听使用的方法为：

var btn = document.getElementById("myBtn");
btn.addEventListener("事件名", function(){
    //do sth...
    console.log(this); // myBtn
});

这样的添加方式比起DOM0级更灵活，它可以给一个同一个元素添加多个处理事件。同时它的this也同样指向元素本身。

2.attachEvent与addEventListener的区别？

• 接收参数不同
  attachEvent()接收两个参数，一个事件，一个事件的处理函数，且不支持事件捕获。
  addEventLisner接受三个参数，一个事件，一个事件的处理函数，第三个参数是boolean,如果为false是事件冒泡，true，则为事件捕获。第三个参数可选，默认值为false。

• 第一个参数意义不同
  attachEvent接受的第一个参数的意义是事件处理函数的名称，而addEventListener指的是参数事件类型。只需在参数事件类型前加'on'就可以了。

• 事件处理程序的作用域不同
  addEventListener的作用域是元素本身，this是指的触发元素，而attachEvent事件处理程序会在全局变量内运行，this是window。

• 为一个事件添加多个处理程序时，执行顺序不同
  addEventListener添加会按照添加顺序执行，而attachEvent添加会往往按照反序执行，添加的多了就没有规律而言。

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

• 事件冒泡
  当我们触发某种事件，首先会精准判断触发事件的元素到底是哪一个具体的元素，然后再层层往上报，最终触发到document。举个例子来说.

假如给绑定一个点击事件，首先input会监听到这个时间，触发事件处理函数，然后再往上报，也会触发

的点击处理函数，再往上报，依次类推。

• DOM2级事件处理程序
  分为三个阶段，第一个阶段，事件捕获，由window-html-body-父-子。这一阶段为截取事件提供了机会。
  第二个阶段，目标阶段，传递到目标，
  第三阶段，冒泡阶段，再倒序的传

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

• 阻止事件冒泡
  用stopPropagation()方法可以停止事件在DOM层次的传播，即取消进一步事件的捕获或者冒泡。
• 阻止默认事件
  用preventDefault()阻止默认事件。

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

http://js.jirengu.com/gahudaguni/1/edit?html

6. 补全代码，要求：

当点击按钮开头添加时在

这里是

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

代码二 http://js.jirengu.com/kayufuboxa/1/

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

代码一：http://js.jirengu.com/hataqefuca/1/
代码二：http://js.jirengu.com/veyedudaqe/1/