事件 - 简书

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

DOM0 事件：
一是在标签内写onclick事件
二是在JS写onclick = function（）{ }函数
DOM2级事件：
只有一个：监听方法，有两个方法用来添加和移除事件处理程序：addEventListener()和removeEventListener()。
addEventListener():可以为元素添加多个事件处理程序，触发时会按照添加顺序依次调用。
removeEventListener():不能移除匿名添加的函数。
它们都有三个参数：
第一个参数是事件名（如click）；
第二个参数是事件处理程序函数；
第三个参数如果是true则表示在捕获阶段调用，为false表示在冒泡阶段调用。

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的事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素。
DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段。
Opera、Firefox、Chrome、Safari都支持DOM事件流，IE不支持事件流，只支持事件冒泡

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

stopPropagation() 方法可以阻止事件进一步捕获或冒泡。
preventDefault() 方法可以取消事件默认行为。
对于IE来说，它的event对象具有cancelBubble属性，默认值为false，设置为true用来取消事件冒泡；还有returnValue，默认值为true，设置为false用来取消事件的默认行为。

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

<!DOCTYPE html>
<html>
<head>
    <title>js</title>
    <meta charset="UTF-8">
</head>
<body>
    <ul class="ct">
        <li>这里是</li>
        <li>饥人谷</li>
        <li>前端6班</li>
    </ul>
--------------------------------
    <script>
        var lists = document.getElementsByTagName("li");
        for (var i = 0; i < lists.length; i++) {
            lists[i].addEventListener("click",function (){
                console.log(this.innerText) //this代表当前的lists[i]，ie中代表window
    //或写成(lists.target.innerText)或传入参数
            })
        }
    </script>
--------------------------------
</body>
</html>

预览

6. 补全代码，要求：

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

<!DOCTYPE html>
<html>
<head>
    <title>js</title>
    <meta charset="UTF-8">
</head>
<body>
    <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 btnAddStart = document.getElementById("btn-add-start");
        var btnAddEnd = document.getElementById("btn-add-end");
        var ct = document.getElementsByClassName("ct")[0];
        var addContent = document.getElementsByClassName("ipt-add-content")[0];
        btnAddStart.addEventListener("click",function(){
            var newLi = document.createElement("li");
            newLi.innerText = addContent.value;
            ct.insertBefore(newLi, ct.firstChild);
        });
        btnAddEnd.addEventListener("click",function(){
            var newLi = document.createElement("li");
            var newText = document.createTextNode(addContent.value);//或newLi.innerText = addContent.value;
            newLi.appendChild(newText);
            ct.appendChild(newLi); 
        })
        ct.addEventListener("click",function(e){
            console.log(e.target.innerText) 
        });

        /*或
        var btnAddStart = $("#btn-add-start");
        var btnAddEnd = $("#btn-add-end");
        var addContent = $(".ipt-add-content")
        var ct = $(".ct");
        function $(id) {
            return document.querySelector("id");
        }
        */
    </script>
--------------------------------
</body>
</html>

预览

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

<!DOCTYPE html>
<html>
<head>
    <title>js</title>
    <meta charset="UTF-8">
</head>
<body>
    <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 = $(".ct");
        var imgPreview = $(".img-preview");
        var newImg = document.createElement("img");
        function $(id) {
            return document.querySelector(id);
        }
        ct.addEventListener("mouseover",function(e){
            var value = e.target.getAttribute("data-img");
            newImg.setAttribute("src",value);
            imgPreview.appendChild(newImg);
        });
        ct.addEventListener("mouseout",function(){
            imgPreview.removeChild(newImg);
        });
    </script>
--------------------------------
</body>
</html>

预览

8. 事件兼容的函数

//解决addEventListener和attachEvent参数个数不相同，第一个参数意义不同
function bindEvent(node,type,handler) {
    if (node.addEventListener) { 
        node.addEventListener(type,handler); 
    }else{
        node.attachEvent("on"+type,handler); 
    }
}
/*
事件处理程序的作用域不相同，addEventListener的作用域是元素本身，this是指的触发元素，
而attachEvent事件处理程序会在全局变量内运行，this是window，
*/
function addEvent(node, type, handler) {
    if (!node) return false;
    if (node.addEventListener) {
        node.addEventListener(type, handler, false);
        return true;
    }
    else if (node.attachEvent) {
        node['e' + type + handler] = handler;
        node[type + handler] = function() {
            node['e' + type + handler](window.event);
        };
        node.attachEvent('on' + type, node[type + handler]);
        return true;
    }
    return false;
}
//在取消事件处理程序的时候
function removeEvent(node, type, handler) {
    if (!node) return false;
    if (node.removeEventListener) {
        node.removeEventListener(type, handler, false);
        return true;
    }
    else if (node.detachEvent) {
        node.detachEvent('on' + type, node[type + handler]);
        node[type + handler] = null;
    }
    return false;
}

事件