美文网首页
addEventListener方法详解

addEventListener方法详解

作者: halapro_liu | 来源:发表于2020-03-29 20:19 被阅读0次

前言

addEventListener方法作为注册事件的方法,而被我们广泛使用。下面我们来一起学习下这个方法,以及其中隐藏的知识点。

语法

target.addEventListener(type, listener [, options]);
target.addEventListener(type, listener [, useCapture]);
target.addEventListener(type, listener [, useCapture, wantsUntrusted  ]); // Gecko/Mozilla only

根据mdn中的api,我们可以确定,addEventListener接受三个参数。

  • type(即事件类型,常见的如click, DomContentLoaded, error等)

  • listener
    listener既可以是function,也可以是一个带有handleEvent方法的object对象

  • options

    • capture(指定事件行为是否为捕获事件,默认为false,即冒泡)
    • once(指定事件是否只执行一次,默认为false,当为true时,只执行一次后,事件会自动被移除)
    • passive
      默认为false,当指定为true时,如果事件本身执行了preventDefault方法,用户代理将不会做任何事情,取而代之的是生成一个控制台warning。之后我们会具体介绍

常见的使用方式

<div class="btn"></div>
var btn = document.getElementById('btn')
btn.addEventListener('click', function () {
  console.log('button is click');
})

handler的this指向

element.addEventListener('click', function (e) {
  console.log(this.className)           // logs the className of my_element
  console.log(e.currentTarget === this) // logs `true`
})

提升滚动体验的参数passive

第三个参数的options.passive设置为true时,可以有效提升scroll体验,根据标准,passive的值默认为false,最新的chrome和firefox已经默认将passive设置为true,以提升scroll体验。由于IE9以下的浏览器不支持options,要使用passive需要一点hack的方式。

/* Feature detection */
let passiveIfSupported = false;

try {
  window.addEventListener("test", null, 
    Object.defineProperty(
      {}, 
      "passive", 
      {
        get: function() { passiveIfSupported = { passive: false }; }
      }
    )
  );
} catch(err) {}

window.addEventListener('scroll', function(event) {
  /* do something */
  // can't use event.preventDefault();
}, passiveIfSupported );

相关文章

网友评论

      本文标题:addEventListener方法详解

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