JS事件

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

DOM0级事件

了解DOM0级事件之前，先了解下HTML事件处理程序

<input type="button" value="点击" onclick="alert('你点击了按钮')">
//也可以调用页面其它地方定义的函数
<input type="button" value="点击" onclick="showMessage()">
<script type="text/javascript">
  function showMessage(){
    alert("hello world!");
  }
</script>

这样的事件处理程序最大的缺点就是HTML于JS强耦合，我们一旦需要修改函数名就得修改两个地方。当然其优点是不需要操作DOM来完成事件的绑定。

DOM0事件是将一个函数赋值给一个事件处理程序属性

<input type="button" value="点击" id="btn">
<script type="text/javascript">
  var btn = document.getElementById("btn");
  btn.onclick = function(){
    alert("你点击了按钮");
  }
// btn.onclick = null; 解绑事件 
</script>

这样的方法便是DOM0级处理事件的体现。我们可以通过给事件处理属性赋值null来解绑事件。
使用DOM0级方法指定的事件处理程序被认为是元素的方法。此时事件处理程序是在元素的作用域中运行，程序中的this引用当前元素；DOM0的优势在于简单和兼容性好，缺点在于只能存在一个处理程序，如果再次向同一个元素添加另一个处理程序，上一个处理程序会被覆盖。

DOM2级事件处理程序

由于DOM0级事件处理程序会产生事件冒泡和事件覆盖等问题，W3C组织制定了“DOM2级事件处理程序”。“DOM2级事件处理程序”定义了2个方法，用于处理指定和删除事件处理程序的操作，这2个方法是：addEventListener和removeEventListener。所有的DOM节点中都包含这两个方法，这些方法接收3个参数：要处理的事件名称、作为事件处理程序的函数和一个布尔值。布尔值参数如果设置为true，表示在捕获阶段调用事件处理程序，如果设置为false，表示在事件冒泡阶段调用事件处理程序。

<input type="button" value="点击" id="btn">
<script type="text/javascript">
  var btn = document.getElementById("btn");
  btn.addEventListener("click",function(){
    alert(this.id);
  },false);
</script>

上面的代码为按钮添加了一个DOM2级事件处理程序，事件名称是click，对应DOM0级的onclick属性。因为最后一个参数为false，所以这个事件会在冒泡阶段被触发。
和DOM0级事件处理程序相同，DOM2级事件处理程序也会依附在元素的作用域中运行
使用DOM2级事件处理程序就可以避免DOM0级事件处理程序的事件覆盖问题

<input type="button" value="点击" id="btn">
<script type="text/javascript">
  var btn = document.getElementById("btn");
  btn.addEventListener("click",function(){
    console.log("event-one");
  },false);
  btn.addEventListener("click",function(){
    console.log("event-two");
  },false);
  btn.addEventListener("click",function(){
    console.log("event-three");
  },false);
</script>   
//3个事件都会被执行，控制台中依次打印出：“event-one”、“event-two”和“event-three”。

二、attachEvent与addEventListener的区别？

• 支持的浏览器不同。attachEvent是IE私有的，不符合W3C规范。在IE9以下的版本中受到支持。addEventListener是符合W3C规范的事件绑定方法，FireFox、Chrome、Safari都是用它来绑定事件。
• 参数不同。
  addEventListener有3个参数，如下所示：
  element.addEventListener(type,listener,useCapture);
  attachEvent有2个参数，如下所示：
  element.attachEvent(type,listener);
  addEventListener第三个参数可以指定是否捕获，而attachEvent不支持捕获。
• 事件名不同。addEventListener第一个参数是事件类型（比如click，load），attachEvent第一个参数指明的是事件处理函数名称（onclick，onload）；
• this不同。
  attachEvent的this总是Window。
  addEventListener的this总是当前正在处理事件的那个DOM对象。
• 执行事件顺序不同
  addEventListener添加会按照添加顺序执行，而attachEvent添加多个事件处理程序时顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的，但是添加的多了就无规律了)

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

IE事件冒泡的传播顺序是由里到外，事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播。
"DOM2级事件”规定的事件流包含三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，然后是实际的目标接收到事件，最后阶段是冒泡阶段。

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

//阻止事件冒泡
function stopBubble(e) {
    // 如果提供了事件对象，则这是一个非IE浏览器
    if ( e && e.stopPropagation ) {
        // 因此它支持W3C的stopPropagation()方法 
        e.stopPropagation();
    } else { 
        // 否则，我们需要使用IE的方式来取消事件冒泡
        window.event.cancelBubble = true;
    }
}
//阻止默认事件
function stopDefault( e ) {
     // 阻止默认浏览器动作(W3C)
     if ( e && e.preventDefault ) {
         e.preventDefault();
     } else {
        // IE中阻止函数器默认动作的方式
        window.event.returnValue = false;
    }
    return false;
}

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

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

六、补全代码，要求：

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

<ul class="ct">
        <li>这里是</li>
        <li>饥人谷</li>
        <li>任务班</li>
  </ul>
    <input id="ipt-add-content" placeholder="添加内容" />
    <button id="btn-add-start">开头添加</button>
    <button id="btn-add-end">结尾添加</button>
    <script>
        var ct = document.querySelector('.ct'),
            addStartBtn = document.querySelector('#btn-add-start'),
            addEndBtn = document.querySelector('#btn-add-end'),
            ipt = document.querySelector('#ipt-add-content');

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

        addEndBtn.addEventListener('click', function() {
            var li = document.createElement('li');
            li.innerText = ipt.value;
            ct.appendChild(li);
        });

        addStartBtn.addEventListener('click', function() {
            var li = document.createElement('li');
            li.innerText = ipt.value;
            ct.insertBefore(li, ct.firstChild);
        });
    </script>

七、补全代码，要求：当鼠标放置在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'),
            preview = document.querySelector('.img-preview');
        ct.addEventListener('mouseover', function(e) {
            if (e.target.tagName.toLowerCase() === 'li') {
                var img = document.createElement('img');
                img.src = e.target.dataset.img;
               <!--HTMLElement.dataset 属性允许我们访问所有在元素上自定义的data属性 (这种属性一般以data-开头）
                语法string = element.dataset.camelCasedName;-->
                preview.appendChild(img);
            }
        })
        ct.addEventListener('mouseout', function(e) {
            if (e.target.tagName.toLowerCase() === 'li') {
                preview.innerHTML = '';
            }
        })
    </script>