addEventListener详解

最新推荐文章于 2024-04-18 17:52:13 发布
最新推荐文章于 2024-04-18 17:52:13 发布
阅读量4k 收藏 2
点赞数 1
分类专栏： web前端-js篇 文章标签： 脚本 javascript web开发 对象 callback
addEventListener是一个侦听事件并处理相应的函数。

原型：
    public override function addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void

参数：

1、type:String
    事件的类型。
2、listener:Function
    侦听到事件后处理事件的函数。此函数必须接受Event对象作为其唯一的参数，并且不能返回任何结果，如一下示例所示：
访问修饰符function 函数名(evt:Event):void
3、useCapture:Boolean(default =false)
     这里涉及到“事件流”的概念。侦听器在侦听时有三个阶段：捕获阶段、目标阶段和冒泡阶段。顺序为：捕获阶段（根节点到子节点检查是否调用了监听函数），
目标阶段（目标本身），冒泡阶段（目标本身到根节点）。此处的参数确定侦听器是运行于捕获阶段、目标阶段还是冒泡阶段。如果将useCapture设置为true，则侦听器只在捕获阶段处理事件，而不在目标或冒泡阶段处理事件。如果useCapture为false，则侦听器只在目标或冒泡阶段处理事件。要在所有三个阶段都侦听事件，请调用两次addEventListener，一次将useCapture设置为true；第二次再将useCapture设置为false。
4、priority:int(default = 0)
事件侦听器的优先级。优先级由一个带符号的32位整数指定。数字越大，优先级越高。优先级为n的所有侦听器会在优先级为n-1的侦听器之前得到处理。如果两个或更多个侦听器共享相同的优先级，则按照它们的添加顺序进行处理。默认优先级为0。
5、useWeakReference:Boolean(default = false)
确定对侦听器的引用是强引用还是弱引用。强引用（默认值）可防止您的侦听器被当作垃圾回收。弱引用则没有此作用。

注意：
     使用EventDispatcher对象注册事件侦听器对象，以使侦听器能够接收事件通知。可以为特定类型的事件、阶段和优先级在显示列表的所有节点上注册事件侦听器。
成功注册一个事件侦听器后，无法通过额外调用addEventListener()来更改其优先级。要更改侦听器的优先级，必须首先调用removeListener()。然后，可以使用新的优先级再次注册该侦听器。

示例：
function Go(){
//...
}
document.getElementById("testButton").addEventListener("click", Go, false);
或者listener直接就是函数
document.getElementById("testButton").addEventListener("click", function(){Go();}, false);
删除监听事件
document.getElementById("testButton").removeEventListener("click", Go);

问答解惑
很多时候我们不但需要动态添加事件，也需要将此事件的回调函数增加一些参数，来满足我们的需求，而自带的addEventListener方法默认只有一个参数event事件类型。
方案1：
<body>
    <div id="ttt">testtttttt</div>
<script type="text/javascript">
    function callback(){
        alert(111);
    }
    function _fn(calllback){
        return callback();
    }
    var ttt = document.getElementById("ttt");
    ttt.addEventListener("click", _fn, false);
</script>
</body>
方案2：
<body>
    <div id="ttt">testtttttt</div>
<script type="text/javascript">
    function callback(){
        alert(111);
    }
    function _fn(callback){
        callback();
    }
    var ttt = document.getElementById("ttt");
    ttt.addEventListener("click", function(){_fn(callback);}, false);
