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


 

相关内容

热门资讯

两只大牛股,紧急发声:不属实!... 5天3板超声电子:“超声电子高频板通过英伟达认证”情况不属实,目前无产品供货给英伟达9月13日晚间,...
科创板创新药企BD授权交易总额... 2026年半年度财报季已收官,在创新药企业以业绩扭亏和BD兑现吸引市场目光的同时,以CXO为代表的上...
蔚来李斌1-8月交付增近58%... 9月9日消息,上海蔚来汽车有限公司副总裁品牌与传播资深专家马麟在微博透露,9月8日下午,蔚来创始人、...
京东物流部署过万前置仓应对手机... IT之家 9 月 13 日消息,据京东物流黑板报,9 月,多个品牌旗舰手机集中上新。针对消费者希望尽...
特朗普让泽连斯基勿袭击俄柴油燃... 9月13日,当地时间9月13日,美国总统特朗普要求乌克兰总统泽连斯基停止袭击俄罗斯柴油燃料设施,称相...
下周,年内最便宜新股启动打新 ... 2026.09.13本文字数:1467,阅读时长大约2分钟作者 |第一财经 安卓封图 |AI生成下周...
北京:激活地理信息要素赋能城市... 9月13日,从北京市规划和自然资源委员会获悉,《北京市测绘地理信息条例》已由北京市第十六届人民代表大...
接下来该如何逃顶?建议看看这篇... 最近这段时间,很多朋友的心里其实都是悬着的。行情走到这个位置,大家见面聊得最多的就是,接下来到底该怎...
武汉:到2035年武汉区域科技... 9月13日,武汉市委十四届十三次全会召开,审议通过了《关于打造具有全球竞争力的开放创新生态 高水平建...
卡塔尔股市收盘上涨0.25% 9月13日,卡塔尔证券交易所主要股指今日收盘上涨0.25%,报9848.95点,上涨24.46点。全...