JS事件覆盖问题和触发问题

事件覆盖与触发解析
最新推荐文章于 2022-04-01 02:04:58 发布
最新推荐文章于 2022-04-01 02:04:58 发布
阅读量754 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/wuguanglin/p/EventOverried.html
本文解释了一个关于事件处理程序覆盖的问题。通过一个具体的例子说明了DOM0级事件处理程序与DOM2级事件处理程序（如addEventListener）之间的区别，以及如何在不同阶段（捕获和冒泡）设置事件处理程序来避免覆盖。

昨天遇到一个面试题，主要就是事件覆盖问题和触发问题

 （不是打广告，无视文本内容）

总之这样的话，会输出三次“做自己的网站”。

为什么不是两次，而是输出三次呢？

1.首先onclick=function...是DOM0级事件处理程序，而addEventListener是DOM2级事件处理程序，这两种属于不同类，不会相互覆盖。

2.此外事件监听的第三个参数是设置事件处理程序的调用阶段，true是捕获阶段，false是冒泡阶段，默认为false。如果处在不同阶段的话就不会相互覆盖。

综上两点，所以会输出三次。

 

转载于:https://www.cnblogs.com/wuguanglin/p/EventOverried.html

JS重复事件绑定会彼此覆盖吗
weixin_45743513的博客
06-15 1132
我们知道，DOM事件处理程序主要有两种（暂不考虑IE事件处理程序），一种是DOM0级事件处理程序的 on + ‘事件类型’，另一种是DOM2级事件处理程序中的addEventListener。如果我们给一个DOM元素用两种事件处理方式都绑定了事件处理函数，那浏览器会怎么处理呢？？如果对同一个元素进行多个事件绑定浏览器又是怎么处理？？ 接下来以点击事件为例，来看看这两种事件处理程序对多次事件绑定到底是怎么处理的 on + ‘事件类型’ on + ‘事件类型’有两种写法：一种是直接在元素标签上绑定事件，这种写法
js/jq多次绑定同一事件是否会被后者覆盖？
qq_36460164的博客
04-10 8040
问题：jquery 中，绑定多次同名事件为什么后面的不会覆盖前面的事件？首先先来4段javascript代码，比较一下他们有什么不一样1、原生js onclick来绑定事件，结果：只弹一次，B是因为原生js 同一个dom同一事件绑定多次会被覆盖<!DOCTYPE html> <html lang="en"> <head> <meta charset="U...
js解决按键事件监听被覆盖问题
qq_18643245的博客
04-01 1169
问题描述 今天晚上，和小伙伴一块用js canvas完成童年回忆坦克大战，做到一半时，发现这样一个问题。当我按住上移动按钮之后同时按住右移动按钮，再松开右按钮，坦克没有向上移动，而是停止了移动，这极其不符合预期效果。 思考 首先，这个问题是由于js是单线程，按键事件监听现有的会覆盖掉之前的，因此不会再触发原有按键事件。 解决方法 我这里提出一个方案： 引入一个全局数组，用于记录已按按键，此数组只允许存储标识按键的值，并且不允许重复值，再到定时器中循环执行数组内对应按键所执行的操作移动操作，定时器循环执行时间
JavaScript事件监听引起的事件覆盖
qq_44644791的博客
11-25 1611
最近写了一个轮播图小案例，因为JS结构问题产生了一个小bug，虽然最后解决了但还是想了解一下这个bug是怎么产生的，即事件监听的嵌套引起的事件覆盖。 1.关于bug的产生与描述: 首先我自己重新写了一下这段代码 <div> <button>点击</button> </div> <script> var n = 0; var div = document.query...
jQuery点击（click）事件覆盖
沧海龙腾LV的博客
04-08 8250
jQuery中，事件的绑定是叠加式，而不是很多人想象的覆盖式。如： $('button').click(function(){ alert("first"); }); $('button').click(function(){ alert("second"); }); 点击button之后，会先弹出first弹出框，再弹出second弹出框（而不是只弹出second弹出框）。...
两个div叠加触发事件发生闪烁问题的解决方法
09-24
在网页设计中，有时我们需要将两...这种方法既简单又高效，是处理两个叠加`div`触发事件闪烁问题的理想选择。在实际项目中，我们应该优先考虑使用CSS来解决此类问题，因为它能够更好地优化性能并提供更流畅的用户体验。
js不完美解决click和dblclick事件冲突问题
12-02
情况描述 当某个元素，如：div，同时绑定了click事件和dblclick事件，而这两个事件又要处理相对独立的业务，也就是click的时候不能触发dblclick，dblclick的时候不能触发click。在实际测试中发现，当dblclick的时候...
[js]javascript事件集合(包有触发事件)终版.pdf
02-22
8. 鼠标覆盖事件（onmouseover）：当鼠标指针移到元素上方时触发，如更改状态栏信息：`按钮" onmouseover="window.status='请您注意下面的状态栏'; return true">`。 9. 鼠标离开事件（onmouseout）：当鼠标移出...
详解用js代码触发dom事件的实现方案
10-15
在封装模拟用户操作的方法时，需要考虑到触发事件的顺序和事件类型，以确保模拟的行为与真实用户的操作尽可能一致。 注意事项： 1. 在触发事件之前，确保目标元素是可以获得焦点或可交互的，否则事件可能不会按预期...
javascript 触发事件列表 比较不错
10-29
以下是一些常见的JavaScript触发事件及其详细解释： 1. **单击事件 (onclick)**：当用户点击鼠标按钮时触发，常用于按钮点击打开新页面或执行特定功能。 ```html 打开页面" onclick="window.open('xxxx.html','new...
js怎么覆盖原有方法实现重写
12-12
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> [removed] function myblur () { alert("1、离开"); } function bindEvent(func){ myblur = func; } function myonclick() { bindEvent(function(){ alert("天啊!myblur方法被覆盖了！"); }); } [removed] </head> <body> <input type="text" onb
js 监听事件的叠加和移除
setsunadoudou的博客
10-06 537
　　html DOM元素有很多on开头的监听事件，如onload、onclick等，见DOM事件列表。但是同一种事件，后面注册的会覆盖前面的： window.onresize = function()...
js实现给dom重复添加事件，不覆盖事件
pgLi
05-05 2161
var addLicenseFnNotOverride = function(dom,event,fn){ //字符串处理，去掉'on' var evString = event.substr(0,2); if(evString == 'on'){ event = event.substr(2); } //浏览器兼容性处理 if(wi...
vue中使用on事件被覆盖
weixin_34226706的博客
03-28 562
用on的代码： window.onload = function(){ 　　var box = document.getElementById("box"); 　　box.onclick = function(){ 　　console.log("我是box1"); } box.onclick = function(){ 　　box.style....
JS入口函数实现-避免覆盖
a49968422576749的博客
05-18 427
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>JS入口函数实现-避免覆盖</title> <meta name="description" content="author:年少模样"/> ...
同一个dom元素下 单击事件覆盖双击事件的解决方法
u013269298的博客
09-21 1553
再写js的时候发现一个问题：  $("#button1").on("dbclick",function(){ //双击事件 }).on("click",function(){ //单击事件 }); 遇到如上情况的话单击事件会将双击事件覆盖掉,在网上找到一个解决方法,实验后可行： var clickTimes=0; //记录点击次数 $("#but
点击事件不生效,点击不起作用，多半是元素被遮挡。css元素被遮挡，选择不到
热门推荐
ParadiserD的博客
10-31 1万+
有过js控制点击不生效的时候吗，这时就要考虑你的元素是否被其他元素遮挡了。这里说的遮挡并不是看不到。而是能看到，却无法透过另一元素选中它。 可以试一下以下两种方案： 1、css调节z-index 首先要考虑的是更外层的元素遮挡了靠里层的元素。比如外层遮挡为一个div（.card）被遮挡的是一个input框为（.input-space） 这时就要把遮挡它的元素的css中的z-index调的比他
JavaScript问题解决方案大全：对象、数组、事件处理
9. js如何控制文本框的获得焦点事件和失去焦点事件 - 文本框的焦点事件处理是实现用户交互的一个重要方面。通过监听focus和blur事件，开发者可以定义在文本框获得或失去焦点时应该执行的操作，例如验证输入内容的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值