js addEventListener removeEventListener

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js addEventListener removeEventListener相关的知识,希望对你有一定的参考价值。

addEventListener,removeEventListener

    • addEventListener()接受三个参数。
      第一个是事件类型,如click,keypress,主意没有on,并且全是小写。
      第二个是处理函数,有一个event参数,event包括type,target等等属性。
      第三个是bool值,不写是false,false为冒泡事件处理函数,true为捕获事件处理函数。
    • removeEventListener()接受三个参数。
      第一个是事件类型,同上。
      第二个是处理函数,必须是注册时同一个函数,传匿名函数没用。如addEventListener的是fun1,removeEventListener也要是fun1
      第三个同上
          var father = document.getElementById("father");
          var fatherHandle = function(event) {
              console.log(‘--------- father -----------‘)
          }
          father.addEventListener("click", fatherHandle, false);
          father.removeEventListener("click", fatherHandle, false); //有效
          father.removeEventListener("click", function(){console.log(‘-- no --‘)}, false); //无效
    • 能通过多次调用addEventListener为同一个对象注册同一事件类型的多个处理函数,并且按照注册的顺序调用。
      但是使用相同参数多次注册无效,只会注册一次。
    • 在事件处理函数内,this指向事件目标的节点对象
    • 处理函数return false就是阻止默认操作,
      在addEventListener中事件对象的preventDefault()取消默认操作
    • 事件传播三个阶段:
      事件的捕获:由window对象一直到触发的内部对象
      事件处理函数:第三个参数为true为捕获函数,false为冒泡处理函数
      事件的冒泡:由最里面的对象向外扩散一直到根节点。
      调用事件对象的stopPropagation()方法阻止事件冒泡。如果在同一对象上注册了其他函数,会继续调用,但其他对象上就不会再执行。
      stopImmediatePropagation()阻止其他对象的传播也阻止了同一个对象的其他函数执行。

 

    var father = document.getElementById("father");
    var child = document.getElementById("child");
    var fatherHandle = function(event) {
        console.log(‘--------- father -----------‘)
    }
    var childHandle = function(event) {
        console.log(‘--------- child -----------‘)
    }

    father.addEventListener("click", fatherHandle, true);
    child.addEventListener("click", childHandle, true);
    // father - child
    father.addEventListener("click", fatherHandle, false);
    child.addEventListener("click", childHandle, false);
    // child - father

    var fatherHandle = function(event) {
        console.log(‘--------- father -----------‘)
    }
    var childHandle = function(event) {
        console.log(‘--------- child -----------‘)
        event.stopPropagation()
    }

    father.addEventListener("click", fatherHandle, false);
    child.addEventListener("click", childHandle, false);
    child.addEventListener("click", function(e){console.log(‘haha‘)}, false);
    // child haha

 

 

 

 

调用顺序

    • 设置对象属性或html属性得注册函数优先调用
    • addEventListener按注册的顺序调用
    • IE 的attachEvent()不按顺序调用,所以代码不应该以来调用顺序

 

<body>
    <h1 id="father">
        father
        <span id="child" onclick="fun()">child</span>
    </h1>
<script>
    var child = document.getElementById("child");
    var childHandle = function(event) {
        console.log(--------- child -----------)
    }
    child.addEventListener("click", childHandle, false);
    var fun = function(e) {
        console.log(--------- property -----------)
    }
    // property - child
</script>
</body>

 

 

 

 
















以上是关于js addEventListener removeEventListener的主要内容,如果未能解决你的问题,请参考以下文章

js addeventlistener 怎么传参数

JS----addEventListener()

js-addEventListener

Javascript里removeEventListener的必要

js 未捕获的 TypeError:无法读取 null 的属性“addEventListener”

js中 addEventListener 和removeEventListener