114.尚硅谷_JS基础_事件的委派

昨天咱们讲的这个事件，说一下冒泡，然后呢，接下来我们再说一个这个冒泡的一个应用啊，冒泡应用，冒泡其实是一个很好的一个设计啊，很好的设计，我们叫一个什么呢？说一个这个叫做一个事件的一个委派啊，或者叫委任都行，我们这来一个零音事件的委派，我们先来看这是什么意思啊，先来准备一个页面，准备一个页面，我这来写点简单的，直接来什么呢？来一个这个ulu ul给它来一个IDID叫一个这个U1，随便写一个啊U1，然后呢，这里边我来点什么呢？U Li里边没得说了，肯定写的是Li Li里，Li里边我们放几个这个超链接，超链接我来一个这个十超超链接一，诶然后呢，我这来一个这个HRA，直接等于一个这个Java script冒号，一个分号，诶这么一个这个链接保存CTRL运行一下。这块呢，你点它它是没用的，对吧，那没用的啊老明宇写的是Java冒号分号，然后呢，我多写几个二三写一个超链接二，再写一个超链接三啊我这一保存，咱们一刷新不就都OK了呀，诶这个页面是写完了，然后呢，我们来写我们这个代码，那这里边我们要写一个什么呢？写一个先写一个window点一个啊等于个这个function，等于function，怎么老写中号是等于一个function function这里边我来做一件什么事呢？哎，你看我这里边是不是有很多长链接呀，哎，我要干嘛呢？我要嗯为我的这个每一个超链接都绑定一个这什么呀，单接想要函数啊，为每一个超链接都绑定，那这块我要怎么绑定。

诶，那我是不是先得获取啊哎，获取我们这个所有的这个所雷直接来一个哦，直接来什么呢？挖一个这个诶OA吧，所雷等于一个这个do的点一个get and，摆这个tag name来一个AAA有了，然后呢，我来干嘛呀，你要绑定我是不是得变历啊，诶变历直接for循环Y一个这个I等于零，然后这个OAAI小于我们这个所有的A，点一个这个LIS，然后来一个I加加，然后呢，直接OA中号i.on click等于一个这个function，哎，等于这个function，哎呦呵。

等于一个这个方程，方个呢，这里边我来写一个，直接来一个alert，哎，Alert我是这个，诶A的这个单击响应函数随便写一个，然后呢，我这一保存，咱们来看效果啊，现在一刷新我一点走你，诶我是A的单向函数是不是出发了，诶这我一点走你是不是也触发了，诶这一点看是不是也触发了呀，诶就都触发了一个单价，还是这一块就绑定完了，这个有点像谁呢？是不是我们之前做那个添加删除记录那个练习上，诶也是给所有的A绑定单击函数，但是这么绑定它有什么问题啊，我们来看那现在的功能比较简单，那这块呢，我可能我希望给它加这么一个按钮，来一个BT tu button来一个这个ID，等于一个这个BTN0一来什么呢？我要来一个添加超链接啊，添加超链接也就是说我希望我一点击这个按钮以后，我在这个页面里干嘛呀，我是不是给它加一个超链接呀，诶加一个超链接啊来那这里边呢，我们来试一下，直接呢我先来获取。

点击我们这个按钮以后，我要添加这个超链接，这功能就比较简单了，我是不是先给给那个按钮绑定单减数画一个B填零一等于一个do的，点一个guide and100id来一个B填零一，然后呢，B天01.1个uncle Li等于一个这个function function呢，首先alert一下，看看好不好使alert一个来诶添加一个好链接，然后一保存他们来看效果，这以刷新走，你是不是添加了呀，但是还没进来呢，是吧，我们还没有去写，那在这里边呢，我来创建一个超链接，创建一个这个LY吧，诶我添加不是超链接，是一个Li，超链接是在这个Li里边啊，LY里边直接发一个Li，等于一个document，点一个create，一个element，来一个LY，这时候来一个LY啊，然后我就直接了啊Li点一个inner h填毛等于谁呢？诶等于这个，诶我直接复制一个标签过来。

