JS addEventListener()方法的使用介绍

最新推荐文章于 2024-07-01 16:22:16 发布
最新推荐文章于 2024-07-01 16:22:16 发布
阅读量4k 收藏 5
点赞数 1
分类专栏： 前端开发
原文链接：https://www.cnblogs.com/baiyangyuanzi/p/6627401.html
版权

   火狐和其他浏览器都支持W3C标准的addEventListener方法。addEventListener() 方法，事件监听。removeEventListener() 方法来移除事件的监听。如果要针对IE浏览器就要使用attachEvent(event,function)。如果你开发前端页面要兼容IE、Chrome、Firefox等浏览器，请参考:https://www.cnblogs.com/carriezhao/p/7270335.html。下面介绍addEventListener()的用法。

1、语法

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 "click" 或 "mousedown").

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

注意:不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。

2、向 Window 对象添加事件句柄

<!doctype html>
<html>
<head>
    <title>window.onload示例</title>
    <script type="text/javascript">
       window.addEventListener("load", test, false);

	   function test(){
            alert('页面加载完成');
       }
       alert('页面尚未加载完成,页面内容不显示');
    </script>
</head>
<body>
页面内容
</body>
</html>

3、传递参数

当传递参数值时，使用"匿名函数"调用带参数的函数：

var p1 = 5;
var p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
    myFunction(p1, p2);
});
function myFunction(a, b) {
    var result = a * b;
    document.getElementById("demo").innerHTML = result;
}

4、Window 事件属性

针对 window 对象触发的事件可查看链接:https://www.w3school.com.cn/tags/html_ref_eventattributes.asp

5、事件冒泡或事件捕获？

事件传递有两种方式：冒泡与捕获。

事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？

在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。

在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。

addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：

addEventListener(event, function, useCapture);

默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

document.getElementById("myDiv").addEventListener("click", myFunction, true);

6、removeEventListener() 方法

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:

element.removeEventListener("mousemove", myFunction);

7、浏览器兼容处理

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // 所有主流浏览器，除了 IE 8 及更早版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // IE 8 及更早版本
    x.attachEvent("onclick", myFunction);
}

 IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是，对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:

element.attachEvent(event, function);
element.detachEvent(event, function);

 

 

