事件

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

(1)添加事件：DOM0使用HTML内联方式<button onclick="console.log()">点我</button>和通过JS指定事件处理程序btnClick.onClick = function(){}；DOM2使用addEventListener添加监听事件，三个参数：①事件类型②事件处理函数③布尔参数，true表示在捕获阶段处理；false在冒泡阶段处理。btnClick.addEventListener('click',function(){},false);
(2)删除事件：DOM0事件只需要把元素的onclick属性赋值为nullbtnClick.onclick=null；DOM2使用removeEventListener删除监听事件btnClick.removeEventListener('click',function(){},false);，不能删除匿名函数。
(3)DOM0只能在冒泡阶段调用事件处理程序，DOM2既可以在捕获阶段，也可以在冒泡阶段调用事件处理程序。
(4)多个事件处理程序：DOM0不能添加多个处理程序，会出现后面覆盖前面的情况；DOM2可以添加多个处理程序。

2.attactEvent和addEventListener的区别？

(1)参数个数不同：attactEvent有两个参数，addEventListener有三个参数。attachEvent添加的事件处理程序只能发生在冒泡阶段，addEventListener第三个参数可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理（我们一般为了浏览器兼容性都设置为冒泡阶段）
(2)第一个参数意义不同：attactEvent的第一个参数指明的是事件处理函数名称(onclick,onload)；addEventListener的第一个参数是事件类型(click,load)。
(3)作用域不相同：attactEvent事件处理程序在全局变量内运行，this是window；addEventListener的作用域是元素本身，this指触发元素。
(4)执行顺序不同：attactEvent添加多个事件处理程序顺序无规则；addEventListener会按照添加顺序执行。

 function addEvent(node,type,handler){
   if(!node) return false;
   if(node.addEventListener){
     node.addEventListener(node,handler,false);
     return true;
   }else if(node.attactEvent){
     node['e'+type+handler] = handler;
     node[type+handler] = function(){
       node['e'+type+handler](window.event);
     };
     node.attactEvent('no'+type,node[type+handler]);
     return true;
   }
   return false;
 }

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

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

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

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

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

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

  <ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端任务班</li>
  </ul>
  <script>
    //使用事件代理，把事件监听绑定到父容器上，根据事件的来源进行处理
    //var ct = document.querySelector('.ct');
    //ct.addEventListener("click",function(e){
    //  console.log(e.target.innerText);
    //})
    //直接给元素绑定事件
    var liNodes = document.getElementsByClassName('ct')[0].getElementsByTagName('li');
    for(var i=0;i<liNodes.length;i++){
      liNodes[i].addEventListener("click",function(){
        console.log(this.innerText);
      });
    }
  </script>

6.补全代码，要求：

(1)当点击按钮开头添加时在<li>这里是</li>元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在最后一个 li 元素后添加用户输入的非空字符串.
(2)当点击每一个元素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 btnStart = document.querySelector('#btn-add-start');
    var btnEnd = document.querySelector('#btn-add-end');

    btnStart.addEventListener('click',function(){
      if(/^\S+$/.test(ipt.value)){
        var li = document.createElement('li');
        li.innerText = ipt.value;
        ct.insertBefore(li,ct.firstChild);
      }
    });

    btnEnd.addEventListener('click',function(){
       if(/^\S+$/.test(ipt.value)){
        var li = document.createElement('li');
        li.innerText = ipt.value;
        ct.appendChild(li);
      }
    });

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

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

 <ul class="ct">
    <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg">鼠标放置查看图片1</li>
    <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg">鼠标放置查看图片2</li>
    <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg">鼠标放置查看图片3</li>
  </ul>
  <div class="img-preview"></div>
  <script>
    var ct = document.querySelector('.ct');
    var liNodes = ct.querySelectorAll('li');
    var preview = document.querySelector('.img-preview');
    for(var i = 0;i<liNodes.length; i++){
      liNodes[i].addEventListener('mouseenter',function(){
        var dataImg = this.getAttribute('data-img');
        preview.innerHTML = '![](' + dataImg + ')';
     });
   }
  //使用事件代理 
   var ct = document.querySelector('.ct');
   var preview = document.querySelector('.img-preview');
   var img = document.createElement('img');
   ct.addEventListener('mouseover', function(e){
     if(e.target.tagName.toLowerCase() ==='li'){        
       var dataImg = e.target.getAttribute('data-img');
       img.setAttribute('src',dataImg);
       preview.appendChild(img);
    }
  }); 
  </script>

事件的应用

Tab效果的实现
模态框的实现