[Javascript] event.target.closest(selector)
JavaScript Event Target Selector Closest
2023-09-14 09:00:45 时间
The Event Delegation Pattern
Event delegation is a simple, but powerful leveraging of the DOM event system which allows for easier adding of functionality to dynamically created content; as well as being an interesting performance optimization.
Idea is you just need to add one event listener to the partent DOM element, instead of add one event listener for each child element.
For example,
<Child> <button>Click</button> </Child>
child,addEventListener( 'click', function onClick(event) { if (event.target instanceof Element && event.target.tagName === "Button") { addButton(); }})
Problem is if you put "click" into a Span
<Child> <button><span>Click</span></button> </Child>
Previous code won't work, work around can be:
child,addEventListener( 'click', function onClick(event) { if (event.target instanceof Element && event.target.closest('button') === "Button") { addButton(); }})
The
closest()
method traverses theElement
and its parents (heading toward the document root) until it finds a node that matches the provided selector string. Will return itself or the matching ancestor. If no such element exists, it returnsnull
.
相关文章
- javascript中通过元素id和name直接取得元素
- ASPX导入JS,JavaScript乱码怎么办
- 第一百二十七节,JavaScript,JSON数据类型转换,数据转换成字符串,字符串转换成数据
- 第一百二十节,JavaScript事件对象
- [Javascript] Avoid Accidental Returns of New State by using the void Keyword
- [Functional Programming] Create Reusable Functions with Partial Application in JavaScript
- [Javascript] Automating Releases with semantic-release
- 面向对象的JavaScript(3):私有成员和公开成员
- 在IE环境下用javascript触发ABAP event
- 关于 JavaScript 事件循环 Event Loop 的一些理解
- JavaScript事件处理的例子:事件捕捉和冒泡 - event capture and bubble
- 不使用任何框架,手写纯 JavaScript 实现上传本地文件到 ABAP 服务器
- ASP.NET—011:JavaScript报错常见问题
- 如何系统地学习JavaScript
- Javascript 蛤蟆可以吃队友,也可以吃对手 比较字符串
- JavaScript 运行机制详解:Event Loop——续
- JavaScript----JS下载文件重命名不生效即a.download修改文件名不生效的解决办法
- JavaScript面试题