首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

.on('click')与.click()之间的区别

在JavaScript中,.on('click').click()两者都可以用于处理点击事件,但它们之间存在一些区别:

  1. 事件绑定方式:
    • .on('click'):使用.on()方法绑定点击事件,这是jQuery中推荐的事件绑定方式。
    • .click():使用.click()方法绑定点击事件,这是jQuery中较早的事件绑定方式。
  2. 动态元素支持:
    • .on('click'):支持动态生成的元素绑定点击事件,通过事件委托机制实现。
    • .click():不支持动态生成的元素绑定点击事件,需要在元素生成后再次调用.click()方法绑定事件。
  3. 事件触发方式:
    • .on('click'):可以绑定多个事件处理函数,按照绑定顺序依次触发。
    • .click():只能绑定一个事件处理函数,多次调用.click()会覆盖之前的事件处理函数。
  4. 事件对象传递:
    • .on('click'):在事件处理函数中可以直接接收到事件对象event
    • .click():在事件处理函数中需要手动传递事件对象event

综上所述,.on('click')相较于.click()具有更好的动态元素支持、事件委托、事件触发顺序和事件对象传递等优势,推荐使用.on('click')进行事件绑定。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 解决blurclick冲突

    在开发中我们会经常遇到blur和click冲突情况。下面叙述了开发中常遇到“下拉框”问题,并提供了两种解决方案。...click 二、下拉框blur和click事件冲突,导致不能正常选择值 实际开发中,我们会经常遇到某一下拉列表框,点击其他元素消失列表框;点击下拉框子元素使其生效需求。...由上述示例3,可得知“blur优先于click执行”。而在本示例中,由于blur处理程序,会将对应下拉框展示区隐藏,所以导致其后续click事件并不会执行。上述console信息也不会被输出。...注意: (1)mousedownclick 事件不同,mousedown事件仅需要按键被按下,而不需要松开即可发生。...(2)mouseupclick事件不同,mouseup事件仅需要放松按钮。当鼠标指针位于元素上方时,放松鼠标按钮就会触发该事件。

    1.8K20

    解决blurclick冲突

    在开发中我们会经常遇到blur和click冲突情况。下面叙述了开发中常遇到“下拉框”问题,并提供了两种解决方案。...click 二、下拉框blur和click事件冲突,导致不能正常选择值 实际开发中,我们会经常遇到某一下拉列表框,点击其他元素消失列表框;点击下拉框子元素使其生效需求。...由上述示例3,可得知“blur优先于click执行”。而在本示例中,由于blur处理程序,会将对应下拉框展示区隐藏,所以导致其后续click事件并不会执行。上述console信息也不会被输出。...注意: (1)mousedownclick 事件不同,mousedown事件仅需要按键被按下,而不需要松开即可发生。...(2)mouseupclick事件不同,mouseup事件仅需要放松按钮。当鼠标指针位于元素上方时,放松鼠标按钮就会触发该事件。

    3K31

    Android触摸事件和mousedown、mouseup、click事件之间关系

    2、Touch事件Mouse事件出发关系 在触屏操作后,手指提起一刹那(即发生ontouchend后),系统会判断接收到事件element内容是否被改变,如果内容被改变,接下来事 件都不会触发...,如果没有改变,会按照mousedown,mouseup,click顺序触发事件。...特别需要提到是,只有再触发一个触屏事件时,才会 触发上一个事件mouseout事件。 二、mousedown、mouseup、click事件之间关系 点击select标签元素时候,会弹出下拉。...首先想到是利用click事件控制,发现仍然会有下拉出现…实际这个是mousedown事件控制。 这里就说明下click和mousedown、mouseup。...规范要求,只有在同一个元素上相继触发 mousedown 和 mouseup 事件,才会触发 click 事件;如果 mousedown 或 mouseup 中一个被取消,就不会触发 click 事件

    2.8K30

    移动端web开发,click touch tap区别

    移动端用tap时会有穿透问题 一:clicktap比较 clicktap都会触发点击事件,但是在手机web端,click会有200-300ms延迟,所以一般用tap代替click作为点击事件。...singleTap 和doubleTap分别代表单次点击和双次点击 二:tap穿透处理 使用zepto框架tap点击事件,来规避click事件延迟响应,会出现穿透,即点击会触发非当前层点击事件...1.github上有一个叫做fastclick库,它能规避移动设备上click事件延迟响应https://github.com/ftlabs/fastclick将它用script标签引入页面(该库支持...); }) 然后给需要“无延迟点击”元素绑定click事件(注意不再是绑定zeptotap事件)即可。...也可以不在body上初始化它,而在某个dom上初始化,这样,只有设个dom和它子元素才能享受"无延迟"点击 实践开发中,当元素绑定fastclick后,click响应速度比tap还要快一点。

    2.3K100

    JS篇(028)-移动端 click 事件、touch 事件、tap 事件区别

    参考答案: 1.click 事件在移动端会有 200-300ms 延迟,主要原因是苹果手机在设计时,考虑到用户在浏览网页时需要放大,所以,在用户点击 200-300ms 之后,才触发 click,...如果 200-300ms 之内还有 click,就会进行放大缩小。...2.touch 事件是针对触屏手机上触摸事件。现今大多数触屏手机 webkit 内核提供了 touch 事件监听,让开发者可以获取用户触摸屏幕时一些信息。...3.tap 事件在移动端,代替 click 作为点击事件,tap 事件被很多框架(如 zepto)封装,来减少这延迟问题, tap 事件不是原生,所以是封装,那么具体是如何实现呢?...a click 事件,注意: 我们认为 a 标签默认是绑定了 click 事件

    6.4K40

    进阶必备-Android Click事件是怎么触发

    由于有同学问到onClick和touch事件关系,这里就从源码角度分析下onClick和onLongClickonTouchEvent事件是怎么关联。...二、源码解读 首先我们知道View、TextView、Button三者关系,即:Button继承自TextView,TextView继承自View。...在默认我们不做任何特殊设置时,三者能响应click事件只有Button。这是什么原因呢?...所以,我们猜测是在MotionEvent.ACTION_UP事件后触发click。所以我们直接看if条件中ACTION_UP中逻辑: if (!...然后会通过Post Runable方式将PerformClick实例post到队列中等待处理,不直接去处理click事件而是使用post方式是确保如果有视图相关更新操作完成后再触发performClickInternal

    2.2K20

    移动端click延迟及zepto穿透现象 转

    穿透现象click延迟解决方法是分不开,若要了解穿透现象,需要先了解click延迟解决原理。...解决延迟思路: touchstart touchend是没有延迟,可以在touchend时触发用户想要在click时触发事件. zepto 解决click延迟原理: 自定义tap事件,当用户点击元素时...,touchend事件先发生, 当touchend事件冒泡到document时触发目标元素绑定tap事件 简单模拟zepto tap实现方式(这里忽略touchstarttouchend点击位置判断...事件逻辑 }, false); zeptotap穿透现象: 遮罩层中有一个标签绑定了tap事件,触发时遮罩层消失,该标签正下方有一个绑定了click按钮,此时点击上层标签,同时也会触发下层元素click...下层什么样元素才会形成穿透: 根据原理来说,因为穿透是发生在click发生时,也就是下层绑定了click事件或click时会触发事件(focus focusout)元素,或点击时有默认形为标签元素

    1.3K10
    领券