简单说 JavaScript中的事件委托(下)

bang590 发布于2019-08-21 18:30 / 857人阅读

摘要：说明上次我们说了一些，关于中事件委托的基础知识，这次我们继续来看。可选类型，一个选择器，用于指定哪些后代元素可以触发绑定的事件。类型，指定的事件处理函数。

说明

上次我们说了一些，关于 JavaScript中事件委托的基础知识，这次我们继续来看。

解释

先来一段代码

上面这段代码，用了事件委托，把事件绑在了ul上，没有给每个 li 都去绑定事件，看上去也是实现效果了，但是如果 li 里面还有子元素，那么这么去绑定事件就不行了，当点击 li 里面的子元素时，就出现问题了。
比如，我们把上面的代码改成这样，看看效果。

效果图

看图，当点击蓝色 span 的时候，没有打印 li 被点击了，当点击红色 li 的时候，才都打印出来，这是因为当点击 span 的时候，事件源是 span，虽然也能触发事件，但是并没有走 if判断，所以就不会打印 li 被点击了，当点击 li 的时候，事件源是 li ，所以就可以了，但是我们往往需要的是，不管是点击li，还是点击了 li 的子元素，都需要执行操作。
好的，我们来改改代码。
这次我们需要 Element.matches( ) 这个方法，

作用：
判断当前DOM节点是否能完全匹配对应的css选择器规则；如果匹配成功，返回true，否则返回false。

语法：

let result = element.matches(selectorString);

result 的值为 true 或 false
selectorString 是个css选择器字符串

举例：

 这是一个div元素

至于更多关于 Element.matches( ) 方法的细节，和对于不支持 Element.matches( ) 方法的浏览器的替代方案，请到这里查看
Element.matches( )

效果图

看图，现在这样，不管是点击 li 还是 li 的子元素，就都可以打印出内容了。

jQuery中的事件委托
jQuery中事件委托主要是靠on( ) 方法，我们先来看看 on( ) 方法的使用说明

on( ) 方法主要有以下两种形式的用法
用法一

jQueryObject.on( events [, selector ] [, data ], handler )

用法二

jQueryObject.on( eventsMap [, selector ] [, data ] )

参数	描述
events	String类型，一个或多个用空格分隔的事件类型和可选的命名空间，例如"click"、"focus click"、"keydown.myPlugin"。
eventsMap	Object类型，一个Object对象，其每个属性对应事件类型和可选的命名空间(参数events)，属性值对应绑定的事件处理函数(参数handler)。
selector	可选/String类型，一个jQuery选择器，用于指定哪些后代元素可以触发绑定的事件。如果该参数为null或被省略，则表示当前元素自身绑定事件(实际触发者也可能是后代元素，只要事件流能到达当前元素即可)。
data	可选/任意类型，触发事件时，需要通过event.data传递给事件处理函数的任意数据。
handler	Function类型，指定的事件处理函数。

我们再用jQuery的 on( ) 方法实现下，最开始的例子

更加详细的关于 JQuery中on( )方法的解释，推荐看这里
jQuery.on() 函数详解

总结

用到事件委托的地方，应该还是比较多的，希望大家都能理解这个东西。

服务器托管 idc机房托管 javascript事件委托委托事件事件委托事件委托c

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90534.html

简单说 JavaScript中的事件委托（上）

摘要：说明这篇文章说中的事件委托，这次先说一些比较基本的知识。第一段绑定了两次事件，第二段绑定了一次事件也就是说，原来在上绑定的事件，现在委托在了父元素上，而在上只需要绑定一次就可以了。我们用事件委托的方式，再来改改。说明这篇文章说JavaScript中的事件委托，这次先说一些比较基本的知识。事件委托是什么先来看看事件委托的概念事件委托就是利用事件冒泡，只指定一个事件处理程序，就...

yankeys 2019-08-05 12:41 评论0 收藏0
简单说 JavaScript中的事件委托（上）

摘要：说明这篇文章说中的事件委托，这次先说一些比较基本的知识。第一段绑定了两次事件，第二段绑定了一次事件也就是说，原来在上绑定的事件，现在委托在了父元素上，而在上只需要绑定一次就可以了。我们用事件委托的方式，再来改改。说明这篇文章说JavaScript中的事件委托，这次先说一些比较基本的知识。事件委托是什么先来看看事件委托的概念事件委托就是利用事件冒泡，只指定一个事件处理程序，就...

fireflow 2019-08-29 14:07 评论0 收藏0
简单说 JavaScript中的事件委托（上）

摘要：说明这篇文章说中的事件委托，这次先说一些比较基本的知识。第一段绑定了两次事件，第二段绑定了一次事件也就是说，原来在上绑定的事件，现在委托在了父元素上，而在上只需要绑定一次就可以了。我们用事件委托的方式，再来改改。说明这篇文章说JavaScript中的事件委托，这次先说一些比较基本的知识。事件委托是什么先来看看事件委托的概念事件委托就是利用事件冒泡，只指定一个事件处理程序，就...

SexySix 2019-08-21 18:29 评论0 收藏0
简单说 JavaScript中的事件委托(下)

摘要：说明上次我们说了一些，关于中事件委托的基础知识，这次我们继续来看。可选类型，一个选择器，用于指定哪些后代元素可以触发绑定的事件。类型，指定的事件处理函数。说明上次我们说了一些，关于 JavaScript中事件委托的基础知识，这次我们继续来看。解释先来一段代码 1 2 ul.onclick...

MasonEast 2019-08-01 18:20 评论0 收藏0
简单说 JavaScript中的事件委托(下)

摘要：说明上次我们说了一些，关于中事件委托的基础知识，这次我们继续来看。可选类型，一个选择器，用于指定哪些后代元素可以触发绑定的事件。类型，指定的事件处理函数。说明上次我们说了一些，关于 JavaScript中事件委托的基础知识，这次我们继续来看。解释先来一段代码 1 2 ul.onclick...

objc94 2019-08-05 12:41 评论0 收藏0
简单说 JavaScript中的事件委托(下)

摘要：说明上次我们说了一些，关于中事件委托的基础知识，这次我们继续来看。可选类型，一个选择器，用于指定哪些后代元素可以触发绑定的事件。类型，指定的事件处理函数。说明上次我们说了一些，关于 JavaScript中事件委托的基础知识，这次我们继续来看。解释先来一段代码 1 2 ul.onclick...

lavnFan 2019-08-29 14:09 评论0 收藏0