事件

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

DOM0事件 每个元素都有自己的事件处理程序属性，事件处理程序被认为是元素的方法，事件处理程序在元素的作用域下运行，this就是当前元素，所以点击button结果是：btnClick。删除事件处理程序，只需把元素的onclick属性赋为null即可。
DOM2事件 定义了addEventListener、removeEventListener两个方法用于处理指定和删除事件处理程序的操作，它可以给一个同一个元素添加多个处理事件。同时它的this也同样指向元素本身。

题目2： attachEvent与addEventListener的区别？

第一个参数意义不同，addEventListener第一个参数是事件类型（比如click，load），而attachEvent第一个参数指明的是事件处理函数名称（onclick，onload）
事件处理程序的作用域不相同，addEventListener的作用域是元素本身，this是指的触发元素，而attachEvent事件处理程序会在全局变量内运行，this是window。
为一个事件添加多个事件处理程序时，执行顺序不同，addEventListener添加会按照添加顺序执行，而attachEvent添加多个事件处理程序时顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的，但是添加的多了就无规律了)。DOM2是通过addEventListener绑定的事件, 还有IE下的DOM2事件通过attachEvent绑定;

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

IE浏览器
IE只支持事件冒泡，不支持事件捕获，它也不支持addEventListener函数，不会用第三个参数来表示是冒泡还是捕获，它提供了另一个函数attachEvent。
ele.attachEvent("onclick", doSomething2);
附：事件冒泡（的过程）：事件从发生的目标（event.srcElement||event.target）开始，沿着文档逐层向上冒泡，到document为止。

（1）冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
IE 5.5: div -> body -> document
IE 6.0: div -> body -> html -> document
Mozilla 1.0: div -> body -> html -> document -> window
（2）捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。
（3）DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。
DOM事件模型最独特的性质是，文本节点也触发事件(在IE中不会)。

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

事件的传播是可以阻止的：
• 在W3c中，使用stopPropagation（）方法
• 在IE下设置cancelBubble = true；
在捕获的过程中stopPropagation（）；后，后面的冒泡过程也不会发生了~
3.阻止事件的默认行为，例如click后的跳转
在W3c中，使用preventDefault（）方法；
在IE下设置window.event.returnValue = false;

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

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<script>
    var tt = document.querySelector('.ct')

    tt.addEventListener('click',function(e){
        
        console.log(e.target.innerText)
    })


</script>

题目6： 补全代码，要求：

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

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>任务班</li>
</ul>
<input class="ipt-add-content" placeholder="添加内容" value=""/>



<button id="btn-add-start">开头添加</button>



<button id="btn-add-end">结尾添加</button>
<script>
    var jw= document.querySelector('#btn-add-start')
    var qp= document.querySelector('#btn-add-end')
    var ct= document.querySelector('.ct')
    var nn= document.querySelector('.ipt-add-content')
    
    qp.addEventListener('click',function(){
        if(nn.value !== '' ){
            var li = document.createElement('li')
            li.innerText= nn.value;  
            ct.appendChild(li); 
            
        }
                    
            })
    jw.addEventListener('click',function(){
        if(nn.value !== ''){
            var li = document.createElement('li')
            li.innerText=nn.value;  
            ct.insertBefore(li,ct.firstChild);  
        }
                
            })
    ct.addEventListener('click',function(e){
    console.log(e.target.innerText)
    })



</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.querySelector('.ct'),
    childs = ct.querySelectorAll('li'),
    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 + ')'
    });
}
*/
//方法二：

ct.addEventListener('mouseover',function(e){
    var img = e.target.getAttribute('data-img');
    preview.innerHTML = '<img src = "' + img + '">';
});

</script>