电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

JavaScript 事件代理需要注意的地方

瀏覽:96日期:2023-10-15 08:54:25

我們知道,如果給 form 里面的 button 元素綁定事件,需要考慮它是否會觸發 form 的 submit 行為。除此之外,其它場合給 button 元素綁定事件,你幾乎不用擔心這個事件會有什么非預期的附加效果,很自然地會這樣寫事件處理代碼:

var button = document.querySelector(’button’)button.addEventListener(’click’, function (e) { console.log(’點擊了按鈕’)})

你之所以放心這么寫,是因為這個 button 元素沒有使用事件代理,即沒有代理任何子元素的事件。

事件代理的意思是,你要為一個元素綁定事件,但你不是直接把事件綁定到這個元素自己身上,而是綁定到這個元素的父元素上。當子元素的某個事件(比如點擊事件)觸發時,它的父元素相同的事件也會觸發(我們常說的事件冒泡),此時我們說父元素代理了子元素的事件。

舉個例子,比如一個 button 元素中包含一個齒輪圖標:

<button> <svg> <use xlink:href='http://www.hdgsjgj.cn/bcjs/16526.html#gear' rel='external nofollow' ></use> </svg></button>

當用戶點擊齒輪圖標,必然要觸發 click 事件,但你并不會直接綁定事件到 svg 或 use 元素上,而是綁定到它們的父元素 button 上。即:

document.querySelector(’button’).addEventListener(’click’, function (e) { console.log(’點擊了按鈕’)})

這種情況,我們可以說,button 元素代理了它的所有子元素的 click 事件。

但是,出現這種事件代理的情況時,我們就得小心了。

為了更直觀地說明問題,我們把“父”元素上升到頂層的 document 元素:

document.documentElement.addEventListener(’click’, function (e) { console.log(’我被點擊了’)})

只要網頁中任意一個位置被點擊了,都會觸發綁定在 document 元素上的點擊事件。​ 想要知道事件具體是發生在哪個元素上面,可以通過事件對象提供的 target 屬性來判斷。

document.documentElement.addEventListener(’click’, function (e) { console.log(e.target)})

我們很容易知道事件具體是發生在哪個元素身上的。于是在上面的示例中,如果父元素 document 想在按鈕被點擊時做點什么事情,我們很自然地會這么寫:

document.documentElement.addEventListener(’click’, function (e) { if (e.target.tagName === ’BUTTON’) { console.log(’按鈕被點擊了’) }})

這時問題就出現了,按鈕即使被點擊了 if 條件也不一定成立,即也不一定會輸出“按鈕被點擊了”。因為用戶在按鈕上的某個位置點擊了,根據用戶點擊的位置,e.target 可能是下面三種情況:

BUTTON 元素 SVG 元素 USE 元素

實際的情況是這樣的:

JavaScript 事件代理需要注意的地方

我們真正的意圖是,只要點擊是發生在按鈕上面,不論是按鈕的哪個位置,我們都應視為按鈕被點擊了。 嗯,簡單,我們再改一下,這樣寫:

