事件 - 简书

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

DOM0级事件处理程序是将一个函数赋值给一个事件处理程序属性，通过将事件处理程序属性值设置为null来删除
DOM0级方法指定的事件处理程序，优势在于简单，二是具有跨浏览器的优势；劣势在于一个事件添加多个事件处理程序，后面的程序或覆盖前面的程序

//添加事件处理程序
var btn = document.querySelector('#btn')
btn.onclick = function(){
  alert(this.id)
}
//删除事件处理程序
btn.onclick = null

DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点中都包括这两个方法，并且它们都接受3个参数;要处理的事件、事件处理程序的函数和一个布尔值。布尔值true，表示在捕获阶段调用事件处理程序；false表示冒泡阶段调用事件处理程序。默认是false

var btn = document.querySelector('#btn')
var handler  = function(){
  alert(this.id)
}
//指定事件处理程序
btn.addEventListener("click",hander,false)
//删除事件处理程序
btn.removeEventListener("click",hander,false)

通过removeEventListenrer()函数来移除事件处理程序时，移除的参数必须与添加处理程序时使用的参数相同，这也意味着通过addEventListener()添加的匿名函数将无法移除

var btn = document.querySelector('#btn')
//指定事件处理程序
btn.addEventListener("click",function(){
  alert(this.id)
},false)
//删除事件处理程序，不会生效
btn.removeEventListener("click",function(){
  alert(this.id)
},false)

区别：使用DOM2级方法添加事件处理程序主要喊出可以添加多个事件处理程序，DOM0级方法添加多个事件处理程序时，后面的程序会覆盖前面的程序

题目2： attachEvent与addEventListener的区别？

使用attachEvent()为按钮添加一个事件处理程序，可以使用以下代码

var btn  = document.querySelector('#btn')
btn.attachEvent("onclick",function(){
    console.log(this);
})

使用addEventListener()为按钮添加一个事件处理程序，可以使用以下代码

var btn  = document.querySelector('#btn')
btn.addEventListener("click",function(){
    console.log(this);
},false)

1.参数个数不同，这个最直观，addEventListener有三个参数，attachEvent只有两个，attachEvent添加事件处理程序只能在冒泡阶段，addEventListener第三个参数可以决定添加的事件处理程序是在捕获阶段还是冒泡阶段处理（我们一般为了浏览器兼容性都设置为冒泡阶段）
2.第一个参数意义不同addEventListener第一个参数是事件类型（比如click，load），而attachEvent第一个参数指明的是事件处理函数名称（onclick，onload）
3.事件处理程序的作用域不同addEventListener的作用域是元素本身，this是指的触发元素，而attachEvent事件处理程序会在全局变量内运行，this是window，所以刚才例子才会返回undefined，而不是元素id

为一个事件添加多个事件处理程序时，执行顺序不同addEventListener()添加会按照添加顺序执行，而attachEvent()添加多个事件处理程序时顺序无规律（添加的方法少的时候大多是按照添加顺序的反顺序执行的，但是添加的多了就无规律了），所以添加多个的时候，不依赖执行顺序的还好，若是依赖于函数执行顺序，最好自己处理，不要指望浏览器

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

IE的事件流叫事件冒泡，即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）
所有现代浏览器都支持事件冒泡，但IE5.5及更早版本中的事件冒泡会跳过<html>元素，从<body>直接到document，IE9、Firefox、Chrome、Safari则将事件一直冒泡到window对象。

事件冒泡

DOM2级事件传播机制规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。以前面简单的HTML页面为例，单击<div>元素会按照下图所示顺序触发事件。

DOM2级事件

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

阻止事件冒泡 event.stopPropagation()
方法阻止事件在DOM中继续传播防止再触发定义在别的节点上的监听函数，但是不包括在当前节点上新定义的事件监听函数
阻止默认事件event.preventDefault()
方法不会阻止事件的进一步传播,只要在事件的传播过程中（捕获阶段、目标阶段、冒泡阶段皆可），使用了preventDefault方法，该事件的默认方法就不会执行

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

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<script>
//todo ...
var ct = document.querySelector('.ct')
var handler = function(e){
    var target = e.target
    if(target.tagName.toLowerCase() === 'li'){
        console.log(target.innerText)   
    }
}
ct.addEventListener('click',handler,false);
</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 startBtn = document.querySelector('#btn-add-start')
var endBtn = document.querySelector('#btn-add-end')
var ipt = document.querySelector('.ipt-add-content')
var ct = document.querySelector('.ct')
ct.addEventListener('click',function(e){
    var target = e.target 
    if(target.tagName.toLowerCase() === 'li'){
        console.log(target.innerText)
    }
},false)
startBtn.addEventListener('click',function(){
    var newLi = document.createElement('li')
    newLi.innerText = ipt.value
    if(newLi.innerText !== ''){
        ct.insertBefore(newLi,ct.firstChild)
    }else{
        alert('内容不能为空')
    }
},false)
endBtn.addEventListener('click',function(){
    var newLi = document.createElement('li')
    newLi.innerText = ipt.value
    if(newLi.innerText !== ''){
        ct.appendChild(newLi)
    }else{
        alert('内容不能为空')
    }
},false)
</script>

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

<ul class="ct">
    <li data-img="http://book.jirengu.com/jirengu-inc/jrg-tehui/homework/%E8%8B%A5%E6%84%9A/16/img/about/1.jpg">鼠标放置查看图片1</li>
    <li data-img="http://book.jirengu.com/jirengu-inc/jrg-tehui/homework/%E8%8B%A5%E6%84%9A/16/img/about/2.jpg">鼠标放置查看图片2</li>
    <li data-img="http://book.jirengu.com/jirengu-inc/jrg-tehui/homework/%E8%8B%A5%E6%84%9A/16/img/about/3.jpg">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
//你的代码
var ct = document.querySelector('.ct')
var imgPre = document.querySelector('.img-preview')
ct.addEventListener('mouseover',function(e){
    var target = e.target
    if(target.tagName.toLowerCase() === 'li'){
        var img = document.createElement('img')
        var imgSrc = target.getAttribute('data-img')
        img.setAttribute('src',imgSrc)
        imgPre.appendChild(img)
    }
},false)
ct.addEventListener('mouseout',function(e){
    imgPre.innerHTML = ''
},false)
</script>

事件

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

题目2： attachEvent与addEventListener的区别？

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

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

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

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

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

推荐阅读更多精彩内容

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

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

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

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