事件

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

Dom0添加同一个事件只能添加一次，多次添加时后面的会覆盖前面的，事件在冒泡阶段执行；
Dom2级可以给同一个事件添加多个事件处理程序，按顺序执行，事件接收参数控制事件是在冒泡顺序还是捕获顺序，true是捕获阶段，false是在冒泡阶段。

2： attachEvent与addEventListener的区别？

1.attachEvent接收两个参数，一个参数是事件处理函数，在参数前加'on',事件处理程序在冒泡阶段；addEventlistener有三个参数，第一个参数是事件类型，第三个参数决定在哪个阶段，true在捕获阶段，false在冒泡阶段。

2.事件处理程序作用域不同，attachEvent事件处理函数的作用域是全局作用域，this等于window;addEventlistener事件处理函数作用域是元素作用域

3.为一个事件添加多个事件处理程序时，执行顺序不同，attachEvent执行顺序无规律；addEventlistener是按顺序执行

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

IE事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素
<img src="https://img.haomeiwen.com/i5615113/26040b08477ac77d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" >

DOM2事件传播机制
DOM2事件传播包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，当点击时，先从最外层向内层传递，到了目标后再从内层向外层传递，整个流程如下图

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

e.stopPropagation()可以阻止冒泡

<div class="ct">
 <div class="box"></div>
</div>

   var ct = document.querySelector('.ct')
   var box = document.querySelector('.box')
   ct.addEventListener('click',function() {
       console.log('ct')
   })
   box.addEventListener('click',function(e){
       console.log('box')
        e.stopPropagation()  //点击box时不会向上传递
   })

preventDefault()方法可以阻止默认行为，比如阻止链接跳转

document.getElementsByTagName('a').onclick = function (e) {
    e.preventDefault();
}

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

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

    var ctNodes = document.querySelector('.ct')
    ctNodes.addEventListener('click',function(e) {
        var target = e.target
        if (target.tagName.toLowerCase() === 'li') {
        console.log(target.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 btnStart = document.querySelector('#btn-add-start');
    var btnEnd = document.querySelector('#btn-add-end');
    var addInp = document.querySelector('.ipt-add-content');
    var ctNodes = document.querySelector('.ct')

    btnStart.addEventListener('click',function(){
        if (!addInp.value) {
                alert('请输入内容！')
        }else {
        var newLi = document.createElement('li')
        newLi.innerText = addInp.value
        console.log(newLi)
        ctNodes.insertBefore(newLi,ctNodes.firstChild)
        }   
    })

    btnEnd.addEventListener('click',function(){
        if (!addInp.value) {
                alert('请输入内容！')
        }else {
        var newLi = document.createElement('li')
        newLi.innerText = addInp.value
        ctNodes.appendChild(newLi)
        }   
    })

    ctNodes.addEventListener('click',function(e) {
        var target = e.target;
        console.log(target.innerText)
    })
</script>

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

<ul class="ct">
    <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/14.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/11.jpg">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
    var ctNodes = document.querySelector('.ct');
    var imgPreview = document.querySelector('.img-preview')
    ctNodes.addEventListener('mouseover',function(e){
        var target = e.target
        console.log(target)
        var dataImg = target.getAttribute('data-img')
        imgPreview.innerHTML = '![]( '+ dataImg +' )'
    })
</script>