这样是不是就省好多事了啊，你不用再去创建A还有这个添加属性了啊，但是你得把这个双引号改成这个单引号，或者你改外边的也行啊，改外边也行，那现在这Li创建完了，那接下来呢，我来直叫出链接一了，改个名吧。这个叫一哦，叫一个哦，那单引号长这模了是吧？新建的这个好链接，单引号长得挺可爱是吧？来这来一个单引号，好，那接下来呢，我们来说了，接下来我们要将这个LY是不是添加到我们这个UR中啊UI中，那我在外边呢，来获取一个ul，直接挖一个这个U1，刚才给它ID等于document的点一个get的100ID，来一个U1 u1是不是有了呀？把Li添加到ul中，直接U1，点一个aend的child Li是不是进去了呀，现在我一看效果刷新一点，是不是就多出链接了一点，是不是又多一个，诶一点又多一个，但是这些新加新加入的超链接有什么问题呢？这些超链接是不是都有单项函数啊，但是新加入的那些呢，他是不是都没有啊，为什么呀，因为我单击项应还是绑定之前绑定的时候他们是不是还没有呢？诶我绑定的时候只有那。

这三个，所以我只有给这三个绑定了，但是你这三个什么呀，后来的，但是他们是不是就没有功能了呀？哎，那这块就带来了一个问题，后来的超链接是没有那个什么呀，事件啊，是没有时间的，这是一个问题，还有一个什么呢，我们来说一下啊，那这里呢，我们为每一个这个超链接都干嘛呢？都绑定了一个这个单接响应函数啊，为每一个超链接都绑定一个单项函数，也就说我有十个超链接，我是要绑定十回啊，我有100个超链接，我就要绑定100回，有几个我是不是就得绑定几个呀？诶这种操作呢，它干嘛呀，它比较麻烦啊，比较麻烦，而且什么呢？而且这一些操作只能什么呢？只能为我们这个已有的，已有的这个什么呀，超链接设置什么呀，设置我们这个呀，事件，而什么呢？而我们这个先添加。

的这个超链接什么呀，还必须得就是重重新重新绑定了，哎，重新绑定，所以如果你需要你这些新疆的超链接有事件，你还得把这些单机项数给这些传链接，是不是再绑定一遍呀，那这块就带来一个问题，这是不是有点太麻烦了，我要有100个传链接，我就绑定100次，我有1000个链接，我就绑定1000次，这样你你即使不嫌麻烦，这种呢，它性能干嘛呢，它也不好啊，性能也不好，所以这种方式呢，咱们不推荐你去用啊，不推荐你用，那么说你不让我用这个，那我用什么方式，当然你临临时用两下也行啊，但是我们就要想一些什么呀，更好的方式，那我们希望什么效果，我们希望干嘛呢？只只注意啊，只绑定一次事件啊，只绑定一次事件即可什么呢？即可应用到什么呀，所有的这个。

元素上或者不一定是所有的，用到什么呢？多个元素上，哎多个元素上即使什么呢？即使元素是什么呀，是后添加的，哎，是后添加的，我希望的是这个效果，我只绑定一次，诶即个什么呀，用到多个元素上，即使这个元素是后添加的，那这块怎么办？我想只绑定一次，我只绑咱们先不管这后添加的吧，我们先说只绑定一次，现在我超链接，我是要绑定三次呀，第一个绑定一次，第二个绑定一次，是不是第三个绑定一次，诶比较麻烦，我希望什么呢？只绑定一次，然后呢，我点这三个抽辆机还都有反应。

那怎么办呢？怎么办呢？诶，那我们可以什么呢？我们可以来尝试将其绑定给我们这些元素什么呀，共同的这个什呀，负元素，诶，或者叫祖先元素，那我们来看现在对于我们这个超链接来说，离它最近的祖先元素共同的是谁呀？是不是UI u l Li，可不是啊，Li他们是各有各的LY吧，唯一相同的其示谁啊，是UL，那我想一想，我如果把这个事件绑定给u Li是一个什么效果呢？来咱们看看吧，我为这个ul来绑定一个这个单阶响应函数啊，直接来一个，来一个什么呢？Ulu UE啊，UE点一个on click等于一个这个function式，诶其实这样我直接来写什么呢？Alert alert一个，诶，我是这个ul的这个单击响应函数，注意这个事件绑定给谁了，Ul是谁，是A的祖先。

快速吧，好，那现在我们来看我这一刷新这一块应该都是ul，我一点上就触发了呀，那现在问你了，我点A会不会触发，会不会触发，会不会啊，诶因为什么呀，因为A是我们这个ul的后代吧，你点击后代会干嘛呀，冒泡的祖先吧，所以你点你点击A它会干嘛呢？从A冒到Li，再从Li是冒到这个u Li，诶所以这块一点击A1保存。

