浅谈onclick与addEventListener两种添加事件方式的区别

最新推荐文章于 2023-01-05 10:26:31 发布

原创最新推荐文章于 2023-01-05 10:26:31 发布 · 695 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#事件绑定

本文探讨了onclick事件处理程序与addEventListener方法在JavaScript中的不同行为。当使用onclick时，多个相同名称的函数只会执行最后一次定义的函数；而使用addEventListener可以为同一个元素添加多个事件监听器，并且这些监听器都会被触发。

onclick在函数名重复时，只会调用一次

而addEventListener会多次调用

JQery中click利用的是addEventListener

document.onclick=function click(){
console.log("第一次");
}
document.onclick=function click(){
console.log("第二次");
}

//显示第二次

document.addEventListener("click",function click(){
console.log("第一次");
})
document.addEventListener("click",function click(){
console.log("第二次");
})

//显示第一次第二次

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

bitpzz

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

浅谈addEventListener和attachEvent的区别

09-02

以下是一个示例，展示了如何使用条件语句来处理这两种事件绑定方法： ```javascript function addEvent(obj, type, handle) { try { // 支持W3C标准的浏览器 obj.addEventListener(type, handle, false); } ...

浅谈Javascript事件处理程序的几种方式

10-28

这里有两种主要的JavaScript指定事件处理程序的方式： 1. DOM0级事件处理程序：这是JavaScript中的简单事件绑定，直接在元素对象上设置事件属性。例如： ```javascript var btn = document.getElementById("mybtn...

参与评论您还未登录，请先登录后发表或查看评论

React合成事件的原理？

weixin_62889848的博客

01-05

284

React合成事件的原理？

addEventListener 的事件函数的传递【转载】

weixin_33730836的博客

11-13

285

addEventListener 参数如下： addEventListener(type, listener[, useCapture]); type，事件名称 listener，事件处理器 useCapture，是否捕获一直把 listener 记成是响应函数，function 类型。相信很多人也是这么理解的。多数时候是这么使用 e...

javascript中addEventListener和onclick的区别

qq_42444795的博客

04-02

1843

先来看addEvenListener事件。 addEventListener() 方法用于向指定元素添加事件句柄。提示：使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。 <!DOCTYPE html> <html lang="zh"> <head> <meta char...

addEventListener

m0_64352881的博客

03-27

526

addEventListener注册事件 <body> <div id="box" style="width: 100px;height: 100px;background-color: red"></div> <script> /* 1.dom中注册事件有两种语法点语法：只能注册一个‘同名’事件 addEventListener语法：可以注册多

JS中onclick与addEventListener绑定事件的区别

sadmoom的博客

05-17

989

onclick这种写法是DOM0级规范的写法，是所有的浏览器支持的，但是这种写法有一些弊端：这种写法不能同时绑定多个事件这种写法使代码耦合在了一起 addEventListener() 是DOM2标准中定义的方法，它可以控制是在事件捕获阶段或者是在冒泡阶段调用事件处理程序（由这个函数的第三个参数决定true/false），既然这个是DOM2标准中定

addEventListener()使用方法

搏·梦的博客

04-10

2万+

document.addEventListener() 方法用于向文档添加事件句柄，即事件监听。先看下面代码，稍后进行讲解。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body>...

浅谈javascript事件环微任务和宏任务队列原理

11-19

事件环主要包括微任务和宏任务队列，这两个队列管理着异步操作的回调执行顺序。首先，让我们了解一下事件环的工作原理。JavaScript 是一种单线程语言，这意味着在同一时刻只能执行一个任务。当遇到异步代码，如 `...

浅谈CSS3动画的回调处理

09-24

CSS3提供了两种方式来处理动画的回调：`transition`和`animation`。首先，我们来看`transition`。CSS3的`transition`属性用于平滑地改变元素从一种样式到另一种样式的过渡效果。当这个过渡完成时，我们可以监听`...

浅谈JavaScript_DOM学习篇_图片切换小案例

10-17

文档对象模型（Document Object Model，简称DOM），是一种由浏览器提供的数据结构，它提供了一种以树形结构访问和操作文档的方式。DOM是针对HTML和XML文档的应用程序接口（API），通过它可以实现对网页内容的动态...

js设置点击onclick事件之信息录入系统实现表格添加、修改、保存、删除内容

qq_53787962的博客

09-13

4041

第一步：1.创建姓名、学号、年龄、性别、学历等信息。 2.创建一个表格。3.创建添加按钮，把信息添加至表格中。第二步：1.获取button、input、table等元素节点。 2.给按钮设置点击事件。 3.点击触发创建一行、删除、修改按钮，创建单元格获取输入内容并添加至表格。第三步：1.给删除、修改按钮设置点击事件。2.点击删除所添加至表格的信息。3.点击修改所添加至表格的信息并保存。

addEvent()和addEventlistner()的区别

shueiyuan1983的专栏

10-09

1万+

//绑定事件 function addEvent(el,name,fn){ if(el.addEventListener) return el.addEventListener(name,fn,false);//在火狐中会执行这一句 return el.attachEvent('on'+name,fn);//在ie中执行这一句 } attachEvent方法

addEventListener（）参数及事件汇总

菠萝萝的博客

09-26

7245

addEventListener（）事件的汇总记录

addEventListenter 监听页面滚动事件鼠标左键拖拉滚轮

weixin_45869649的博客

04-22

2894

addEventListenter 监听页面滚动事件鼠标左键拖拉滚轮

addEventListener方法，以及addEventListener中事件函数的this指向

foreverhot1019的博客

01-14

6338

addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数；但是，IE8.0及其以下版本不支持该方法，所以，这种绑定事件的方法必须要处理浏览器兼容问题。语法对象.addEventListener(事件名称,事件处理函数,布尔值) 参数事件名称是一个字符串...

document.addEventListener理解

提升心智

03-06

3万+

document.addEventListener('自定事件', 处理函数, false); function 某函数(event){ // 方法执行 } addEventListener里最后一个参数决定该事件的响应顺序；如果为true事件执行顺序为 addEventListener ---- 标签的onclick事件 ---- docume

addEventListener和addListener的区别