web前端-js小记(9)-事件

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

1. DOM0事件: DOM0分为2种，一种是HTML内联方式，事件写在标签里面；另一种是JavaScript指定事件处理程序，把一个方法赋值给一个元素的事件处理程序属性(onclick,onload等)。

<div>
  <button onclick="show()">点我</button>  
<!--缺点：存在加载顺序问题，如果事件处理程序在html代码之后加载，用户可能在事件处理程序还未加载完成时就点击按钮之类的触发事件，而且不方便维护-->
  <button class="btn">点我</button>
</div>
<script>
  var show=function(){
    alert("x");
  }
  document.getElementsByClassName("btn")[0].onclick=function(){
    alert("y");  //缺点：虽然把HMTL和JS进行分离，但是不能给同一个事件属性设置不同的方法
  }
</script>

2. DOM2事件:
   DOM2事件定义了两个方法用于处理指定和删除事件处理程序的操作 :1. addEventListener(); 2. removeEventListener()。两种方法接受3个参数：1、事件类型；2、事件处理方法；3、布尔参数（默认值为false），如果是true表示在捕获阶段调用事件处理程序，如果是false，则是在事件冒泡阶段处理

<div class="btnBox">
  <button class="btn1">点我</button>  
</div>
<div class="btnBox">
  <button class="btn1">点我</button>
</div>
<script>
  var show=function(){
    alert("div");
  }
  var show1=function(){
    alert("btn1");
  }
  var show2=function(){
    alert("btn2");
  }
  document.getElementsByClassName("btnBox")[0].addEventListener("click",show);  
  document.getElementsByClassName("btn1")[0].addEventListener("click",show1);  //点击第一个按钮，显示btn1,div
  document.getElementsByClassName("btnBox")[1].addEventListener("click",show,true);
  document.getElementsByClassName("btn1")[1].addEventListener("click",show2,true);  //点击第二个按钮，显示div,btn2
</script>

2、attachEvent与addEventListener的区别？

1. attachEvent和detachEvent: IE浏览器独有的方法(IE10以上不支持)，接收两个参数: 1、事件处理程序属性；2、事件处理程序方法。由于IE仅支持事件冒泡，所以添加的程序会被添加到冒泡阶段。
2. attachEvent与addEventListener的区别:

不同点	addEventListener	attachEvent
参数个数不同	有3个参数，第3个参数可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理	只有2个参数，而且只能发生在冒泡阶段
第一个参数不同	第一个参数是事件类型（比如click，load）	第一个参数指明的是事件处理函数名称（onclick，onload）
作用域不同	作用域是元素本身，this是指的触发元素	在全局变量内运行，this是window
为一个事件添加多个程序	会按照添加顺序执行	执行顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的，但是添加的多了就无规律了)

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

1. IE事件冒泡: 从目标元素出发，向外层元素冒泡，最后到达顶层（window或document），依次执行绑定再其上的事件。
2. DOM2事件传播机制包含3个阶段:
   事件捕获阶段：事件从顶级文档树节点一级一级向下遍历，直到到达该事件的目标节点。
   事件目标阶段：到达事件的目标节点，执行目标节点的事件处理程序。
   事件冒泡阶段：事件从目标节点一级一级向上上溯，直到顶级文档树节点。

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

阻止事件	DOM事件的对象	IE事件的对象
阻止事件冒泡	e.stopPropagation();	window.event.cancelBubble=true;
阻止默认事件	e.preventDefault();	window.event.returnValue=false;

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

<ul class="ct">
    <li>你好</li>
    <li>我是</li>
    <li>过儿</li>
</ul>
<script>
  var ctLi=document.querySelectorAll(".ct li");
  var show=function(){
       console.log(this.innerText);
   }
   ctLi.forEach(function(value,index,arr){
       arr[index].addEventListener("click",show);
   });
</script>

6、补全代码

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

7、补全代码

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

(mission 9)