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

• 浏览器端的JavaScript采用的是事件驱动的异步编程模型。在这种设置模式下，当文档、浏览器、元素或与之相关的对象发生某些事情时，浏览器就会产生对应的事件（event）。事件是JavaScript和HTML DOM交互的基础，DOM元素支持的每种事件，都可以使用一个与相应事件处理程序（事件监听）通过相应HTML属性来指定。添加DOM元素事件处理程序，可以使用DOM0级的方式添加，也可以使用DOM2级的方式添加。

• 事件是HTML文档执行某种操作时需要执行的动作，如：click、load和mouseover等都是事件的名字，响应事件的函数就叫做事件处理程序，又叫做事件监听器。在W3C对DOM事件进行规范化之前的事件处理，一般称为DOM0级事件处理程序。W3C在DOM2级文档规范中，包含了DOM 事件（DOM Events）规范，也就是我们通常所说的DOM2级事件处理程序。

1. DOM0级事件处理程序

在DOM0级事件处理程序，事件名以'on'开头，因此click事件的事件处理程序就是onclick、load事件的事件处理程序就是onload。

• 1.1 HTML事件处理程序

  • 一个HTML元素支持事件，可以通过HTML元素的属性来指定：

    <input type="button" value="这是个按钮" onclick="showMessage()" />
    

    上面的input对应的onclick事件处理程序如下：

    function showMessage(){
        alert('itbilu.com');  
    }
    

    上面通过HTML元素属性添加事件处理程序的方式，属于DOM0事件处理程序。通过上面的方式添加会有一定的麻烦，个是HTML与JavaScript代码紧密耦合，对代码修改和维护都造成了不便。

• 1.2 通过JavaScript添加DOM0事件处理程序

  • 要使用JavaScript指定事件处理程序，首先要获得一个要操作的对象的引用，然后通过其事件处理程序属性（这些属性通常全部小写，例如：onclick），指定事件处理程序。

    var btn = document.getElementById("myBtn");
    btn.onclick = function(){
      alert('itbilu.com');
    }
    

  • DOM0级事件处理程序可以认为是元素的方法。删除DOM0级事件处理程序，将相应属性值设置为null即可。

    btn.onclick = null;
    

2. DOM2级事件处理程序

• 在W3C制定的DOM2规范中，其中的DOM事件规范定义了两个方法：addEventListener()和removeEventListener()，分别用于添加事件处理程序和删除事件处理程序。

var btn = document.getElementById("myBtn");
btn.addEventListener("click", showMessage, false);

使用DOM2级方法添加事件处理程序时，可以为指定元素添加多个事件处理程序。

var btn = document.getElementById("myBtn");
btn.addEventListener("click", showMessage, false);
btn.addEventListener("click", showMessage2, false);

删除DOM2级事件处理程序方法如下：

btn.removeEventListener("click", showMessage, false);

区别

• 添加方式：DOM0级事件是通过内联方式<div onclick="console.log()"></div>,或是在JS中写onlicke=function(){}函数；DOM2级事件通过addEventListener来填加事件监听,接受三个参数,事件类型,事件处理方法,布尔值(true表示事件捕获阶段响应，false表示事件冒泡阶段响应,默认false)btn.addEventListener("click",function(){}，false)。
• 删除事件：删除DOM0事件处理程序是将对应事件属性置为null，btnClick.onclick = null；DOM2级事件通过removeEventListener删除事件的监听，btn.removeEventListener('click', function(){}, false);，但不能移除匿名函数。
• 多个事件处理程序：DOM0事件不支持，会出现后面的覆盖前面的这种情况，只能一个事件处理程序对应一个处理函数；DOM2级事件处理程序可以添加多个事件处理程序。
• this：DOM0级事件中this对象指向全局对象；DOM2级事件this指向Element节点
• DOM0级事件只能在冒泡阶段进行监听器触发；DOM2级事件可以选择在捕获阶段还是冒泡阶段进行监听器触发。
• 兼容性：DOM0级事件兼容所有浏览器；DOM2级事件要求浏览器为IE8以上

2：attachEvent与addEventListener的区别？

1. 参数个数不相同，这个最直观，addEventListener有三个参数，attachEvent只有两个，attachEvent添加的事件处理程序只能发生在冒泡阶段，addEventListener第三个参数可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理（我们一般为了浏览器兼容性都设置为冒泡阶段）

2. 第一个参数意义不同，addEventListener第一个参数是事件类型（比如click，load），而attachEvent第一个参数指明的是事件处理函数名称（onclick，onload）

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

4. 为一个事件添加多个事件处理程序时，执行顺序不同，addEventListener添加会按照添加顺序执行，而attachEvent添加多个事件处理程序时顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的，但是添加的多了就无规律了)，所以添加多个的时候，不依赖执行顺序的还好，若是依赖于函数执行顺序，最好自己处理，不要指望浏览器

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

• IE事件冒泡
  • 事件开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体节点。

事件冒泡模型.png

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

事件捕获模型.png

DOM事件流.png

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

• DOM事件对象：
  • 阻止事件冒泡 e.stopPropagation()
  • 阻止默认事件 e.preventDefault()
• IE事件对象：
  • 阻止事件冒泡：e.cancelBubble = false
  • 阻止默认事件：e.returnValue = true

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

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<script>

//1.使用事件代理，把事件监听绑定到父容器上，根据事件的来源进行处理
    
    /*
    var ct = document.querySelector('.ct');
    ct.addEventListener("click",function(e){
      console.log(e.target.innerText);
    })
    */
    
    //2.把事件直接绑定到元素上
    
    var liList = document.querySelectorAll(".ct li")
   
    for (var j = 0; j < liList.length; j ++){
      liList[j].addEventListener("click", function(){
        console.log(this.innerText)
      })
    }
</script>

• demo

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 addBtnStart = document.querySelector("#btn-add-start");
  var addBtnEnd = document.querySelector("#btn-add-end");
  var input = document.querySelector('.ipt-add-content');
  var container = document.querySelector('.ct');
  var liNodes = document.querySelector('.ct>li');

  var reg = /\S+/;

  addBtnStart.addEventListener('click',function(){
    var startLi = document.createElement('li');
    startLi.innerText = input.value;

    if(reg.test(startLi.innerText)){
      container.insertBefore(startLi,container.firstChild);
    }else{
      console.log("输入非空字符串");
    }
  })


  addBtnEnd.addEventListener('click',function(){
    var endLi = document.createElement('li');
    endLi.innerText = input.value;

    if(reg.test(endLi.innerText)){
      container.appendChild(endLi);
    }else{
      console.log("输入非空字符串");
    }
  })

  container.addEventListener('click',function(e){
        if(e.target.tagName.toLowerCase() === 'li'){
      console.log(e.target.innerText);
    }
  })
</script>

• demo

参考：

• 事件-饥人谷课件