zoukankan      html  css  js  c++  java
  • [Javascript] event.target.closest(selector)

    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 the Element 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 returns null.

  • 相关阅读:
    CTF工具使用
    关于CTF的Misc
    stegsolve使用方法
    CTF练习平台
    关于命令执行漏洞深入学习
    redis未授权访问漏洞复现
    Vulnhub实战靶场:DC-2
    Vulnhub实战靶场:DC-1
    NISP一级真题、NISP一级题库
    封神台靶场:萌新也能找CMS突破
  • 原文地址:https://www.cnblogs.com/Answer1215/p/15162112.html
Copyright © 2011-2022 走看看