事件练习

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

• DOM0级事件监听就是把一个方法赋值给一个元素的事件处理程序属性。将这些属性的值设置为一个函数，就可以指定事件处理程序，一个事件只能绑定一次，且新方法覆盖老方法。

• DOM2级事件监听定义了两个方法用于处理指定和删除事件处理程序的操作：

addEventListener、removeEventListener。所有DOM节点都包含这两个方法，并且他们都接受三个参数：事件类型、事件处理方法、布尔参数。可以选择按照冒泡顺序处理还是捕获顺序处理。

题目2： attachEvent与addEventListener的区别？

• 参数个数不同：addEventListener有三个参数，attachEvent只有两个，attachEvent添加的事件处理程序只能发生在冒泡阶段，addEventListener第三个参数布尔值可以决定添加的事件处理程序实在捕获阶段还是冒泡阶段处理
• 第一个参数不同：addEventListener第一个参数是事件类型（click,load等）,而attachEvent第一个参数是事件处理函数的名字（onclick,onload等）；
• 事件处理程序的作用域不同：addEventListener作用域是元素本身，this是指的触发元素,而attachEvent事件处理程序会在全局变量内运行，this是指window；
• 为一个事件添加事件处理程序时，执行顺序不同：addEventListener添加会按照添加顺序执行，而attachEvent添加多个事件处理程序时顺序无规律，方法较少时一般是按添加顺序反向执行，多方法就无规律。

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

ie事件冒泡：是指事件从事件目标节点逐层步的往上层节点传播(如下图)，ie只支持这一种传播机制

事件冒泡模型

dom2事件传播机制：事件从顶层节点一级一级往下层传播，接着到达目标节点，这部分叫做时间捕获阶段。然后事件又从目标节点逐层往上层节点传播，这部分叫做事件冒泡，这个完整的事件流就是dom2时间的传播机制了(如下图)。

DOM事件流

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

    //  DOM浏览器
    e.stopPropagation();    //  阻止冒泡
    event.preventDefault();     //阻止默认事件
    
    //  IE浏览器
    e.cancelBubble = true;  //  阻止冒泡
    event.returnValue = false;      //  阻止默认事件

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

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<script>
//todo ...
var ct = document.getElementsByTagName("li");
    for (var i = 0; i < ct.length; i++) {
        ct[i].addEventListener("click", function () {
            console.log(this.innerText);
        })
    }
</script>

题目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 newUl= document.getElementsByClassName("ct")[0];
        var content = document.getElementsByClassName("ipt-add-content")[0];
        var startBtn = document.getElementById("btn-add-start");
        var endBtn = document.getElementById("btn-add-end");
        var firstChild = document.getElementsByTagName("li")[0];
        newUl.addEventListener("click",function(e){
            if(e.target.tagName.toLowerCase() === "li"){
                console.log(e.target.innerText )
            }
        })
        startBtn.addEventListener("click",function(){
            var newLi = document.createElement("li");
            newLi.innerText = content.value;
            if(newLi.innerText !=='' ){
                newUl.insertBefore(newLi,firstChild);
            }else{
                alert("请输入内容！");
            }
        });
        endBtn.addEventListener("click",function(){
            var newLi = document.createElement("li");
            newLi.innerText = content.value;
            if(newLi.innerText !== ''){
                newUl.appendChild(newLi);
            }else{
                alert("请输出内容！");
            }
            
        })
</script>

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

<ul class="ct">
    <li data-img="1.png">鼠标放置查看图片1</li>
    <li data-img="2.png">鼠标放置查看图片2</li>
    <li data-img="3.png">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
//循环实现 
        var ct = document.getElementsByTagName("li");
        var showImg = document.getElementsByClassName("img-preview")[0];
        for(var i = 0; i<ct.length; i++){
            ct[i].addEventListener("mouseover",function(){
                var imgSrc = this.getAttribute("data-img");
                showImg.innerHTML = '<img src = "'+ imgSrc +'">';
            })
        }
        //事件代理实现
        var ct1 = document.getElementsByClassName("ct")[0];
        var showImg = document.getElementsByClassName("img-preview")[0];
        ct1.addEventListener("mouseover",function(e){
            if(e.target.tagName.toLowerCase() === "li"){
                var imgSrc = e.target.getAttribute("data-img");
                showImg.innerHTML = '<img src = "'+ imgSrc +'">';
            }
        })
</script>