js学习8(事件基础)
创始人
2025-05-28 09:55:56
0

目录

常用事件

监听器(侦听器)和事件监听程序

 事件捕获和事件冒泡

事件委托


常用事件

监听器(侦听器)和事件监听程序

### 监听器
on+事件 = callback


### 事件监听程序
添加事件监听程序:addEventListener(event,callback,[useCapture:bool])【回调接受触发事件自身】
移除事件监听程序:removeEventListener(event,remove_callback,[useCapture:bool])
event:事件名称
callback:处理事件的回调函数
useCapture:是否在捕捉过程进行回调处理
remove_callback:要移除事件对应的回调函数


### callback
callback接受一个参数,即触发的事件对象

 事件捕获和事件冒泡

 

### 定性:
是两个完成事件的过程,先捕获再冒泡


### 相关问题:
事件捕获过程阻止传播?
事件冒泡过程阻止传播?


### 解决问题:
## 事件冒泡过程阻止传播
在回调函数中调用evt.stopPropagation(),阻止事件冒泡传播


## 事件捕获过程阻止传播
addEventListener(event,callback,[useCapture:bool]),令useCapture=true,使在捕获过程就执行回调处理;
在回调函数中调用evt.stopPropagation(),阻止事件冒泡传播;


### 测试学习代码


    a
   

        b
       

            c
       

   

事件委托

### 定性:
通过监听父元素事件,并利用event.target,实现处理和控制该事件的所有子元素


### event.target:
event即元素触发的事件对象,而event.target永远指向事件捕获的末尾对应的元素(事件目标对象);
所以我们只需要监听父元素某事件,且此时父元素该事件对象的target属性永远指向“事件目标对象”


### 应用场景:
要对某一元素的所有子元素做同类型事件监听和相同事件处理程序


### 参考代码:


   
one

   
two

   
three

   
four


 

相关内容

热门资讯

进口GLP-1减肥药价格腰斩:... 曾经一支难求的进口GLP-1减肥药,现在已进入降价通道了。 近日,在云南省药品集中采购平台和四川省药...
君龙人寿三年三换帅,保费缩水暗... 文|颜清欢 编辑/陈小泉来源/燕梳师院总经理办公室的座位还没捂热,新一轮人事震荡已悄然落幕。三年三易...
将推出飞行汽车?比亚迪辟谣:没... 比亚迪(002594.SZ;01211.HK)公开辟谣造飞行汽车的传言。12月29日,比亚迪集团品牌...
有惊无险,沪指9连阳!多空双杀... 12月29日,三大指数涨跌不一,沪指微涨走出九连阳,创业板指一度跌超1%。截至收盘,沪指涨0.04%...
斥11亿并购英大期货,中油资本... 来源:密探财经(ID:Spy Finance)2025年收官之际,两大能源央企巨头之间抛出一笔“重磅...
不再使用分销方式,高价茅台彻底... 2025年12月29日,关于茅台明年不再使用分销方式的话题冲上微博热门。12月28日,2026年贵州...
【收盘】A股大小指数分化:沪指... A股三大股指12月29日开盘涨跌互现。早盘依旧呈现大小指数分化走势,三大股指虽一度转涨,但午前就重返...
浙江金华世贸城市广场:重塑商圈... 2025年12月9日—10日,全国零售业创新发展大会在北京召开。会议期间,商务部流通发展司印发了《零...
水井坊否认被收购背后,剑南春“... 一则传闻激起千层浪。近日,水井坊(600779.SH)股价异动涨停,市场盛传川酒“六朵金花”之一的剑...
“中信系”老将芦苇拟任邮储银行... 芦苇此次从中信体系转战邮储银行,业内普遍认为是邮储银行为适配其高质量发展战略所进行的一次关键人事布局...