关于DOM事件

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

Dom0级事件处理程序是将一个函数赋值给一个事件处理程序属性，而通过将事件处理程序设置为null删除绑定在元素上的事件处理程序。这种方法无法给一个事件添加多个事件处理程序，后面的程序会覆盖前面的程序。

// 添加事件处理程序
var btn=document.querySelector("#btn");
btn.onclick=function () {
  alert(this.id);
}
// 删除事件处理程序
btn.onclick=null;

Dom2级定义了addEventListener()和removeEventListener()用于处理指定和删除事件处理程序。所有Dom节点都包含这两个方法，并且它们都接受3个参数，要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

var btn=document.querySelector("#btn");
var handler=function(){
  alert(this.id);
}
// 指定事件处理程序
btn.addEventListener("click",handler,false);
// 删除事件处理程序
btn.removeEventListener("click",handler,false);

但是通过removeEventListener()函数来移除事件处理程序时，移除时的参数必须与添加处理程序时使用的参数相同，这也意味着通过addEventListener()添加的匿名函数将无法移除。如：

var btn=document.querySelector("#btn");
// 指定事件处理程序
btn.addEventListener("click",function(){
  alert(this.id);
},false);
// 删除事件处理程序,不会生效
btn.removeEventListener("click",function(){
  alert(this.id);
},false);

二者区别：
使用Dom2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序，而Dom0级为一个事件添加多个事件处理程序时，后面的程序会覆盖前面的。

attachEvent与addEventListener的区别？

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

第一个参数意义不同，addEventListener()，第一个参数是事件类型（比如click，load），而attachEvent()第一个参数指明的是事件处理函数名称（onclick，onload）
事件处理程序的作用域不相同，addEventListener()的作用域是元素本身，this是指的触发元素，attachEvent()事件处理程序会在全局变量内运行，this是window。
为一个事件添加多个事件处理程序时，执行顺序不同，addEventListener()添加会按照添加顺序执行，而attachEvent()添加多个事件处理程序时顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的，但是添加的多了就无规律了)，所以添加多个的时候，不依赖执行顺序的还好，若是依赖于函数执行顺序，最好自己处理，不要指望浏览器。

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

浏览器只支持事件冒泡机制。

DOM2事件传播机制含有三个阶段：事件捕获阶段、事件响应阶段、事件冒泡阶段。

举例：

<body>
  <div>
    <button>click</button>
  </div>
</body>

在IE浏览器中：点击按钮button元素，事件传播机制是从button->div->body->html->document

在支持DOM2事件的浏览器中：首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段；点击按钮button后，事件传播机制是document->html->body->div->button->div->body->html->document。

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

DOM中的事件对象:阻止事件冒泡用stopPropagation().阻止默认事件用preventDefault()。
IE中的事件对象：阻止事件冒泡用cancelBubble设置为true.阻止默认事件用returnValue设置为false。

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



    <ul class="ct">
        <li>red</li>
        <li>blue</li>
        <li>yellow</li>
    </ul>

    //方法一：直接给元素绑定事件。

    <script>

    var liArr = document.querySelectorAll(".ct li");
    for (var i = 0; i < liArr.length; i++) {
        liArr[i].addEventListener("click", function() {
            console.log(this.innerText);
        })

    }

    //方法二：事件代理 ,把事件监听绑定到父容器上，根据事件来源进行处理。

    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 class="ipt-add-content" placeholder="添加内容"/>
    <button id="btn-add-start">开头添加</button>
    <button id="btn-add-end">结尾添加</button>
    <script>
    var ct = document.querySelector(".ct");
    var start = document.querySelector("#btn-add-start");
    var end = document.querySelector("#btn-add-end");
    var textArea = document.querySelector(".ipt-add-content");



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

    end.addEventListener("click", function(e) {
        if (textArea.value === "")
            console.log("输入不能为空！")
        else {
            var newLi = document.createElement("li");
            newLi.innerText = textArea.value;
            ct.appendChild(newLi);
            textArea.value = "";
        }

    })

    start.addEventListener("click", function(e) {
        if (textArea.value === "")
            console.log("输入不能为空！")
        else {
            var newLi = document.createElement("li");
            newLi.innerText = textArea.value;
            ct.insertBefore(newLi, ct.firstChild);
            textArea.value = "";
        }
    })
    </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");
    var childs = ct.querySelectorAll("li");
    var preview = document.querySelector(".img-preview");

    for (var i = 0; i < childs.length; i++) {
        childs[i].addEventListener("mouseenter", function() {
            var dataImg = this.getAttribute("data-img");
            preview.innerHTML = '![](' + dataImg + ')'
        });
    }
    </script>

关于DOM事件

关于DOM事件

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

attachEvent与addEventListener的区别？

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

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

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

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

推荐阅读更多精彩内容

友情链接更多精彩内容

关于DOM事件

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

attachEvent与addEventListener的区别？

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

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

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

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

推荐阅读更多精彩内容

友情链接更多精彩内容

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