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

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

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

瀏覽:98日期: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
相關文章:
主站蜘蛛池模板: 扬州汇丰仪表有限公司| 厚壁钢管-厚壁无缝钢管-小口径厚壁钢管-大口径厚壁钢管 - 聊城宽达钢管有限公司 | 车充外壳,车载充电器外壳,车载点烟器外壳,点烟器连接头,旅行充充电器外壳,手机充电器外壳,深圳市华科达塑胶五金有限公司 | 北京康百特科技有限公司-分子蒸馏-短程分子蒸馏设备-实验室分子蒸馏设备 | 二氧化碳/活性炭投加系统,次氯酸钠发生器,紫外线消毒设备|广州新奥 | 二次元影像仪|二次元测量仪|拉力机|全自动影像测量仪厂家_苏州牧象仪器 | 炭黑吸油计_测试仪,单颗粒子硬度仪_ASTM标准炭黑自销-上海贺纳斯仪器仪表有限公司(HITEC中国办事处) | 苏州工作服定做-工作服定制-工作服厂家网站-尺品服饰科技(苏州)有限公司 | 车间除尘设备,VOCs废气处理,工业涂装流水线,伸缩式喷漆房,自动喷砂房,沸石转轮浓缩吸附,机器人喷粉线-山东创杰智慧 | 南京租车,南京汽车租赁,南京包车,南京会议租车-南京七熹租车 | 深圳宣传片制作-企业宣传视频制作-产品视频拍摄-产品动画制作-短视频拍摄制作公司 | 冷却塔风机厂家_静音冷却塔风机_冷却塔电机维修更换维修-广东特菱节能空调设备有限公司 | 岩棉板|岩棉复合板|聚氨酯夹芯板|岩棉夹芯板|彩钢夹芯板-江苏恒海钢结构 | 沟盖板_复合沟盖板厂_电力盖板_树脂雨水篦子-淄博拜斯特 | 焊接减速机箱体,减速机箱体加工-淄博博山泽坤机械厂 | 膏剂灌装旋盖机-眼药水灌装生产线-西林瓶粉剂分装机-南通博琅机械科技 | 成人纸尿裤,成人尿不湿,成人护理垫-山东康舜日用品有限公司 | 家德利门业,家居安全门,别墅大门 - 安徽家德利门业有限公司 | 柔性输送线|柔性链板|齿形链-上海赫勒输送设备有限公司首页[输送机] | 高低温试验箱-模拟高低温试验箱订制-北京普桑达仪器科技有限公司【官网】 | 电缆桥架生产厂家_槽式/梯式_热镀锌线槽_广东东莞雷正电气 | 宁夏档案密集柜,智能密集柜,电动手摇密集柜-盛隆柜业宁夏档案密集柜厂家 | 医院专用门厂家报价-医用病房门尺寸大全-抗菌木门品牌推荐 | 周口风机|周风风机|河南省周口通用风机厂 | 综合管廊模具_生态,阶梯护坡模具_检查井模具制造-致宏模具厂家 | 振动筛-交叉筛-螺旋筛-滚轴筛-正弦筛-方形摇摆筛「新乡振动筛厂家」 | 大连海岛旅游网>>大连旅游,大连海岛游,旅游景点攻略,海岛旅游官网 | 空气净化器租赁,空气净化器出租,全国直租_奥司汀净化器租赁 | 电动卫生级调节阀,电动防爆球阀,电动软密封蝶阀,气动高压球阀,气动对夹蝶阀,气动V型调节球阀-上海川沪阀门有限公司 | 编织人生 - 权威手工编织网站,编织爱好者学习毛衣编织的门户网站,织毛衣就上编织人生网-编织人生 | 真空泵厂家_真空泵机组_水环泵_旋片泵_罗茨泵_耐腐蚀防爆_中德制泵 | 温州富欧金属封头-不锈钢封头厂家 | 变色龙PPT-国内原创PPT模板交易平台 - PPT贰零 - 西安聚讯网络科技有限公司 | 广州展览设计公司_展台设计搭建_展位设计装修公司-众派展览装饰 广州展览制作工厂—[优简]直营展台制作工厂_展会搭建资质齐全 | 智能家居全屋智能系统多少钱一套-小米全套价格、装修方案 | 井式炉-台车式回火炉-丹阳市电炉厂有限公司 | 深圳高新投三江工业消防解决方案提供厂家_服务商_园区智慧消防_储能消防解决方案服务商_高新投三江 | 骨密度检测仪_骨密度分析仪_骨密度仪_动脉硬化检测仪专业生产厂家【品源医疗】 | 分类168信息网 - 分类信息网 免费发布与查询 | 光照全温振荡器(智能型)-恒隆仪器| 洁净化验室净化工程_成都实验室装修设计施工_四川华锐净化公司 |