事件 - 简书

DOM0 级事件处理程序和DOM2级在事件监听使用方式上有什么区别

DOM0 级事件处理程序
将一个函数赋值给一个事件处理程序属性，具有跨浏览器的优势，这种方式添加的时间处理程序在事件流的冒泡阶段被处理

var btn = document.getElementById("btn")
btn.onclick = function(){
    console.log('clicked');
}

删除事件处理程序将事件处理程序属性设置为NULL

btn.onclick = null;

DOM2级事件处理程序
用于指定和删除事件处理程序的两个方法分别是addEventListener()和removeEventListener(),它们都接受三个参数，分别是处理事件名、事件处理程序函数和布尔值，通过设定布尔值可以决定其调用事件处理程序的阶段，true值为捕获阶段，false为冒泡阶段。使用DOM2级事件处理程序好处是可以添加多个事件处理程序。

var btn = document.getElementById("btn")
btn.addEventListener('click',function(){
     console.log('clicked')
},ture);

需要注意的是如果在addEventListener()中添加的匿名函数，则不可以被removeEventListener()删除，所以需要如下

var btn = document.getElementById("btn")
var handle = function(){
     console.log('clicked')
}
btn.addEventListener('click',handle,ture);
btn.removeEventListenr('click',handle)

attachEvent与addEventListener的区别

参数个数不一致
attachEvent()相比较addEventListener()，没有第三个布尔值参数，因为其添加的事件处理程序只发生在事件流的冒泡阶段
第一个参数的不同
attachEvent()的第一个参数指事件处理函数名称（onclick,onload）;addEventListener()的第一个参数指事件类型（click,onload）
事件处理程序的作用域不相同
attachEvent()会在全局作用域中运行，也就是window；
addEventListener()在其所属元素的作用域内运行
-当为一个事件添加多个事件处理程序时，执行顺序不同
addEventListener()会按照添加顺序执行；attachEvent()
添加多个事件处理程序时会按添加顺序的反方向依次执行，但是添加大量事件处理程序时执行顺序是不规律的

解释IE事件冒泡和DOM2级事件传播机制

IE事件冒泡
事件开始时由最具体的元素接收，然后逐层向上传播到不具体的元素
DOM2级事件
整个事件流分为三个阶段，分别是捕获阶段、处于目标阶段和冒泡阶段，按捕获阶段、处于目标阶段、冒泡阶段依次执行

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

阻止事件冒泡
- DOM中使用stopPropagation()取消事件进一步捕获和冒泡
- IE中使用cancelBubble设置为true取消事件冒泡
阻止默认事件
- DOM中使用preventDefault()取消默认事件
- IE中使用returnValue设置为true取消默认事件

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

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<script>
var chooseCtn = document.querySelector('.ct')
chooseCtn.addEventListener('click',function(e){
    console.log(e.target.innerText)
})
</script>

补全代码，要求：

当点击按钮开头添加时在<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 ctn = document.querySelector('.ct')
var inputArea =document.querySelector('.ipt-add-content')
var startBtn = document.querySelector('#btn-add-start')
var endBtn = document.querySelector('#btn-add-end')
ctn.addEventListener('click',function(e){
    console.log(e.target.innerText)
})

endBtn.addEventListener('click',function(){
   if(/\S+/.test(inputArea.value)){
       var newLi = document.createElement('li')
       newLi.innerText = inputArea.value
       ctn.appendChild(newLi)
   }
})
startBtn.addEventListener('click',function(){
    if(/\S+/.test(inputArea.value)){
        var newLi = document.createElement('li')
        newLi.innerText = inputArea.value
        ctn.insertBefore(newLi,ctn.firstChild)
    }
})
</script>

补全代码，要求：当鼠标放置在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 ctn = document.querySelector('.ct1')
var child = document.querySelectorAll('ct1 li')
var showPic = document.querySelector('.img-preview')
ctn.addEventListener('mouseover',function(e){
    var img = e.target
    console.log(e.target)

    showPic.innerHTML = '<img src =" '+ img.getAttribute('data-img') + '"> '
})
</script>

事件