JavaScript onclick 和 click 的区别详解

目录
  • 为什么需要 addEventListener?
  • 用 addEventListener 的代码
    • 第三个参数的使用
  • 总结

也就是 addEventListener on 的区别

为什么需要 addEventListener?

先来看一个片段:

<div id ="box">测试</div>

用 on 的代码:

windwo.onload = function(){
  var box = document.getElementById("box");
  box.onclick = ()=>console.log("我是 box1");
  box.onclick = ()=>console.log("我是 box2");
}
// 运行结果 : 我是 box2

看到了吧,第二个 onclick 事件把第一个onclick 给覆盖了,虽然大部分情况我们用 on 就可以完成我们想要的效果,但是有时我们又需要执行多个相同的事件,很明显如果用 on 是无法实现的。但是可以使用 addEventListener 实现多次绑定同一个事件并且不会覆盖上一个事件。

用 addEventListener 的代码

window.onload = function(){
  var box = document.getElementById("box");
  box.addEventListener("click",()=>console.log("我是 box1"));
  box.addEventListener("click",()=>console.log("我是 box2"));
}
// 运行结果: 我是 box1
            //我是 box2

addEventListener 方法第一个参数填写事件名,注意不需要写 on ,第二个参数可以是一个函数,第三个参数是指在冒泡阶段还是捕获处理事件程序,如果为 true 代表捕获阶段处理,如果是 false代表冒泡阶段处理,第三个参数可以省略,大多数情况也不需要用到第三个参数,不写第三个参数默认false。

第三个参数的使用

有时候的情况是这样的:

<body>
  <div id = "box">
    <div id = "child"></div>
  </div>
</body>

如果我给 box 加 cclick 时间,如果我直接单击 box 没有什么问题,但是如果我单击的是child元素,那么它是怎么样执行的?

box.addEventListener("click",()=>console.log("box"));
child.addEventListener("click",()=>console.log("child"));
// 执行结果:child -> box

也就是说,默认情况是按照事件冒泡的执行顺序进行的

如果第三个参数写的是 true,则按照事件捕获的执行顺序进行

总结

1.onclick 事件在同一时间只能指向一个对象

2.addEventListener可以给一个事件注册多个 listener

3.addEventListener 对于任何 dom 元素都是有效的,而 onclick 仅限于 html 元素

4.addEventListener可以控制 listener 的触发阶段(捕获/冒泡)

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注我们的更多内容!

时间: 2021-10-13

JavaScript给按钮绑定点击事件(onclick)的方法

本文实例讲述了JavaScript给按钮绑定点击事件(onclick)的方法.分享给大家供大家参考.具体分析如下: 我们可以通过设定按钮的onclick属性来给按钮绑定onclick事件 <!DOCTYPE html> <html> <head> <script> function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script

JavaScript onclick事件使用方法详解

onclick是一个事件,当事件被触发时就会执行处理,onclick是一个处理鼠标点击的事件.本篇文章就给大家分享关于JavaScript中onclick事件的用法. 我们首先来看一下onclick事件的语法 以下是如何使用onclick事件编写. 使用document.getElementById()在文档中指定id元素,并使用function(){}处理单击该元素时发生的事件. document.getElementById("button").onclick = function

JavaScript中click和onclick本质区别与用法分析

本文实例讲述了JavaScript中click和onclick本质区别与用法.分享给大家供大家参考,具体如下: 原生javascript的click在w3c里边的阐述是DOM button对象,也是html DOM click() 方法,可模拟在按钮上的一次鼠标单击. button 对象代表 HTML 文档中的一个按钮.button元素没有默认的行为,但是必须有一个 onclick 事件句柄以便使用. 语法:buttonObject.click() <html> <head> &l

javascript使用onclick事件改变选中行的颜色

html页面的table 中一行一行的显示当然 div也行 可设置在鼠标放上去时改变其颜色 部分代码如下 复制代码 代码如下: <script type="text/javascript">var currentActiveRow; //当前活动行 //改变选中行的颜色function changeActiveRow(obj) {    if (currentActiveRow) {        currentActiveRow.style.backgroundColor

JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法

本文实例讲述了JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法.分享给大家供大家参考,具体如下: 最近项目中遇到了在同一DOM元素上需要添加 onclick 和 ondblclick 2个事件,如果按照正常的方式添加处理,结果发现只会执行 onclick,而不会执行 ondblclick:这时我们需要对2个事件的处理函数稍作处理就可以实现2个事件并存了,代码如下: <script type="text/javascript"> var cl

jQuery中dom元素上绑定的事件详解

