事件

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

• Dom0级，将特定的元素节点上绑定特定的属性方法。

var btn =document.getElementById("hh");
btn.onclick=function(){
  console.log("hello world");
}

通过这种方式绑定的事件，是元素的属性，当再一次给同一个节点元素绑定另外一个属性方法的时候，前一个属性的方法将会被覆盖,也就是只能指定一次,其次此时事件处理程序是在元素的作用域里中运行，所以此时this指向的是元素本身。

• Dom2级别事件监听的方法

var btn =document.getElementById("hh");
btn.addEventListener('click', function(){
  console.log("hello world");
})

通过这种方式指定的事件处理程序能更灵活，最明显的区别就是能够同时绑定多个不同的事件处理程序，并且不相干涉。

题目2： attachEvent与addEventListener的区别？

attachEvent是ie中的类似于标准浏览器中的addEventListener监听方法。由于IE指支持事件冒泡，所以使用attachEvent添加的程序会被添加到冒泡阶段，而addEventListener可以设定ture or false 来选择触发阶段。还有就是当我们使用IE的事件处理程序添加事件时，其处理的先后顺序是后添加的先执行，并且当处理程序的作用域是window即this指向的是window.

题目3： 解释IE事件冒泡和DOM2事件传播机制？

IE事件的传播机制只有冒泡阶段，即从目标元素向父元素传播一直传播到window停止，当传播的过程中如果监听到了相同的事件类型酒会一并触发，即从最具体的元素开始触发，一直到最外层的元素.
DOM2事件传播机制包括事件的，从window开始 -> 捕获阶段 －> 到达目标元素 -> 冒泡阶段 -> 再到达最外层的 window，并且在addEventListener(type,function(){},true(为捕获阶段)/false(default,为冒泡阶段触发))。

题目4：如何阻止事件冒泡？ 如何阻止默认事件？

• 兼容DOM的浏览器会将一个event对象传入事件处理程序中，这个event对象包含一个stopPropagation()方法，可以组织事件的进一步捕获或冒泡（取决于添加时的参数）。并且包含一个preventDefault()方法，可以取消事件的默认行为。（在事件处理程序里使用return false也可以）
• 对于IE来说，它的event对象具有cancelBubble属性，默认值为false，设置为true用来取消事件冒泡； 还有returnValue，默认值为true，设置为false用来取消事件的默认行为。

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

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<script>
var lis=document.querySelector('.ct');
lis.addEventListener('click',function(e){
console.log(e.target.innerText);
});
</script>

题目6： 补全代码，要求：

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

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>任务班</li>
</ul>
<input class="ipt-add-content" placeholder="添加内容"/>
<button id="btn-add-start">开头添加</button>
<button id="btn-add-end">结尾添加</button>
<script>
//你的代码
</script>

jsbin

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

<ul class="ct">
    <li data-img="1.png">鼠标放置查看图片1</li>
    <li data-img="2.png">鼠标放置查看图片2</li>
    <li data-img="3.png">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
//你的代码
</script>

jsbin