事件

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

1. DOM0 事件：使用onClick方法直接添加事件

<input id="btn" type="button" value="click here"/> <script type="text/javascript"> var btn=document.getElementById("btn"); //添加事件 btn.onclick=function(){ console.log(this.id); }; //删除事件 btn.onclick=null; </script>

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

2. DOM2级事件：使用addEventListener和removeEventListener来添加事件和删除事件。

<input id="btn" type="button" value="click here"/> <script type="text/javascript"> var btn=document.getElementById("btn"); //添加事件 btn.addEventListener("click",function(){ console.log(this); }); //删除事件 btn.removeEventListener("click",function(){ console.log(this); }); </script>

2.attachEvent与addEventListener的区别？

• addEventListener是DOM2的添加事件方法（也是目前的标准）,attachEvent只是老IE（IE6,7)的方法;

• 参数个数不同，addEventListener有3个参数(事件类型，处理方法，是否拦截)，而attachEvent只有2个参数（事件类型，处理方法）;

• 第一个参数名称不一致：addEventListener的事件类型参数为'click','dblclick'等(type)；而attachEvent的事件类型参数为'onclick','ondblclick'等(on+type);

• 事件流不一样，addEventListener通过设置第三个参数可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理（我们一般为了浏览器兼容性都设置为冒泡阶段）；而attachEvent的事件处理只能在冒泡阶段;

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

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

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

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

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

  
  

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

1.对于DOM的事件对象
stopPropagation() // 取消事件进一步捕获或冒泡
preventDefault() // 取消事件默认行为

2.对于IE
cancelBubble // 默认为false，设置为true后可以取消事件冒泡
returnValue // 默认为true，设为false可以取消事件默认行为

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

<ul class="ct"> <li>这里是</li> <li>饥人谷</li> <li>前端6班</li> </ul>
<script> var ct=document.getElementsByClassName("ct")[0]; ct.addEventListener("click",function(e){ if(e.target.tagName.toLowerCase()==="li"){ 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> var ct=document.querySelector(".ct"); var ipt=document.querySelector(".ipt-add-content"); var start=document.querySelector("#btn-add-start"); var end=document.querySelector("#btn-add-end"); ct.addEventListener("click",function(e){ if(e.target.tagName.toLowerCase()==="li"){ console.log(e.target.innerText); } }); start.addEventListener("click",function(){ var text=ipt.value; if(/^\s*$/.test(text)){ alert("输入内容不能为空！"); }else{ nodeLi=document.createElement("li"); nodeLi.innerText=text; ct.insertBefore(nodeLi,ct.firstChild); } }); end.addEventListener("click",function(){ var text=ipt.value; if(/^\s*$/.test(text)){ alert("输入内容不能为空！"); }else{ nodeLi=document.createElement("li"); nodeLi.innerText=text; ct.appendChild(nodeLi); } }); </script>

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

<ul class="ct"> <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg">鼠标放置查看图片1</li> <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg">鼠标放置查看图片2</li> <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg">鼠标放置查看图片3</li> </ul>
<div class="img-preview"></div>
<script> var ct = document.querySelector('.ct'), childs = ct.querySelectorAll('li'), preview = document.querySelector('.img-preview');
for(var i=0; i<childs.length; i++){ childs[i].addEventListener('mouseenter', function(){ var dataImg = this.getAttribute('data-img'); preview.innerHTML = '![](' + dataImg + ')' }); } </script>

8.在 github 上创建个人项目，把视频里事件兼容的函数写法放入项目，在 Readme.md里描述项目(选做题目)

github