developerFBI
关注
专栏目录
IE 11 注册事件处理程序终于回归W3C标准addEventListener
墨墨_java进行中...
09-25 5120
以前写代码一直通过下面方式，大概区分ie和非ie内核浏览器 if (window.attachEvent) { //IE 的事件代码 } else { //其它浏览器的事件代码 } 但是今天把ie升级到11后，发现这种判断已经失效了，刚开始还以为电脑中毒了，让我好生郁闷，上网一查，才发现，ie11已经摒弃了attachEvent，而改用addEventListe
addEventListener 和attachEvent用法
寂寞的时光
07-23 364
对于IE的attachEvent方法可能大家都比较熟，现在说说FireFox的addEventListener的用法。 addEventListener的参数一共有三个，语法为： element.addEventListener(type,listener,useCapture) 下面是详解 其中element是要绑定函数的对象。 type是事件名称，要注意的是"onclick"要...
JavaScript 事件监听器 addEventListener() 方法 和一些基本的事件
最新发布
qq_52530691的博客
07-01 3757
addEventListener() 方法用于向指定元素添加事件句柄。当计算机属性检测到事件发生的时候，运行一些代码，通常是我们所制定的函数。
addEventListener 的用法示例介绍
xyjikl
07-13 1287
(要注意的是div必须放到js前面才行) 一般情况下，如果给一个dom对象绑定同一个事件，只有最后一个会生效，比如： 复制代码 代码如下: document.getElementById("btn").onclick = method1; document.getElementById("btn").onclick = method2; document.getEleme
JS中addEventListener的使用
u013773608的博客
11-20 794
触发事件,在子元素事件触发的时候,父元素的事件会在子元素事件触发完成之后触发,这便是事件冒泡
HTML DOM 事件
akuibpt23191的博客
07-13 602
1. HTML DOM 事件 参考文档：https://www.runoob.com/jsref/dom-obj-event.html HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。 事件通常与函数结合使用，函数不会在事件发生前被执行！ (如用户点击按钮)。 提示： 在 W3C 2 级 DOM 事件中规范了事件模型。...
javascript attachEvent和addEventListener使用方法
10-30
本知识点将介绍 JavaScript 中两种常用的方法：attachEvent 和 addEventListener，以及它们在不同浏览器中的应用和区别。 首先，attachEvent 方法是早期 Internet Explorer 浏览器引入的事件监听方法，它的语法是：...
document.addEventListener使用介绍
09-04
`document.addEventListener` 是JavaScript中的一个核心方法，用于向指定元素添加事件监听器。这个方法是DOM（Document Object Model）事件处理的一部分，它允许我们在网页的文档对象上绑定各种类型的事件，如点击、...
动态的绑定事件addEventListener方法的使用
09-04
在本文中，我们将深入探讨`addEventListener`方法的使用，这对于创建响应式的Web应用至关重要。 `addEventListener`是DOM（文档对象模型）级别2事件处理程序的一部分，它允许我们为一个元素添加一个或多个事件...
js追加Listener
qq_37225450的博客
03-29 2124
因为使用了一个已经封装好的控件，但是我监听的change事件在原有的基础上有所添加，第一次使用此方法，特此记录 1. 获取控件 2. 使用控件.addListener('change',function(){}) 对原有监听事件进行补充 { xtype:'periodtime', id:'timetype', timeTypeStoreData:orderInqui...
关于JS中addEventListener的使用
小火车况且况且况且的博客
03-10 4100
关于JS中addEventListener的使用 MDN中addEventListener()说明 主要用来实现事件的绑定 存在三个参数 target.addEventListener(type, listener, useCapture); type: 表示监听事件类型的字符串。类似于click,mouseover... listener: 用来监听处理的函数方法 useCapture: 默认是false,事件冒泡,可以设置为true为事件捕获 这里需要了解一下基本的事件流(事件捕获->事件目标
addEventListener的三种用法
weixin_30642305的博客
11-29 2182
首先addEventListener得API target.addEventListener(type,listener[,options]); target.addEventListener(type, listener [,{capture: Boolean, bubbling: Boolean, once: Boolean}]); target.addEventL...
addEventListener使用方法
qq_40712151的博客
04-19 361
target.addEventListener(type, listener, useCapture); 加油，别放弃。啊啊啊啊啊，太难了，aaaa https://www.cnblogs.com/laonanren/archive/2013/03/13/2958474.html
addEventListener()使用方法
热门推荐
搏·梦的博客
04-10 2万+
document.addEventListener() 方法用于向文档添加事件句柄，即事件监听。先看下面代码，稍后进行讲解。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body>...
【js】addEventListener() 用法
kkkkkkkk的博客
06-24 1万+
  addEventListener() 方法用于向指定元素添加事件句柄。 addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。 你可以向一个元素添加多个事件句柄。 你可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。 你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。 addEventLis...
addEventListener 的使用
weixin_30877493的博客
09-25 683
例如监听页面滚动条的位置 1、html 中定义（获取div高度） <div class="content" > <div class="approval-list" ref="scrollBox"> </div> </div> 2、mounted() 方法 【注 1】监听div滚动条的高度：创建一个监听就要记得销毁，...
JavaScript中addEventListener的用法
m0_51049889的博客
06-05 596
addEventListener() 和 removeEventListener()是用来分配和删除事件的函数。 这两个方法都需要三个参数，分别为： 事件名称（String）、要触发的事件处理函数(Function)、指定事件处理函数的时期或阶段(boolean)。 由图可知捕获过程要先于冒泡过程 当第三个参数设置为true就在捕获过程中执行，反之就在冒泡过程中执行处理函数 ...
addEventListener方法
m0_57263959的博客
08-09 1869
是一种强大的机制，可以用于在 JavaScript 中实现对 DOM 元素的事件响应，从而创建丰富的交互式用户界面。，您可以指定在特定事件发生时执行的函数，从而实现对用户交互或其他类型的事件的响应。函数会被调用，并在控制台输出 "Button clicked!示例：在 JavaScript 中使用。是 JavaScript 中用于向。DOM 元素添加事件监听器。将点击事件监听器绑定到。元素上，当按钮被点击时，
js事件-笔记
qq_43563512的博客
10-26 899
这里写目录标题js事件常见事件事件的注册方式事件处理分级1.DOM0级事件处理程序：2. DOM2级事件处理程序：3. DOM3级事件事件流三个阶段 js事件 常见事件 onload 加载完成事件 页面加载之后，常用于页面js代码初始化动作 onclick 单击事件 常用于按钮的点击响应操作 onblur 失去焦点事件 常用于输入框失去焦点后验证其输入内容是否合法 onchange 内容发生改变事件 常用于下拉列表和输入框发生改变后操作 insubmit 表单提交事件 常用于表单提交前
js的addEventListener方法
02-17
addEventListener是JavaScript中用于给元素添加事件监听器的方法。它可以用来监听各种事件，比如点击、鼠标移动、键盘按下等。 该方法的语法如下： element.addEventListener(event, function, useCapture); 其中，element是要添加事件监听器的元素，event是要监听的事件类型，function是事件触发时要执行的函数，useCapture是一个可选参数，表示事件是否在捕获阶段进行处理，默认为false。 当事件被触发时，指定的函数会被调用。在函数内部，可以通过event对象来获取事件的相关信息，比如鼠标的坐标、按下的键值等。 使用addEventListener方法可以实现更灵活的事件处理，可以同时给一个元素添加多个不同类型的事件监听器，也可以通过useCapture参数来控制事件的处理顺序。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值