事件

作者: jrg_tzc | 来源:发表于2018-04-26 17:04 被阅读0次

    事件代理

    由于会在冒泡阶段向上传播到父节点,所以可把监听函数定义在节点的父节点上,由父节点的监听函数处理子节点的事件。称为事件代理。

    为什么要代理

    有时候直接选择事件没法选到全部需要的事件,
    如这个场景:http://js.jirengu.com/sicocisotu/1/edit?html,js,output
    可使用forEach方法,配上querySelectorAll()

    $$('.box').forEach(function(node) {
      node.onclick = function(){
        console.log(this.innerText)
      }
    })
    

    用forEach遍历了全部事件也无法选到后来JS再冒出来的事件。
    这时候最好使用事件代理,用其父容器可以选中全部容器。

    因为事件发生会在不同的DOM节点中传播,主要分三个阶段

    • 从window对象传导到目标节点,称为捕获阶段。
    • 于目标节点上触发,称为目标阶段。
    • 从目标节点传导会window对象,称为冒泡阶段。

    事件传播的最上层对象是window,接着依次为document,html,body,然后是其他元素。所以在捕获阶段,传播顺序依次为window,document,html,body,其他元素。冒泡阶段依次为其他元素,body,html,document,window。
    所以事件总是会冒泡到其父容器上。
    选择其父容器,target表示选中元素。

    $('.container').onclick = function(e){
      console.log(e.target.innerText)
    

    但在这里推荐使用addEventListener

    $('.container').addEventListener('click', function(e){
      console.log(e.target.innerText)
    })
    

    addEventListener与onclick区别

    onlick与addEventListener的区别在于 JS指定与DOM2级的事件处理程序的区别。
    JS指定事件处理程序:通过将函数赋值事件处理程序。也就是将元素的属性值设置为一个函数,事件处理将被认为是元素的方法,在当前元素的作用域下执行。一个事件处程序理对应一个处理函数。移除时将元素属性值设置为null即可。

    $('.ct').onclick = function(e){
        console.log(e.target.innerText)
    }
    

    DOM2级事件处理:通过addEventListener()方法添加,removeEventListener()方法删除。接受三个参数分别为事件类型,事件处理方法,布尔参数(true则在捕获阶段处理,false则在冒泡阶段处理),同样在元素作用域下执行。

    $('.ct').addEventListener('click', function(e){
      console.log(e.target.innerText)
    }, false)
    

    效果一样,区别在于使用addEventListener可同时为一个事件添加多个处理程序,使用onlick时一个事件只能对应一个处理程序。

    相关文章

      网友评论

          本文标题:事件

          本文链接:https://www.haomeiwen.com/subject/zuyflftx.html