作为技术狂热分子的职业本能,看到一个技术产品的功能,总会忍不住想知道它是怎么被实现的.比如我每每看到别人网站一个很炫的界面或者很酷的功能,就忍不住打开了浏览器的控制台... 好,不扯远,说说当你想看到网站上某个元素绑定的事件函数的代码时应该怎么做吧. 查看原生绑定的事件函数代码 所谓原生就是通过addEventListener方法绑定到dom元素上.这个好办: 审查绑定事件的元素(对着它右键->审查元素)在弹出的Elements视图的控制台,右侧点击"Event Listeners&quo

JS动态创建DOM元素的方法

本文实例讲述了JS动态创建DOM元素的方法.分享给大家供大家参考.具体如下: 近日,因工作需要,需要通过点击某个元素后, 动态创建一个DOM元素并显示,因此写了一些相关的JS函数,在此记录,以作备忘: /* 动态创建DOM元素的相关函数支持 */ /* 获取以某个元素的DOM对象 @obj 该元素的ID字符串 */ function getElement(obj) { return typeof obj=='string'?document.getElementById(obj):obj; }

jQuery判断元素上是否绑定了指定事件的方法

本文实例讲述了jQuery判断元素上是否绑定了指定事件的方法.分享给大家供大家参考.具体如下: 例如下面的代码可以判断id=testdiv的元素是否绑定的click事件,这个判断只针对jQuery绑定的事件有效,普通JS的事件绑定无效. //jQuery event封装支持判断元素上是否绑定了事件,此方法只适用于jQuery绑定的事件 var $events = $("#testdiv").data("events"); if( $events &&

JS中获取 DOM 元素的绝对位置实例详解

在操作页面滚动和动画时经常会获取 DOM 元素的绝对位置,例如 本文 左侧的悬浮导航,当页面滚动到它以前会正常地渲染到文档流中,当页面滚动超过了它的位置,就会始终悬浮在左侧. 本文会详述各种获取 DOM 元素绝对位置 的方法以及对应的兼容性.关于如何获取 DOM 元素高度和滚动高度,请参考视口的宽高与滚动高度 一文. 概述 这些是本文涉及的 API 对应的文档和标准,供查阅: API 用途 文档 标准 offsetTop 相对定位容器的位置 MDN CSSOM View Module clien

快速解决js动态改变dom元素属性后页面及时渲染的问题

今天实现一个进度条加载过程,dom结构其实就是两个div <div class="pbar"> <div class="ui-widget-header" id="percent_bar" style="width: 23%;"></div> </div> 控制里层div的宽width属性,就能实现进度条往前走的效果. 我的进度条是显示下载文件的进度,简单实现一共100个文件的话

JS获取浮动(float)元素的style.left值为空的快速解决办法

解决办法: 1.使用行内样式设置元素的top和left值; 2.or直接获取元素的offsetLeft得到相关数值,还不需要parseInt 问题原因: 如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值,这同offsetLeft是相同的,区别在于: style.left 返回的是字符串,如28px,offsetLeft返回的是数值28,如果需要对取得的值进行计算,还用offsetLe

Jquery on方法绑定事件后执行多次的解决方法

这两天工作中遇到使用js动态加载内容,同时需要对加入的内容绑定点击事件的,当时想想了想可以使用内联的onclick 来实现,后来没有这样做,使用的是 on('click',function(){}) ,然而使用on方法的时候就发现,on 对同一个元素多次绑定同一个事件的时候,这个事件就会执行多次. 下面给出这种情况的实例: $(function(){ $(".add").click(function(eve){ $(".btn-area").append("

onclick和onblur冲突问题的快速解决方法

新浪首页的搜索框里面有一个使用ajax的下拉框.我们需要实现一个点击下拉框里面的一项,让搜索框里面的值变成这一项,同时下拉框消失的效果,但同时在点击其他地方的时候,这个下拉框也要消失.大致如图: 我们同时使用onblur和onclick来使下拉框隐藏,但是更大的问题出现了,这两个功能相冲突,onblur过于强悍,根本没有onclick方法实现的机会,搜索框无法获取点击项的内容.这个就是我们想要解决的onclick和onblur冲突问题. 对应这个问题,这里我们介绍两种解决办法: 1. 使用set

Android开发中调用系统相册上传图片到服务器OPPO等部分手机上出现短暂的显示桌面问题的解决方法

要原因是主体样式设置的问题:这里把appTheme设置一个style即可: <item name="android:windowBackground">@color/white</item> <!--下面这个属性很重要,有时候会出现某些机型在调用系统相册的时候,短暂的出现手机桌面现象--> <item name="android:windowIsTranslucent">false</item> <i