00:00
Hello,大家好,这个小节我们来把函数呢封装实现一下。以一个案例呢为依托来去实现。我们想为u Li当中每一个Li呢绑定一个事件,并且在点击完之后能够在控制台输出标签当中的文本。我们要使用事件纬度的形式来实现好了。首先我们先把最终的形式先写出来。调用函数。绑定时间。A啊,ER,注意。这是一个自定义函数啊,虽然名字呢,跟我们DO2里边那个绑定事件方法是一样的,但是这是一个自定义函数。待会儿我们会在左侧去声明它。那么参数的话,咱们有几个啊,第一个是负极元素它的选择器。当然在这的话,你也可以把时间对象ul这个对象传进来也行。我这呢,为了方便先把它拿进来,这功能咱们会实现。第一个啊是负极元素选择器,第二个呢是绑定事件的类型。
01:04
第三个是事件处理程序。当然,我们在这也可以传递事件对象。一。还有最后一个参数,最后这个参数呢,是我们要给啊。绑定元,绑定事件那个元素,它的选择器放进来。现在我们是想给Li绑定时间,所以我们可以直接在这写一个Li搞定。啊,在里边输出内容。啊,标签文本。来一个log打印一下啊,这个this.inner HTML。好,现在的话,它如果执行肯定是不好使的啊,咱们可以运行试一下。因为咱们没有封装这个函数。可以看这。啊,它这个地方的话有问题啊,所以说的话,咱们接下来怎么办呢?把它这个函数加一加。发。有几个参数,第一个参数呢,是事件这个选择器啊,就是负极元素选择器E,第二个呢是类型type,第三个呢是回调。
02:09
然后第四个呢,是啊,咱们子元素的选择器好。我把它拿过来。那里边儿我们做什么事情呢?首先第一步呢,我们应该先把这个字符串的内容呢,应该变成我们的事件源。所以说在这块啊,我来判断一下EL的一个类型。如果说他要是一个字符串。像当前这种情况,它是个字符串,我们应该把这个EL变成一个对象啊,就是这个元素对象。好,我们来一个EL等于一个document.query select。将A1放进来。这样的话,我们就拿到了谁啊,拿到了实件源了。这个时候翻过来。有了E,咱们打开浏览器去看一看效果,刷新页面。
03:00
看这啊,Ul就有了。Ul有了之后呢,接下来的话,我们开始呢,去进行事件绑定。世间绑定这块我们分两种情况啊,一种情况是传了子元素的。一种情况是没有传子元素。如果说没有传子元素,就相当于呢,是给整个ul来绑定事件。假如说你要是啊,传了Li了,那我们就做事件委托啊,就是传了子元素这个选择器了啊,我们就做事件委托。啊,只有说你去点击这个Li的时候才会触发事件。所以说咱们这做一个判断。如果说select。你呢,没传?没船的话,形式就是这样子的。啊,第一个参数是这个元素,第二个呢类型,第三个是事件的回调。就相当于呢,我们要给ul。去绑定事件。我们就不给这个LY去做判断了。
04:00
啊,所以说呢,咱们这就直接给他去绑定事件,那如何直接给EL绑定时间绑定事件呢?来简单啊,直接el.a listener。第一个呢是时间类型type,第二个呢是时间回调FN。啊,这是没有传的啊,若没有传递子元素的选择器。则。啊,就是给。EL元素绑定事件。那么假如说他传了呢?像当前这种情况,他传了传了怎么办呢?传了的话呢,我们在绑定事件时也是给EL去绑。因为事件委托啊,在绑定事件时也是给复元素去绑的,只是在事件处理程序当中,我们应该做一下判断啊,看这个就是真正触发这个事件源呢,它到底跟选择题呢,相匹配还是不相匹配。如果不想匹配,我就不执行,如果匹配了你就执行。
05:02
所以说我们这这样来做el.a listener。还是类型,但是呢,回调这块我们就要发生一些变化了。咱自个儿写。啊,咱自个儿写啊。你把这个代码都抛开啊,就把这些代码统统抛开,你就光看这行代码。啊,你看他这个意思就是我们要给ul去绑定一个单击事件。那点完是点完这个ul之后,咱们要做什么事情呢。点完ul之后啊,我们应该要判断一下当前你所点的是不是Li。啊,你如果是Li的话,那好我就为你去执行回调。回到搁这放着,如果你点的不是。Li,你可能点的是一个div。那么这时候呢,我就不为你去执行回调。这样的话,我们就成功的为Li呢去绑定事件。就是变相去绑定事件。
06:01
好,所以在里边的话,我们要先做一个事情,就是获取点击的这个啊事件源。这个目标的事件源。你点的到底是谁?啊,我们把它获取到,那这个呢,怎么获取呢?哎,我们可以用这个。E这个事件对象。来获取到这个目标元素。获取到之后呢,下边一步我们就可以根据这个点击的目标元素。去看看它呢,到底与传入的子元素选择T到底相不相匹配?比方说我点Li,那它应该是匹配的。那如果说我点div呢,啊,它就不匹配。而我们的目标是要给Li绑定时间,所以说应该判断一下当前锁点元素它与选择题是否相符。怎么来判断是否相符呢?仙侠注释。判断选择器。
07:00
与目标元素。是否相符?香。符合。好,那么这里的话呢,我们可以用一个方法就是matches。然后呢,来一个select。注意啊,Target这个是什么呢?它是一个。元素对象。我们可以呢,把它先输出打印一下,大家先看一看。好,点开刷新页面。点击A。点击B。你可以看一下,点击E。我们是能够拿到这个元素对象的。那有了元素对象之后呢,我们调用一下matches。然后呢,去判断一下它和所给定的选择器是不是相符。如果说给与与给定的选择题相符的话,就会返回一个针。反之呢,返回一个false。如果美甲,其实咱们什么事都不用做啊,如果说符合。
08:00
啊,若符合。则咱们调用谁呀,调用回调就可以了。那怎么来调用回调呢,回调在这儿呢啊FN。FN点,然后呢。我们用这种方式来去执行回调函数,那这个回调在哪呢?在这呢,大家看这。大家看这。这是那个回调,因为它呢传递给了FN,然后我们在那调去调用一下FN。那这个FN的执行的时候呢,它this很重要。This指向谁呀?事件源?啊,以当前代码来为例啊,就是你把左边这个抛开,你光看右边this,其实应该指的是咱们点击的那个元素。而在这个封装代码当中。我锁点元素是谁呢?就是这个target。所以说我们应该把this呢指向啊。给它放到target上边。
09:00
并且这个函数在执行时啊,它有一个参数,你看这。这个参数是啊,事件对象E。那我们在这儿可以把绑定给这个ul那个事件对象。然后给谁啊,回调让他去执行。然后就完成了。来测试一下,看好使不好使,切过来刷新页面,然后点击abcd,没有问题,点E,你看它不好使。啊,这样的话呢,就实现了我们的事件委托这样一个效果了。好了,那关于这个函数的一个封装,我们就先到这儿。
我来说两句