是不是触发了，诶一点击这个，一保存是不是也触发了呀，一点击这个是不是也触发了呀，你会发现我绑定了几次呀，我是不是只绑定了一次呀，只绑定了一次，但是我们说这三个是不是都有了呀？哎，都有了，那我问你了，不仅他们三个有了，我新加入的有没有一点是不是也有了呀？再加一个是不是也有啊，为什么有啊，他们是不是都是那个ul的后代呀？诶你会发现什么呀，我绑定一次是不是全都有了呀？诶全都有了，那这个叫什么呀？就叫一个事件的委派啊，就叫一个事件的一个委派，那什么叫委派呀，就是什么呀？那你现在看我是不是整个把这个事件都绑定给他们的这个祖先元素了，这样谁去触发，是不是都会导致祖先源头上的事件里被触发呀，哎，所以这块我们叫什么呢？叫做一个事件的一个尾派啊，那我们讲指什么的意思就是什么呢？诶指就是将我们这什么呀，将我们这个事件。

诶统一绑定给什么呢？绑定给我们这个元素的什么呀？共同的这个什么呀？诶祖先元素啊，共同的祖先元素，那这样什么呢？这样当我们这个诶后代元素上的这个事件诶触发时，诶会什么呀？诶会一直诶冒泡到什么呀？诶祖先元素啊祖先元素哎从而什么呢？诶从而通过我们这个祖先元素的这个诶事件哎这个响应函数来干嘛呢？来处理事件，那它的好处什么呀？首先我们来说诶件委派是什么呢？诶是利用了我们这什么呀，利用了乐意利应用利用了我们这什么呀？诶冒泡，如果没有冒泡委派这个事儿，我们知道做不到的啊，它是利用了冒泡，他可通过委派我们可以什么呀？诶可以减少我们。

这个什么呀，事件绑定的这个次数啊，可以减少我们这个事件绑定的次数，提高什么呢？提高我们这个程序的一个这个性能啊，提高我们的程序性能，所以这个呢，是一个诶比较高级的一个使用方式啊，我们推荐大家以后遇到这种问题的时候，类似的问题可以采用这么一种方式啊，这种方式那同学说了，老师呢，现在你这些A有共同的组织碳元素，如果他没有怎么办？可能没有吗？往上倒是不是总得有一个呀，最不济你还找do特对吧？哎，最不济你还找do，所以他总得有一个啊，总得有一个啊，所以这块不用担心，但是可能同学看到这有同学已经怀疑了，这说的什么玩意儿，有没有哪不对的地方啊，点A好使是吧？点A好使对吧，我新添A也很好使，这玩意很完美是吧？但是问题是一样，但就咱们本来咱们就是让的都一样是吧，一样不是问题，问题什么呀。

它不止点A好使吧，你可以发现什么呀，我这ul整个我们来看看吧，给他写一个style标签来一什么呢？来一个background color，来一个这个井号BV，不要设置一个颜色啊，我们看看我这ul多大的，我这一保存咱们来看效果刷新，这ul是整个这么大了，那你添加完了以后，它大小可能还还要增加是吧，整个这个区域随便点哪。他是不是都会出发呀，你不仅给A绑定了，你还给这些Li给u Li是不是也绑定了呀，那这事儿减省事是省事了，但是你这种从一定意义上来讲，你还不如不这么玩呢，是不是就添乱了呀，因为我只想给A绑定这些，我是不是不想绑定啊，怎么办呀，那怎么办呀，那我希望什么呀，那这儿是不是在执行这个想函数啊，我希望在这儿来做一件什么事呢？我们说了，哎如果我们说触发事件的这个对象是什么呢？诶是我们这个什么呀，期望的这个元素则什么呢？则执行，否则呢，是不执行啊，哎，否则不执行也就说什么呀，如果你点的是A，我就干嘛呀，执行，诶如果你点的A我就执行，如果你点的不是A，你点这玩意儿，你点这点去了，我执不执行，我不执行，那问题来了，那我这块是不是得做一个判断呀，我要判断干嘛，我要判断你点的是不是A呀，诶是不是A，那这样。

