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

本文详细对比了jQuery中click与on两种点击事件处理方法的区别。click适用于页面加载完成时已存在的DOM元素,而on则可以捕获动态添加的元素事件。通过实例说明了on如何向上查找最近的已绑定事件的祖先元素,再向下触发指定元素的事件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

点击事件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("段落被点击了。");
 });

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值