21.事件

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

• DOM 0级

//举例
var btn = document.getElementById('id');
btn.onclick = function(){};

• 相当于元素的的属性，所以只能绑定一次，后面会覆盖前面；

• 删除事件处理程序将值设为null即可；

• 在事件冒泡阶段处理；

• DOM 2级

//举例
var btn = document.getElementById('id');
btn.addEventListener('click',functionName,boolean);

• 可以绑定多个事件处理程序；
• 通过removeEventListener()来移除事件处理程序，add和remove的函数需要一致，不能移除匿名函数；
• 第三个布尔值为true在捕获阶段处理，为false在冒泡阶段处理，默认false。

2. attachEvent与addEventListener的区别？

• attachEvent是早期IE中添加事件处理程序的方法

//举例
var btn = document.getElementById('id');
btn.attachEvent('onclick',listener);

• 事件处理程序在全局作用域下运行，this指代window；

• 同DOM0级一样只在冒泡阶段处理；

• addEventListener

//举例
var btn = document.getElementById('id');
btn.addEventListener('click',listener,boolean);

• 元素作用域下运行，this指代绑定事件的元素；
• 布尔值true为捕获阶段，false为冒泡阶段。

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

• IE事件冒泡
  首先由具体元素接收事件，然后一级一级向上直至根节点。

  
  
  IE事件冒泡

• DOM事件流
  分为事件捕获、处于目标阶段、冒泡阶段；即先有根节点接收事件而后是具体元素，再冒泡到根节点；方便截取事件。

  
  
  DOM事件流

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

• 取消事件进一步捕获或冒泡
  stopPropagation()

• 取消事件默认行为
  preventDefault()

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

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<script>
    var ul = document.querySelector('ul');
    ul.addEventListener('click',function(e){
        if(e.target.nodeName.toLowerCase() === 'li'){
            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="添加内容"/>
<button id="btn-add-start">开头添加</button>
<button id="btn-add-end">结尾添加</button>
<script>
    var ul = $('.ct')
    var addContent = $('.ipt-add-content')
    var addStart = $('#btn-add-start')
    var addEnd = $('#btn-add-end') 
    addStart.addEventListener('click',function(){
        if(addContent.value !== ''){
            var li = document.createElement('li')
            li.innerText = addContent.value
            ul.insertBefore(li,ul.firstChild)
        }
    })
    addEnd.addEventListener('click',function(){
        if(addContent.value !== ''){
            var li = document.createElement('li')
            li.innerText = addContent.value
            ul.appendChild(li)
        }
    })
    ul.addEventListener('click',function(e){
        if(e.target.nodeName.toLowerCase() === 'li'){
            console.log(e.target.innerText)
        }
    })
    function $(id){
        return document.querySelector(id)
    }
</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 = $('.ct')
    var imgPreview = $('.img-preview')
    ct.addEventListener('mouseover',function(e){
        imgPreview.innerHTML = ''
        var picBox = document.createElement('img')
        var source = e.target.getAttribute('data-img')
        picBox.setAttribute('src',source)
        imgPreview.appendChild(picBox)
    })
    function $(id){
        return document.querySelector(id)
    }
</script>