</script>
</body>
方案2与方案1区别：是在事件销毁时处理方式稍微不同。
zqjflash
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解addEventListener的三个参数之useCapture
09-03
本文主要给大家介绍的是addEventListener的三个参数之中的useCapture参数的使用及示例分享，有需要的小伙伴参考下
addEventListener的第三个参数
九天翔龙的技术博客
09-14 2372
大家都知道 addEventListener 可以给对象添加事件监听。百度，w3school 对它的解释，有三个参数，语法格式如下： el.addEventListener(type, listener[, useCapture]) el：事件对象。比如，某个标签，window，document 对象等等。 type：事件类型，click、mouseenter 等 listener：事件处...
VUE中窗口监听与销毁
m0_64407944的博客
02-21 274
【代码】VUE中窗口监听与销毁。
Javascript事件系统
oShiQiHao的博客
12-31 931
本文内容 事件基础 事件监听方式 事件默认行为 事件冒泡与事件捕获 事件绑定与事件委托 事件基础 注意：本文不会深入探究Javascript的事件循环。 提到事件，相信每位Javascript开发者都不会陌生，由于Javascript是先有实现，后有规范，因此，对于大部分人来说，事件模块可以说是比较模糊的，本文将从不同角度帮助你理清楚事件模块。 事件的本质可以说是一个回调函数，当...
addEventListener参数和冒泡和捕获详细使用与说明
dupha的博客
04-30 5920
addEventListener第三参数冒泡和捕获详细说明 1.addEventListener参数说明 target.addEventListener(type, listener, useCapture); 参数一: type 表示监听事件类型的字符串。 参数二: listener 当所监听的事件类型触发时，会接收到一个事件通知（实现了 Event 接口的对象）对象。listener 必须是一个实现了 EventListener 接口的对象，或者是一个函数。有关回调本身的详细信息，请参阅事件监听回调
有关addEventListener语法的一点解释
q1003675852的博客
12-06 877
为了提升此种场景下的滚动体验，需要有一个参数来告诉浏览器，事件监听器中不会有 event.preventDefault() ，这样浏览器可以不用等监听器执行完毕，可以自由滚动，因此有了 passive 属性。而监听器的执行是要耗时的，如果在 event.preventDefault() 之前耗时了 2秒 ，这样就会导致页面卡顿。设置一个 passive 的 get 访问器，添加一个 test 的事件，当浏览器支持的时候会调用 get 访问器，在 get 访问器中设置 supportsPassive。
HTML DOM 事件
akuibpt23191的博客
07-13 530
1. HTML DOM 事件 参考文档：https://www.runoob.com/jsref/dom-obj-event.html HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。 事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。 提示： 在 W3C 2 级 DOM 事件中规范了事件模型。...
【JS】addEventListener方法介绍
红尘道，红尘练心
09-07 5562
第三个参数useCapture：设置传递的类型，默认值为false，即冒泡传递（可省略）；使用 attachEvent 方法有个缺点，this 的值会变成 window 对象的引用而不是触发事件的元素。addEventListener()，事件监听，用于向指定的元素添加事件监听。在捕获中，外部元素的事件会被先触发，然后才会触发内部元素的事件。在冒泡中，内部元素的事件会先被触发，然后再触发外部元素；(它允许给一个事件注册多个监听器，且不会覆盖已存在的事件)事件的传递有两种方式：冒泡与捕获。
js addEventListener绑定事件方法(详细介绍）
m0_47659279的博客
04-04 9142
事件冒泡 如果两个元素是嵌套的，那么当子元素事件触发后，父元素的对应事件会随后触发，这种事件自下而上的触发就是事件冒泡，类似水中的气泡往上冒 例如下面代码，点击son元素后先触发son的点击事件，然后触发parent的点击事件 <div id="parent" onclick="alert('parent')"> parent <div id="son" onclick="alert('son')">son</div> </div> 事
addEventListener和addListener的区别
热门推荐
smile的博客
02-06 5万+
addListener是用于鼠标，键盘等特殊元素的一些监听 addEventListener是对组件监听的 (要注意的是div必须放到js前面才行) 一般情况下，如果给一个dom对象绑定同一个事件，只有最后一个会生效，比如： 复制代码 代码如下: document.getElementById("btn").onclick = method1; document.ge
深入理解 addEventListener
Kate_sicheng的博客
07-10 6489
参数一：事件类型，比如 click、mouseenter、drag等。参数二：事件被触发时的回调函数。options对象：useCapture: 默认值为false，事件将在冒泡阶段触发。 如果为true，事件将在捕获阶段触发。once: 表示 listener 在添加之后是否最多只调用一次。如果是 true， listener 会在其被调用之后自动移除。passive: 设置为 true 时，表示 listener 永远不会调用 preventDefault......
JS中onclick与addEventListener的区别详解
01-08
一、onclick： 1.onclick添加事件：  语法： element.onclick = function (){};  实例如下： 点我 var box1 = document.getElementById(box1); box1.onclick = function(){ ... 以上结果显示，点
详解Canvas事件绑定
12-13
众所周知canvas是位图，在位图里我们可以在里面画各种东西，可以是图片，可以是线条等等。...而js只能监听到canvas的事件，很明显这个图片是不存在与dom里面的图片只是画在了canvas里而已。下面我就来简单的实现一个...
Vue自定义事件(详解)
12-10
前面的话 父组件使用props传递数据给子组件，子组件怎么...尽管它们的运行类似，但是 $on 和 $emit 不是addEventListener 和 dispatchEvent 的别名 另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的
使用 Fetch API 执行 GraphQL 查询和变体
ikxin的博客
04-15 1106
GraphQL 是从远程服务器查询数据的强大工具，也是我构建 API 的首选方式。对一些人来说，学习它可能有一定难度，因为教程通常使用 Apollo 或 Relay 等工具进行编写。这些工具很不错，但通常更适用于复杂项目。在某些情况下，最好选择更轻量级的方法，并且不要通过添加额外的库增加包大小。在这种情况下，你可以直接使用浏览器中提供的工具，在本快速教程中，我们将使用在你的浏览器中通常可用的fetch。让我们首先简单地回顾一下fetch。
PLSQL的下载与安装
最新发布
code袁的博客
04-18 295
🦁作者简介：一名喜欢分享和记录学习的在校大学生💥个人主页code袁💥个人QQ🐯个人wechat：code8896凭借其语法突出显示、SQL和PL/SQL帮助、对象描述、代码助手、编译器提示、重构、PL/SQL美化器、代码内容、代码层次结构、代码折叠、超链接导航、宏库和许多其他复杂功能，Unicode兼容编辑器甚至会吸引最苛刻的用户。手动码字，如有错误，欢迎在评论区指正💬~你的支持就是我更新的最大动力💪~
js的filter函数
xiaohua0708day的博客
04-14 285
这个函数接收数组中的每个元素作为参数，并检查该元素是否是偶数。如果是偶数，函数返回。是一个数组方法，它创建一个新数组，其包含通过提供的函数实现的测试的所有元素。函数遍历数组中的每个元素，并只将那些使测试函数返回。在这个箭头函数版本中，我们直接返回了表达式。在上面的代码中，我们传递了一个匿名函数给。方法就会将该元素包含在新数组中。，则该元素会被包含在新数组中。在JavaScript中，的元素包含在新数组中。
TS基础2-常用类型
qq_40147756的博客
04-12 536
ts 中常用类型和举例说明。
js中的类
weixin_45705239的博客
04-16 172
ES6引入了 JavaScript 类。JavaScript 类是 JavaScript 对象的模板，因此js里的类不是对象。
.addEventListener()参数详解
07-13
`.addEventListener()` 是一个 JavaScript 方法，用于将事件处理程序附加到指定元素上。 它有两个参数： 1. 事件类型：表示要监听的事件的类型，比如 "click"、"keydown" 等等。 2. 事件处理函数：一个回调函数，当事件被触发时将被调用。 示例用法： ```javascript const button = document.querySelector('button'); function handleClick() { console.log('Button clicked!'); } button.addEventListener('click', handleClick); ``` 在上面的示例中，我们选中一个按钮元素，并将 `handleClick` 函数附加到 `click` 事件上。当按钮被点击时，控制台会输出 "Button clicked!"。 使用 `addEventListener()` 的好处是，可以为同一个元素添加多个事件处理程序，而不会覆盖之前已添加的处理程序。此外，它还允许对事件进行更精细的控制，例如使用 `event.stopPropagation()` 阻止事件冒泡，或者使用 `event.preventDefault()` 阻止默认行为。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值