javascript addEventListener() 方法的使用

最新推荐文章于 2024-07-01 16:22:16 发布
原创 最新推荐文章于 2024-07-01 16:22:16 发布 · 4.9k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #html #js

本文介绍了如何在HTML中使用JavaScript的addEventListener方法来为按钮添加点击事件，详细讲解了从创建HTML文件到实现按钮响应的具体步骤。

版权声明：本文为博主博客园原创文章，转载请著名作者和出处。
原文地址：https://www.cnblogs.com/zenglintao/p/12823843.html

首先我们先新建个html文件，打好基本框架

 

 

 然后我们再新建个button，id为btn

 

现在点击不会有任何效果

 

 

创建一个js，函数名为Hello

 

 

 然后再点击按钮，没有任何提示

现在添加一个事件监听，当点击id为btn的按钮时，就会调用函数Hello

 

 

 让我们来看看效果

以上就是addEventListener的用法，它支持所有的html dom事件

zenglintao
关注
精选资源
JavaScript使用addEventListener添加事件监听用法实例
01-19
本文实例讲述了JavaScript使用addEventListener添加事件监听用法。分享给大家供大家参考。具体实现方法如下： <!DOCTYPE html> <html lang=en> <head> <title>This text is the title of the...
动态的绑定事件addEventListener方法的使用
12-10
代码如下: [removed] function test(){ window.alert(“你投了一次票”); //解除绑定事件 document.getElementById(“but1”).removeEventListener(...script language = “javascript” type = “text/ja
js addeventlistener
Charles1938229的博客
02-17 5984
JavaScript是一种广泛应用于网页开发的脚本语言，具有灵活的语法和强大的功能。在网页中，我们经常需要处理用户的交互操作，例如点击按钮、输入文本等，而addEventListener方法就是用来处理这些事件的。
JavaScript 事件监听器 addEventListener() 方法 和一些基本的事件
最新发布
好好吃饭，好好睡觉
07-01 6192
addEventListener() 方法用于向指定元素添加事件句柄。当计算机属性检测到事件发生的时候，运行一些代码，通常是我们所制定的函数。
JS addEventListener()方法
weixin_72271537的博客
10-24 671
2. 可以添加不同的事件类型 --例如：click(点击),mouseover（鼠标移入）,mouseout（鼠标移出）,resize（窗口重置）第三个参数useCapture：设置传递的类型，默认值为false，即冒泡传递（可省略）；语法：addEventListener(event,function,useCapture);第一个参数event：指事件的类型（如’click’,‘mousedown’），this 的值会变成 window 对象的引用而不是触发事件的元素。3. 使用匿名函数传递参数。
JavaScript-addEventListener()
tian_tian_gong的博客
02-18 490
addEventListener() 方法用于向指定元素添加事件句柄。 正常我们为一个标签元素绑定事件可以这么写: xxx.onclick=function(){ } 但当我们有同一个事件想绑定多个函数的时候， 上面的事件函数就会只执行最后的一个，前面的被覆盖掉。 此时可以选择用addEventListener这种方法来为标签绑定事件。 注意: addEventListener() ie8及...
【JS】addEventListener方法介绍
红尘道，红尘练心
09-07 6512
第三个参数useCapture：设置传递的类型，默认值为false，即冒泡传递（可省略）；使用 attachEvent 方法有个缺点，this 的值会变成 window 对象的引用而不是触发事件的元素。addEventListener()，事件监听，用于向指定的元素添加事件监听。在捕获中，外部元素的事件会被先触发，然后才会触发内部元素的事件。在冒泡中，内部元素的事件会先被触发，然后再触发外部元素；(它允许给一个事件注册多个监听器，且不会覆盖已存在的事件)事件的传递有两种方式：冒泡与捕获。
javascript attachEvent和addEventListener使用方法
10-30
本知识点将介绍 JavaScript 中两种常用的方法：attachEvent 和 addEventListener，以及它们在不同浏览器中的应用和区别。 首先，attachEvent 方法是早期 Internet Explorer 浏览器引入的事件监听方法，它的语法是：...
JS中addEventListener的使用
u013773608的博客
11-20 1073
触发事件,在子元素事件触发的时候,父元素的事件会在子元素事件触发完成之后触发,这便是事件冒泡
javascript的addEventListener() 方法
qq_32666545的博客
08-19 4428
...
addEventListener() 方法
qq_39355295的博客
10-11 355
1、定义 addEventListener() 方法用于向指定元素添加事件句柄。 提示： 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。 2、语法 element.addEventListener(event, function, useCapture) 3、参数值 (1) event 必须。字符串，指定事件名。 注意: ...
javascript学习-addEventListener
qq_43368682的博客
07-23 237
DOM2中的addEventListener 当一个动作需要做多件事的时候使用。 element.addEventListener("事件名",执行函数,true/false) 事件名没有on 第三个参数:true表示捕获阶段触发，false表示冒泡阶段触发（默认)。 例子： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> &
javascript addEventListener讲解
iteye_19838的博客
06-20 355
对同一个事件添加多个处理程序有如下两种方法： [code="js"] 1、window.onload = function() {f(); f1(); f2(); ...} 2、if(window.addEventListener){ //firefox window.addEventListener('load',f,false); windo...
【JavaScript 】- addEventListener()事件监听
m0_55960697的博客
03-31 1830
addEventListener() 方法用于向指定元素添加事件句柄(id)。 提示： 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。 语法：element.addEventListener(event, function, useCapture) 1.参数： *event* //必须。字符串，指定事件名。 `注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "oncli...
关于JS中addEventListener的使用
小火车况且况且况且的博客
03-10 4193
关于JS中addEventListener的使用 MDN中addEventListener()说明 主要用来实现事件的绑定 存在三个参数 target.addEventListener(type, listener, useCapture); type: 表示监听事件类型的字符串。类似于click,mouseover... listener: 用来监听处理的函数方法 useCapture: 默认是false,事件冒泡,可以设置为true为事件捕获 这里需要了解一下基本的事件流(事件捕获->事件目标
关于addEventListener的使用和注意项
yiguoxiaohai的博客
06-19 6441
关于addEventListener的使用和注意项
web前端学习（四十一）——JavaScript DOM EventListener（添加与移除监听事件）
热门推荐
贝尔摩德苦艾酒
02-22 1万+
web前端学习（四十一）——JavaScript DOM EventListener（添加与移除监听事件）
javascript addEventListener－事件流
天将降大任于是人
01-08 8612
<br />当一个事件发生时，分为三个阶段：捕获阶段 从根节点开始顺序而下，检测每个节点是否注册了事件处理程序。如果注册了事件处理程序，并且 useCapture 为 true，则调用该事件处理程序。（IE 中无此阶段。）目标阶段 触发在目标对象本身注册的事件处理程序，也称正常事件派发阶段 。冒泡阶段 从目标节点到根节点，检测每个节点是否注册了事件处理程序，如果注册了事件处理程序，并且 useCapture 为 false，则调用该事件处理程序。<br />js的事件流机制类似与flex的事件
深入理解JavaScript：掌握addEventListener方法
- JavaScript 中处理事件的标准方法之一是使用事件监听器（event listeners）。 - `addEventListener` 方法是一个常用的方法，用于在给定元素上添加一个事件监听器，该监听器会在事件触发时执行。 2. ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值