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。举个例子来说.
<!DOCTYPE html>
<html>
<body>
<div>
<li>
<input>
</li>
</div>
</body>
</html>
假如给<input>绑定一个点击事件，首先input会监听到这个时间，触发事件处理函数，然后再往上报，也会触发<li>的点击处理函数，再往上报，依次类推。
- DOM2级事件处理程序
分为三个阶段，第一个阶段，事件捕获，由window-html-body-父-子。这一阶段为截取事件提供了机会。
第二个阶段，目标阶段，传递到目标，
第三阶段，冒泡阶段，再倒序的传
4.如何阻止事件冒泡？ 如何阻止默认事件？
- 阻止事件冒泡
用stopPropagation()方法可以停止事件在DOM层次的传播，即取消进一步事件的捕获或者冒泡。 - 阻止默认事件
用preventDefault()阻止默认事件。
5.有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容
http://js.jirengu.com/gahudaguni/1/edit?html
6. 补全代码，要求：
当点击按钮开头添加时在<li>这里是</li>元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在最后一个 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/
网友评论