点击事件on和onclick 两者之间的区别(很重要)

发布时间 2023-04-02 21:43:55作者: 斯斯20222

点击事件on和onclick 两者之间的区别

左又

于 2018-04-20 09:20:36 发布

10897
收藏 5
分类专栏: js
版权

js
专栏收录该内容
45 篇文章0 订阅
订阅专栏
点击事件on和onclick 两者之间的区别(很重要)
第1种事件

$('.XX').click('.xxx',function() { alert('xxx') });

 


第2种事件

$('.XXX').on('click','.xxx', function() { alert('xxx') })

 


click是点击事件,但是在页面加载完之后,jquery事件新添加的元素,用click的话是无法获取元素的,这个时候要用on去获取元素事件,简单的说页面加载完成时候页面显示的元素可以用on,也可以用click,但是页面加载完成之后后期再追加的元素只能用on。

这两个事件的区别之处在于:
简单的说页面加载完成时候页面显示的元素(DOM节点已全部加载完)可以用 on , 也可以用click ,

但是在页面加载完成之后后期再追加元素(DOM节点元素还没完全显示出来)只能用on

解释一下:

$('.AAA').on('click','.bbb', function() { alert('bbb') })

 

获取class 为bbb元素的上一级(或父级)元素,选择click的方式,执行回调函数function ()并运行弹出元素bbb,这里的on,元素bbb如果没全部加载出来。没有直接获取到class为bbb的元素,这个时候它就会去找上一级(或父级)的元素,然后在从上一级(或父级)往下接着再执行,就会找到class为bbb的元素了,就触发了点击事件,并执行事件里面的函数啦 ~

$("p").on("click",function(){
alert("段落被点击了。");
});

 

————————————————
版权声明:本文为CSDN博主「左又」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_29715077/article/details/80013893