事件 - 简书

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

DOM0级事件使用方式：
1.直接在标签内部写onclick等事件；
2.在js代码中例如:xxx.oncilck = function(){}
DOM2级事件使用方式：
监听方法：
addEventListener：添加事件处理，可以为元素添加多个事件处理程序，触发时会按照添加顺序依次调用。
removeEventListener：移除事件处理，不能移除匿名添加的函数。
它们都有三个参数：
事件类型，事件处理方法，布尔值（true表示在时间捕获阶段调用事件处理，false表示在事件冒泡阶段调用事件处理）；
只有2级DOM包含3个事件：事件捕获阶段、处于目标阶段和事件冒泡阶段。

attachEvent与addEventListener的区别？

IE并不支持addEventListener，但支持attachEvent；由于IE只支持冒泡事件，所以添加的程序会被添加到冒泡阶段。
attachEvent与addEventListener的不同点：
1.参数个数不同，attachEvent添加的事件处理程序只能发生在冒泡阶段；addEventListener则可以通过第三个参数来决定冒泡还是捕获（为了浏览器兼容一般都选择冒泡）；
2.第一个参数意义不同，addEventListener第一个参数是事件类型（比如click，load），而attachEvent第一个参数指明的是事件处理函数名称（onclick，onload）
3.事件处理程序的作用域不相同，addEventListener的作用域是元素本身，this是指的触发元素；attachEvent事件处理程序会在全局变量内运行，this是window。
4.为一个事件添加多个事件处理程序时，执行顺序不同。addEventListener添加会按照添加顺序执行；attachEvent添加多个事件处理程序时顺序无规律

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

IE事件冒泡，从目标元素出发，向外层元素冒泡，最后到达顶层（window或document），依次执行绑定再其上的事件。
事件捕获阶段，即由最顶层元素（一般是从window元素开始，有的浏览器是从document开始，至于其中的差别我稍后会更新）开始，逐次进入dom内部，最后到达目标元素，依次执行绑定在其上的事件。

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

阻止冒泡：IE下设置CancleBubble为true，其他的利用stopPropagation

   function stopPropagation(e) {
    if (e.stopPropagation){
        e.stopPropagation();
    }else{
        e.cancelBubble = true;//IE
    }
}

阻止默认：

  function preventDefault(e) {
      if (e.preventDefault){
          e.preventDefault();
      }else{
          e.returnValue = false;//IE
}
}

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

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

补全代码，要求

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

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

任务7

事件