22. 事件

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

  • 添加方式
    • DOM0级事件是通过内联方式<div onclick="console.log()">...</div>或是在JS中写onclick=function( ){ }函数进行添加
    • DOM2级事件通过addEventListener来添加事件监听，接受三个参数：事件类型、事件处理方法、布尔值（true表示事件捕获阶段响应，false表示事件冒泡阶段响应，默认false）。例：btn.addEventListener('onclick',function( ){ },false)
  • 删除事件
    • 删除DOM0级方法制定的事件处理程序，将事件处理程序的值设置为null即可：btn.onclick=null
    • 删除DOM2级方法制定的事件处理程序：removeEventListener
      但是该方法不能移除addEventListener添加的匿名函数
btn.addEventListener('click',function(){console.log('hello')},false);
btn.removeEventListener('click',function(){console.log('hello')},false);//没有效果
//使用这样的写法才行
function handle(){
  console.log('hello')
}
var btn=document.querySelector('#btn');
btn.addEventListener('click',handle,false);
btn.removeEventListener('click',handle,false)
  • 多个事件处理程序：DOM0不支持多个事件处理程序，后面的会覆盖前面的，只能一个事件处理程序对应一个函数；DOM2级事件处理程序可以添加多个事件。
  • this：DOM0级事件中this对象指向全局对象；DOM2级事件this指向Element节点
  • DOM0级事件只能在冒泡阶段进行监听器触发；DOM2级事件可以通过参数选择在冒泡阶段或是捕获阶段进行监听触发
  • 兼容性：DOM0级事件支持所有浏览器；DOM2级事件要求浏览器为IE8以上

2. attachEvent与addEventListener的区别

  • 浏览器支持情况不同
    IE9以下的浏览器不支持addEventListener
  • 参数个数不同
    addEventListener有三个参数：type,handle,(true/false)
    attachEvent只要两个参数：type,handle
    因为attachEvent监听的事件只能发生在冒泡阶段，所以为了兼容性，addEventListener的第三个参数默认为false
  • 第一个参数不同
    addEventListener的第一个参数是方法，如click,scroll
    attachEvent第一个参数是事件名称，如onclick,onscroll
  • 事件处理程序的作用域不同
    DOM2级事件中，addEventListener作用域在所属的元素内进行，此时this指向这个元素
    使用attach方式时，事件处理程序在全局作用域进行，此时this指向window
  • 执行顺序不同
    addEventListener会按照添加顺序执行
    attachEvent添加多个时间处理程序时顺序无规律（在IE9以下，添加方法较少时，各方法按添加顺序的反顺序进行，添加方法多时则乱序进行）

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

  • IE事件冒泡
    传播顺序是由里到外，即时间开始时由最具体的元素，文档中嵌套最深的那个节点接收，然后逐级向上传播到window(document)


    事件冒泡.png
  • DOM2事件传播机制
    分为三个阶段：
    • 事件捕获阶段。即由最顶层元素（一般是从window元素开始，有的浏览器是从document开始）开始，逐次进入dom内部，最后到达目标元素，依次执行绑定在其上的事件
    • 处于目标阶段。检测机制到达目标元素，按事件注册顺序执行绑定在目标元素上的事件

    • 时间冒泡阶段。从目标元素出发，向外层元素冒泡，最后到达顶层（window或者document），依次执行绑定在其上的事件


      DOM2级事件.png

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

//阻止冒泡
function stopPropagation(e){
    if (e&&e.stopPropagation){
        e.stopPropagation();//W3C标准
    }else{
        window.event.cancelBubble=true;//IE浏览器
    }
}

//阻止默认事件
function preventDefault(e){
    if (e&&e.preventDefault){
        e.preventDefault()://W3C标准
    }else{
        window.event.returnValue=false;//IE浏览器
    }
}

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

3.png
var ct=document.querySelector('.ct');
ct.addEventListener('click',function(e){
    if(e.target.tagName.toLowerCase()==='li'){
        console.log(e.target.innerText)
    }
})

6. 补全代码

要求：

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

  • 当点击每一个元素li时控制台展示该元素的文本内容。


    4.png
<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>
    function $(node) {
        return document.querySelector(node);
    }
    var ct = $('.ct');
    var ipt = $('.ipt-add-content');
    var btnstart = $('#btn-add-start');
    var btnend = $('#btn-add-end');
    ct.addEventListener('click', function (e) {
        if (e.target.tagName.toLowerCase() === 'li') {
            console.log(e.target.innerText);
        }
    });
    btnstart.addEventListener('click', function () {
        var newNode = document.createElement('li');
        if (ipt.value.length !== 0) {
            newNode.innerText = ipt.value;
            ct.insertBefore(newNode, ct.firstChild);
        }
    });
    btnend.addEventListener('click', function () {
        var newNode = document.createElement('li');
        if (ipt.value.length !== 0) {
            newNode.innerText = ipt.value;
            ct.appendChild(newNode);
        }
    });
</script> 
</script>

7. 补全代码

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

<ul class="ct">
    <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg">鼠标放置查看图片1</li>
    <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg">鼠标放置查看图片2</li>
    <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
    function $(node){
        return document.querySelector(node);
    }
    var ct=$('.ct');
    var preview=$('.img-preview');
    var newImg=document.createElement('img');
    ct.addEventListener('mouseover',function(e){
        if(e.target.tagName.toLowerCase()==='li'){
            newImg.src=e.target.getAttribute('data-img');
            preview.appendChild(newImg);
        }
    });
</script>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • javascript事件
    JavaScript 与 HTML 之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬...
    threetowns阅读 353评论 0赞 0
  • JS中DOM0,DOM2,DOM3级事件模型解析
    声明：本文来源于http://www.webzsky.com/?p=731我只是在这里作为自己的学习笔记整理一下（...
    angryyan阅读 7,134评论 1赞 6
  • Dom、事件
    一、问答 1. dom对象的innerText和innerHTML有什么区别？ innerHTML： 也就是从对象...
    饥人谷_罗伟恩阅读 648评论 0赞 2
  • 事件相关
    如何批量操作 css 如何获取 DOM 计算后的样式 使用getComputedStyle获取元素计算后的样式 实...
    _Dot912阅读 594评论 1赞 3
  • JS-事件
    1：DOM0事件和DOM2级在事件监听使用方式上有什么区别？ 浏览器端的JavaScript采用的是事件驱动的异步...
    饥人谷_bigJiao阅读 290评论 0赞 0