浅谈Javascript事宜托付（代办）

2019年8月26日 212次阅读 来源: 条件状语从句

起首祝人人七夕快活。。
假如如今有一个的列表，内里能够会有若干个列表项。如今要为每个列表项绑定雷同的点击事宜，如今你能够会有这几种做法：

  1. 手动为每个列表项绑定事宜；

  2. 在onload的时刻，找到该列表，对其每个子元素举行遍历，轮回绑定事宜；

  3. 给每个列表项雷同的类名，一次性对其举行绑定。

要领1： 关于5个之内的列表项还好，假如列表有许多，比方100+，那末这类要领很不现实，代码会异常多，而且难以保护。
要领2： 代码量看上去应当不多，然则同样会难以保护，假如是动态天生的列表项，很有能够会出现题目。最主要的，假如有大批列表项，机能会变得非常蹩脚。
要领3： 原生JS不能直接挑选class就不说了，纵然经由历程婚配className的要领举行绑定，其机能只会比要领2还要差。

综上所述，JS完了（误）。

开顽笑啦，js供应一种要领叫做**事宜托付**。

在讲事宜托付之前，我们无妨先相识一下事宜的三个阶段（对事宜冒泡有所相识的可跳过此段）：

捕捉阶段——众里寻他千百度：
事宜从文档根节点动身，跟着DOM构造向事宜的目的节点寻觅。途中经由各个条理的DOM node，并在各node上触发捕捉事宜，直到抵达时候的目的node。

目的阶段——终究比及你，还好我没摒弃：
事宜抵达目的node，在目的node上被触发。

冒泡阶段——山谷覆信：
事宜在目的node上触发后，将由DOM树一层层向上冒泡，顺次触发，直到抵达最外层的根节点。这是时候托付所运用的特性。

请原谅我用这么文艺的体式格局给人人报告事宜触发的故事。O(∩_∩)O

晓得了事宜冒泡的历程，就很轻易邃晓事宜托付的运作道理。当列表项的事宜冒泡到父元素（即列表元素）时，能够检察事宜对象的target属性，catch真正被点击的节点元素。下面是一段简朴代码展现了这个历程：

     
   document.getElementById("list").addEventListener("click",function(e) {
        if(e.target && e.target.nodeName == "LI") {
            //TO DO SOMETHING
        }
    });

解释一下代码： 取得父级元素list，为其绑定点击事宜：假如子元素（列表项）被点击，当事宜冒泡到list时，推断目的节点（事宜泉源）是不是为li元素，假如是则触发该事宜。
一样平常的例子： 假如你是一名小学班主任，你制订了一个划定规矩：假如班里有人早恋就必须遭到责罚（定义了事宜触发后实行的函数）。然则门生的活动范围是全部学校而不是局限于一个班，所以你就每天在学校里散步（将事宜绑定到父级元素）。倏忽看到有门生在接吻（事宜句柄），你须要推断这个门生是不是是本身班里的，假如是，请暴揍他一顿（触发事宜，他照样个孩子，请不要放过他）。

固然，在真正的现实运用中或许没有这么简朴，你或许只须要个中部份子元素绑定事宜；或许还要斟酌浏览器兼容的题目（在IE里目的元素放在srcElement属性中而不是target中，所以最好把取得目的元素写成一个跨浏览器的函数）。不过无论如何，你不须要为不确定的DOM而常常转变你的绑定，更不会由于过量的绑定致使机能的下降，大大下降崩溃的风险。

    原文作者：条件状语从句
    原文地址: https://segmentfault.com/a/1190000003115832
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