那么少找一个手势的方式，我给A加一什么呢？我给它加一个这个class，来一个什么呢？就来一个这个，诶来一个这个link吧，诶来一个link，然后呢，我给所有的超链接都加一个class，叫做一个link，包括这个上边这个新加的这个呢，我也给它加一个这个link，诶都加这么一个这个class，诶那你说同学说你加class干嘛？那现在我们先说第一个问题，那现在我们这A9标识了，它是不是有class叫做link呀，还叫link，那回来看我们这一个问题，这什么问题啊，那首先我们说如果触发事件对象是我们期望元素，则执行，否则不执行，那我就要需要先干嘛，我是不是要知道这事件是由谁触发的呀？哎，那我怎么知道有谁触发的，诶我们有一个Z行不行，Z行不行？

这次想想我们说是谁的，这次行不行？诶这次我可没说过是处罚实验对象，这句话我可没说过是吧？那谁呀，这次谁我们说了事件给谁绑定的，这次是不是就是谁呀？那我这事件给谁绑定掉ul，所以我们来看这这次一刷新走你ul对吧？我点超链接是不是也是ul啊，所以注意啊，这次可不是触发事件对象，这次是谁呀，这是绑定那个对象，事件给谁绑定的，这次就是谁，那这次一看就玩用不上了吧，怎么办呢？我要研究事件触发对象，首先咱们说知咱们知道吗？

咱们知道吗？咱不知道，因为这东西最后点是不是用户来完成的呀，事件由谁触发咱们并不知道，但是谁知道，哎，万事通是吧，咱们事件对象是不是应该知道，哎，来咱们看看实验对象里有没有关于我们这个事件出发的。看看啊，在。在这。诶叫什么叫target target什么意思呀？目标叫什么呀？返回触发此事件的元素，那是不是应该就是它呀？诶咱们来看看它是不是啊，看它是不是直接，那既然是事件对象呢，我们就先来干嘛呀，我是不是先来获取我们这个事件对象啊，哎，然后我们就来解决兼容性event，等于一个event或者是一个这个window点一个event啊兼容性问题，然后它里边一个什么呢？有一个这个target直接来一个啊alert一个这个event点一个target来保存，我们来看效果，一刷新我一点这，诶点的什么Li证明我点的是谁呀。

Li是吧，诶点的是Li，我点超链接我一点，诶出来什么呀，正好冒号分号，这是我这个超链接那个那东西啊，诶或者这样咱们对比一下我干嘛呢？我在这呢，给它加一个这个LYLY里边我给它放一个这个什么呀，放个P元素，哎，我是这个P元素，然后我这一保存他们来看一刷新走你P元素对吧，我一点是不是也触发了呀？诶但是他是谁呀。哎，是不是P元素啊，哎，P元素，所以你会发现什么呢？我们这个他给的是谁呢？我点谁是不是他给的就是谁啊，换句话说，Target是什么呢？诶我们说event对象的event中的这个target表示的什么呢？诶表示的是这个触发事件的这个对象，也就是说哎这个事件是由谁触发的，由A触发的就是什么呀，就是A由这个P出发，就是P由这个谁呀，由这个LY出啊是不是就是LY啊，哎，LY那我现在干嘛了，我已经知道谁是触发实验对象了，那我只需要干嘛了，我是不是要。

判断了，哎，如果突发事件对象是我们七望元素，则执行，否则不执行，我直接来一个判断，If什么呢？If，我们这个even第target，那我怎么判断，哎，我是不是给A加了一个这个class呀？哎，Class叫做一个link，因为什么呢？如果target点一个class name等于什么呢？等于等等于我们这什么呀？哎，Link，如果你是link，那证明什么呀，你是A吧，诶你是A我就干嘛呢，我就给你执行，如果你没有这个class，还执不执行了，我就不执行了，来来，我们这一刷新来再带别的有没有用了。没用了吧，一点它走你不是就出来了，诶一点它就出来了，你再新添加，只要有link，它这干嘛呀，是不是就执行了，哎，就执行了啊，所以通过这呢，给他做一个判断啊，做一个判断，但是注意啊，这么写呢，稍微有一点点的，这个稍微有一点隐患，有点隐患当是有隐患呢，因为class我是可以同时写。

写多个呀，假如说我有另后边还有什么呢？还有一个这个hello，这块一刷新是不是不行了呀，那就不行了，有点隐患，当然这里边待会我们以以后去讲一个方法，可以用这个正德表式来解决它啊，正德表式来解决它，那现在我们先不处理这个问题，关注点不在这，但是你要注意这块有一个小隐患，你可以思考一下资己怎么解决，以后我们会讲一个这个方法，用这个方法就行了啊，方法行好，这个呢，是我们说的一个事件的一个委派，我们来听一下。