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


 

相关内容

热门资讯

盈利!大润发原CEO为&quo... 3月25日,是林小海在上任号称“中国宝洁”的第663天,上海家化公布了2025年的财报,这是他交出的...
“中年人的泡泡玛特”,故事难讲... 定焦One(dingjiaoone)原创作者 | 李梦冉编辑 | 魏佳小小的铜艺摆件,正在撑起两家上...
“2元水”战场失守!华润饮料被... 农夫山泉向上、华润饮料向下,两家以卖水起家的公司业绩走势截然不同,仅靠大单品“啃老本”的时代结束了。...
代销“首单”频现!中小银行欲借... 今年以来,中小银行代销业务的版图持续扩大。《国际金融报》记者注意到,3月以来,江阴农商银行、凤冈农商...
南昌市副市长为何分管江西首家民... 江西裕民银行大额股权即将拍卖引发关注。湘财Plus查询相关信息时发现,南昌市人民政府2025年12月...
再敲警钟!监管收紧银保渠道“报... 3月31日,《国际金融报》记者从业内获悉,国家金融监督管理总局人身保险监管司近期下发《关于进一步加强...
Anthropic做了自己的O... 众所周知,OpenClaw以前叫做Clawdbot,是Anthropic觉得这个发音非常接近自家的旗...
宁德时代:控股股东拟无偿捐赠5... 新京报贝壳财经讯 3月31日,宁德时代发布公告称,当天公司接到控股股东厦门瑞庭投资有限公司通知,其与...
否认百亿订单,拉普拉斯称“未取... 4月1日上午,有媒体报道称,拉普拉斯(688726.SH)于近日中标特斯拉光伏项目第二期,订单规模近...
港股上市、新车连发、智能领跑 ... 4月1日,岚图汽车公布最新数据:3月交付15019辆,同比增长50%,环比增长80%。这是“央国企高...