事件添加与事件代理的实现原理

事件的添加方式

事件添加方式，事件监听；

相关知识整理：

ev：事件对象；
ev.target: 表示当前按钮，表示事件触发者；
事件监听的语法：addEventListener(事件名称，回调方法，传递机制/捕获/冒泡);false是冒泡阶段，ture是捕获阶段；
setInterval()设置定时器；
dispatchEvent() 分配事件，事件派出器，自动执行某个操作；

实例演示：

<body>
    <button onclick="show(this)">按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <script>
        function show(ele){
            console.log(ele.innerHTML)
        }
        // ev.target表示当前按钮，表示事件触发者；
        const b=document.querySelector("button:nth-of-type(2)")
        b.onclick=(ev)=>console.log(ev.target,"您点击了按钮2")
        // 事件监听
        // addEventListener(事件名称，回调方法，传递机制/捕获/冒泡)
        const d3=document.querySelector("button:nth-of-type(3)")
        d3.addEventListener("click",(ev)=>console.log("点击了按钮3"),false)
        const last=document.querySelector("button:last-of-type")
        last.addEventListener("click",(ev)=>console.log("您点击了最后一个"),false)
        const ev=new Event("click");
        setInterval(()=>last.dispatchEvent(ev),1000)
        // setInterval()设置定时器
    </script>
</body>

事件代理的实现原理

事件代理也叫事件委托；
事件代理本质上就是将应该在子元素触发的事件，委托给父元素来执行，可以极大的简化代码和业务逻辑；
原理：：利用冒泡原理，把事件添加到父级，触发执行结果；
true：表示捕获阶段；false：表示冒泡阶段；
捕获是由外向内执行的，而冒泡是由外向内执行的；
根据冒泡原理，子元素的同名事件会冒泡到父元素的同名事件上，所有可以直接将事件添加到他的父元素上；

实例演示：

    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
    </ul>
    <script>
        document.querySelectorAll("li")
        .forEach((item)=>item.addEventListener("click",(ev)=>console.log("触发%s，绑定%s",ev.target,ev.currentTarget),false));
        document.querySelector("ul")
        .addEventListener("click",(ev)=>console.log("触发%s，绑定%s",ev.target,ev.currentTarget),false);
    </script>

事件的添加方式

事件添加方式，事件监听；

事件代理的实现原理

相关文章