摘要:说明上次我们说了一些,关于中事件委托的基础知识,这次我们继续来看。可选类型,一个选择器,用于指定哪些后代元素可以触发绑定的事件。类型,指定的事件处理函数。
说明
上次我们说了一些,关于 JavaScript中事件委托的 基础知识,这次我们继续来看。
解释先来一段代码
- 1
- 2
上面这段代码,用了事件委托,把事件绑在了ul上,没有给每个 li 都去绑定事件,看上去也是实现效果了,但是如果 li 里面还有子元素,那么这么去绑定事件就不行了,当点击 li 里面的子元素时,就出现问题了。
比如,我们把上面的代码改成这样,看看效果。
- 1
- 2
效果图
看图,当点击 蓝色 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( )
- 1
- 2
效果图
看图,现在这样,不管是点击 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( ) 方法实现下,最开始的例子
- li{
- padding:20px;
- background:red;
- }
- span{
- padding:10px;
- background:blue;
- }
-
-
- 1
-
- 2
-
- $("#ul").on("click","li",function (){
- console.log("li 被点击了");
- });
更加详细的关于 JQuery中on( )方法的解释,推荐看这里
jQuery.on() 函数详解
用到 事件委托 的地方,应该还是比较多的,希望大家都能理解这个东西。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/51659.html
摘要:说明这篇文章说中的事件委托,这次先说一些比较基本的知识。第一段绑定了两次事件,第二段绑定了一次事件也就是说,原来在上绑定的事件,现在委托在了父元素上,而在上只需要绑定一次就可以了。我们用事件委托的方式,再来改改。 说明 这篇文章说JavaScript中的事件委托,这次先说一些比较基本的知识。 事件委托 是什么 先来看看事件委托的概念 事件委托就是利用事件冒泡,只指定一个事件处理程序,就...
摘要:说明这篇文章说中的事件委托,这次先说一些比较基本的知识。第一段绑定了两次事件,第二段绑定了一次事件也就是说,原来在上绑定的事件,现在委托在了父元素上,而在上只需要绑定一次就可以了。我们用事件委托的方式,再来改改。 说明 这篇文章说JavaScript中的事件委托,这次先说一些比较基本的知识。 事件委托 是什么 先来看看事件委托的概念 事件委托就是利用事件冒泡,只指定一个事件处理程序,就...
摘要:说明上次我们说了一些,关于中事件委托的基础知识,这次我们继续来看。可选类型,一个选择器,用于指定哪些后代元素可以触发绑定的事件。类型,指定的事件处理函数。 说明 上次我们说了一些,关于 JavaScript中事件委托的 基础知识,这次我们继续来看。 解释 先来一段代码 1 2 ul.onclick...
阅读 2080·2021-11-08 13:22
阅读 2545·2021-09-04 16:40
阅读 1189·2021-09-03 10:29
阅读 1751·2019-08-30 15:44
阅读 2150·2019-08-30 11:13
阅读 2827·2019-08-29 17:07
阅读 2002·2019-08-29 14:22
阅读 1284·2019-08-26 14:00
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要