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

最新推荐文章于 2022-04-01 02:04:58 发布
最新推荐文章于 2022-04-01 02:04:58 发布
阅读量703 收藏
点赞数
原文链接：http://www.cnblogs.com/wuguanglin/p/EventOverried.html
版权

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

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

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

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

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

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

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

 

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

weixin_30507269
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js/jq多次绑定同一事件是否会被后者覆盖？
qq_36460164的博客
04-10 7917
问题：jquery 中，绑定多次同名事件为什么后面的不会覆盖前面的事件？首先先来4段javascript代码，比较一下他们有什么不一样1、原生js onclick来绑定事件，结果：只弹一次，B是因为原生js 同一个dom同一事件绑定多次会被覆盖<!DOCTYPE html> <html lang="en"> <head> <meta charset="U...
JS重复事件绑定会彼此覆盖吗
weixin_45743513的博客
06-15 951
我们知道，DOM事件处理程序主要有两种（暂不考虑IE事件处理程序），一种是DOM0级事件处理程序的 on + ‘事件类型’，另一种是DOM2级事件处理程序中的addEventListener。如果我们给一个DOM元素用两种事件处理方式都绑定了事件处理函数，那浏览器会怎么处理呢？？如果对同一个元素进行多个事件绑定浏览器又是怎么处理？？ 接下来以点击事件为例，来看看这两种事件处理程序对多次事件绑定到底是怎么处理的 on + ‘事件类型’ on + ‘事件类型’有两种写法：一种是直接在元素标签上绑定事件，这种写法
js解决按键事件监听被覆盖问题
qq_18643245的博客
04-01 1031
问题描述 今天晚上，和小伙伴一块用js canvas完成童年回忆坦克大战，做到一半时，发现这样一个问题。当我按住上移动按钮之后同时按住右移动按钮，再松开右按钮，坦克没有向上移动，而是停止了移动，这极其不符合预期效果。 思考 首先，这个问题是由于js是单线程，按键事件监听现有的会覆盖掉之前的，因此不会再触发原有按键事件。 解决方法 我这里提出一个方案： 引入一个全局数组，用于记录已按按键，此数组只允许存储标识按键的值，并且不允许重复值，再到定时器中循环执行数组内对应按键所执行的操作移动操作，定时器循环执行时间
JavaScript事件监听引起的事件覆盖
qq_44644791的博客
11-25 1492
最近写了一个轮播图小案例，因为JS结构问题产生了一个小bug，虽然最后解决了但还是想了解一下这个bug是怎么产生的，即事件监听的嵌套引起的事件覆盖。 1.关于bug的产生与描述: 首先我自己重新写了一下这段代码 <div> <button>点击</button> </div> <script> var n = 0; var div = document.query...
JavaScript事件进阶：即如何给一个事件添加多个相同的事件（一）
weixin_40981660的博客
08-14 2532
1、什么是事件处理器？ 给一个元素添加一个事件叫“事件处理器”，如下所示： oBtn.onclick =function(){}; 显然，事件处理器的用法很简单，但是有一定的缺陷。如果要为一个元素添加多个相同的事件，则会发生后面的事件覆盖前面事件的现象，举个栗子： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> &lt
两个div叠加触发事件发生闪烁问题的解决方法
09-24
在网页设计中，有时我们需要将两...这种方法既简单又高效，是处理两个叠加`div`触发事件闪烁问题的理想选择。在实际项目中，我们应该优先考虑使用CSS来解决此类问题，因为它能够更好地优化性能并提供更流畅的用户体验。
[js]javascript事件集合(包有触发事件)终版.pdf
02-22
8. 鼠标覆盖事件（onmouseover）：当鼠标指针移到元素上方时触发，如更改状态栏信息：`按钮" onmouseover="window.status='请您注意下面的状态栏'; return true">`。 9. 鼠标离开事件（onmouseout）：当鼠标移出...
js不完美解决click和dblclick事件冲突问题
12-02
情况描述 当某个元素，如：div，同时绑定了click事件和dblclick事件，而这两个事件又要处理相对独立的业务，也就是click的时候不能触发dblclick，dblclick的时候不能触发click。在实际测试中发现，当dblclick的时候...
详解用js代码触发dom事件的实现方案
10-15
在封装模拟用户操作的方法时，需要考虑到触发事件的顺序和事件类型，以确保模拟的行为与真实用户的操作尽可能一致。 注意事项： 1. 在触发事件之前，确保目标元素是可以获得焦点或可交互的，否则事件可能不会按预期...
javascript 触发事件列表 比较不错
10-29
以下是一些常见的JavaScript触发事件及其详细解释： 1. **单击事件 (onclick)**：当用户点击鼠标按钮时触发，常用于按钮点击打开新页面或执行特定功能。 ```html 打开页面" onclick="window.open('xxxx.html','new...
jQuery点击（click）事件覆盖
沧海龙腾LV的博客
04-08 7954
jQuery中，事件的绑定是叠加式，而不是很多人想象的覆盖式。如： $('button').click(function(){ alert("first"); }); $('button').click(function(){ alert("second"); }); 点击button之后，会先弹出first弹出框，再弹出second弹出框（而不是只弹出second弹出框）。...
JS入口函数实现-避免覆盖
a49968422576749的博客
05-18 360
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>JS入口函数实现-避免覆盖</title> <meta name="description" content="author:年少模样"/> ...
js实现给dom重复添加事件，不覆盖事件
pgLi
05-05 2098
var addLicenseFnNotOverride = function(dom,event,fn){ //字符串处理，去掉'on' var evString = event.substr(0,2); if(evString == 'on'){ event = event.substr(2); } //浏览器兼容性处理 if(wi...
点击一个盖在另一个元素上的元素（两元素同级），触发被盖住的元素的点击事件。
zhangxiaodui的博客
04-15 2887
最近在做小程序，需要给一个元素加个光影效果，然后再做的过程中，如果一道光刚好滑到要点击的元素上，就相当于没点到元素上了，从网上搜了一下，说给盖住其他元素的那个元素加个CSS属性就可以了，什么属性呢？ pointer-events: none; 加了这个属性后，它就不会挡住我要点的元素了，就穿透了。 ...
同一个dom元素下 单击事件覆盖双击事件的解决方法
u013269298的博客
09-21 1485
再写js的时候发现一个问题：  $("#button1").on("dbclick",function(){ //双击事件 }).on("click",function(){ //单击事件 }); 遇到如上情况的话单击事件会将双击事件覆盖掉,在网上找到一个解决方法,实验后可行： var clickTimes=0; //记录点击次数 $("#but
DIV叠加，点击时如何只激发顶层DIV的JS事件
shen020453的专栏
07-02 1475
function getEvent() {    if (document.all) {        return window.event; //如果是ie    }    func = getEvent.caller;    while (func != null) {        var arg0 = func.arguments[0];        if (arg0) {      ...
关于JS中的重载和覆盖
fish_skyyyy的博客
07-30 976
JS中的重载和覆盖一、重载二、覆盖 一、重载 重载是函数名相同，参数不同。 //第一次声明函数变量 function sum(a, b) { return a+b } console.log(sum); console.log(sum(1,2)); //第二次声明函数变量 function sum(a, b, c) { return a+b+c } console.log(sum); console.log(sum(1,2,3)); 最终控制台输出结果为： 二、覆盖 重写又称覆盖，一
JavaScript给按钮绑定点击事件（onclick）的方法及js常见事件
热门推荐
崔崇东的博客
02-05 9万+
本文实例讲述了JavaScript给按钮绑定点击事件（onclick）的方法。分享给大家供大家参考。具体分析如下： 我们可以通过设定按钮的onclick属性来给按钮绑定onclick事件 html> head> script> function displayDate() { document.getElementById("demo").innerHTML=Date(); } scri
JavaScript事件详解：分类、作用与触发机制
1. **事件源 (Event Source)**: 触发事件的元素，可能是按钮、链接、图像或其他HTML元素。事件源可以是用户交互的对象，如鼠标或键盘。 2. **事件类型 (Event Type)**: 定义了事件的触发方式，例如`onclick`表示...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值