document.documentElement.addEventListener(’click’, function (e) { if ([’BUTTON’, ’SVG’, ’USE’].includes(e.target.tagName.toUpperCase())) { // 點擊的是按鈕 }})

這樣似乎沒什么問題,也確實可以達到目的,但看上去總是有些別扭。因為這種情況對于最上層的 document 來說,得知道每個子元素的情況,本來我只需要關心離我最近的 button 元素就可以了。

根據 OOP 對內封裝的思想,button 元素內部的事情應該在內部消化掉,其子元素對外不可見,應該只暴露 button 元素本身。依據這個思想和事件冒泡的特點,我們就有了比較好的解決辦法:只需要禁止 button 內部元素的事件響應(包括事件冒泡)而只允許 button 元素本身的事件發生就行。有兩種方式可以實現這個目的。

一種是使用 CSS 禁止 button 內部元素的事件響應:

button > * { pointer-events: none;}

另一種是使用 JS 來阻止 button 內部元素的事件響應(包括事件冒泡):

document.querySelector(’button > svg’).addEventListener(’click’, function (e) { e.stopPropagation() e.preventDefault()})document.querySelector(’button’).addEventListener(’click’, function (e) { console.log(e.target.tagName)})

這兩種方式都能達到我們預期的效果:

JavaScript 事件代理需要注意的地方

綜上,針對特定元素進行事件處理時,如果該元素有事件代理的情況,就要小心處理它所代理的子元素。

以上就是JavaScript 事件代理需要注意的地方的詳細內容,更多關于JavaScript 事件代理的資料請關注好吧啦網其它相關文章!

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 郑州宣传片拍摄-TVC广告片拍摄-微电影短视频制作-河南优柿文化传媒有限公司 | 东莞办公家具厂家直销-美鑫【免费3D效果图】全国办公桌/会议桌定制 | 苏州工作服定做-工作服定制-工作服厂家网站-尺品服饰科技(苏州)有限公司 | 聚合氯化铝-碱式氯化铝-聚合硫酸铁-聚氯化铝铁生产厂家多少钱一吨-聚丙烯酰胺价格_河南浩博净水材料有限公司 | 石牌坊价格石牌坊雕刻制作_石雕牌坊牌楼石栏杆厂家_山东嘉祥石雕有限公司 | 防火板_饰面耐火板价格、厂家_品牌认准格林雅 | 福建自考_福建自学考试网| EDLC超级法拉电容器_LIC锂离子超级电容_超级电容模组_软包单体电容电池_轴向薄膜电力电容器_深圳佳名兴电容有限公司_JMX专注中高端品牌电容生产厂家 | 湖南教师资格网-湖南教师资格证考试网 | 通用磨耗试验机-QUV耐候试验机|久宏实业百科 | 披萨石_披萨盘_电器家电隔热绵加工定制_佛山市南海区西樵南方综合保温材料厂 | 衢州装饰公司|装潢公司|办公楼装修|排屋装修|别墅装修-衢州佳盛装饰 | 双舌接地线-PC68数字式高阻计-ZC36|苏海百科 | 木材烘干机,木炭烘干机,纸管/佛香烘干设备-河南蓝天机械制造有限公司 | 退火炉,燃气退火炉,燃气热处理炉生产厂家-丹阳市丰泰工业炉有限公司 | Safety light curtain|Belt Sway Switches|Pull Rope Switch|ultrasonic flaw detector-Shandong Zhuoxin Machinery Co., Ltd | 武汉天安盾电子设备有限公司 - 安盾安检,武汉安检门,武汉安检机,武汉金属探测器,武汉测温安检门,武汉X光行李安检机,武汉防爆罐,武汉车底安全检查,武汉液体探测仪,武汉安检防爆设备 | 武汉高低温试验机-现货恒温恒湿试验箱-高低温湿热交变箱价格-湖北高天试验设备 | 高楼航空障碍灯厂家哪家好_航空障碍灯厂家_广州北斗星障碍灯有限公司 | 曙光腾达官网-天津脚手架租赁-木板架出租-移动门式脚手架租赁「免费搭设」 | 温室大棚建设|水肥一体化|物联网系统 | 合肥展厅设计-安徽展台设计-合肥展览公司-安徽奥美展览工程有限公司 | 大型冰雕-景区冰雕展制作公司,3D创意设计源头厂家-[赛北冰雕] | 天津市能谱科技有限公司-专业的红外光谱仪_红外测油仪_紫外测油仪_红外制样附件_傅里叶红外光谱技术生产服务厂商 | 屏蔽泵厂家,化工屏蔽泵_维修-淄博泵业 | 尚为传动-专业高精密蜗轮蜗杆,双导程蜗轮蜗杆,蜗轮蜗杆减速机,蜗杆减速机生产厂家 | 校园气象站_超声波气象站_农业气象站_雨量监测站_风途科技 | 合肥触摸一体机_触摸查询机厂家_合肥拼接屏-安徽迅博智能科技 | 袋式过滤器,自清洗过滤器,保安过滤器,篮式过滤器,气体过滤器,全自动过滤器,反冲洗过滤器,管道过滤器,无锡驰业环保科技有限公司 | 锯边机,自动锯边机,双面涂胶机-建业顺达机械有限公司 | 光伏支架成型设备-光伏钢边框设备-光伏设备厂家 | 【电子厂招聘_普工招工网_工厂招聘信息平台】-工立方打工网 | 玻璃钢型材_拉挤模具_玻璃钢拉挤设备——滑县康百思 | 山东螺杆空压机,烟台空压机,烟台开山空压机-烟台开山机电设备有限公司 | 斗式提升机,斗式提升机厂家-淄博宏建机械有限公司 | 六维力传感器_六分量力传感器_模腔压力传感器-南京数智微传感科技有限公司 | 琉璃瓦-琉璃瓦厂家-安徽盛阳新型建材科技有限公司 | 房间温控器|LonWorks|海思 | 底部填充胶_电子封装胶_芯片封装胶_芯片底部填充胶厂家-东莞汉思新材料 | 闪蒸干燥机-喷雾干燥机-带式干燥机-桨叶干燥机-[常州佳一干燥设备] | 招商帮-一站式网络营销服务|搜索营销推广|信息流推广|短视视频营销推广|互联网整合营销|网络推广代运营|招商帮企业招商好帮手 |