关于JS 事件冒泡和onclick,click,on()事件触发顺序

今天在给JQgrid中的标签添加click事件的时候，发现一个问题。

JQgrid的table中，点击任何位置，都会勾选点击行的checkbox，而我希望在点击我的标签的时候，不要勾选checkbox。

查看JQgrid源码，发现它的click事件是绑定到了table上，然后判断事件点击目标，找到选中行给它勾选；而我的click事件是绑定到td里面的div中。

按照事件冒泡的触发顺序，应该是我的事件先触发，之后是JQgrid的事件。

结果不是这样的。我发现JQgrid使用$().click(function(){})绑定的事件，而我使用$("body").on("click","",function(){})绑定的事件。

我希望比较一下它们的差别，专门写了一下代码，查看运行结果。

代码如下：

<div id="div_2" οnclick="console.error('onclick_2')"><div id="div_1" οnclick="console.error('onclick_1')">Click this Div</div>
</div>

JS：

    $(function(){$("body").on("click","#div_2",function(){console.error("on bind click 2");});$("body").on("click","#div_1",function(){console.error("on bind click 1");});$("#div_2").click(function(){console.error("click 2");});$("#div_1").click(function(){console.error("click 1");});});

执行结果：

得到结论：

onclick,click,on()的优先关系：onclick>click>on()；

onclick和click绑定的事件，彼此之间遵守事件冒泡规则，从内到外触发；

on()绑定的事件，总是晚于onclick和click绑定的事件触发；

由此可以得到，使用on()绑定的事件与onclick和click绑定的事件，判断触发先后顺序时，不能只考虑事件冒泡规则。

转载于:https://www.cnblogs.com/diaoyan/p/5630014.html

关于JS 事件冒泡和onclick,click,on()事件触发顺序相关推荐

click事件在什么时候出发_关于JS 事件冒泡和onclick,click,on()事件触发顺序
今天在给JQgrid中的标签添加click事件的时候,发现一个问题. JQgrid的table中,点击任何位置,都会勾选点击行的checkbox,而我希望在点击我的标签的时候,不要勾选checkbox ...
事件冒泡详解及阻止事件冒泡
什么是事件冒泡? 事件冒泡:从子元素向父元素触发 ->当某个事件触发时,同样的事件会向父元素触发. 但并不是所有事件都会产生冒泡问题 onfocus. onblur .onload不会产生冒泡问 ...
js /jquery停止事件冒泡和阻止浏览器默认事件
var el = window.document.getElementById("a");el.onclick = function (e) {//如果提供了事件对象,则这是一个非 ...
JS事件冒泡机制和兼容性添加事件
本篇文章主要来讲讲事件的冒泡机制和添加事件的几种方法. 一. JS的时间传递顺序: 捕获阶段 -> 目标阶段 -> 冒泡阶段捕获阶段是指从父层往子层找.比如 <body> ...
JS中绑定事件顺序（事件冒泡与事件捕获区别）
在JS中,绑定的事件默认的执行时间是在冒泡阶段执行,而非在捕获阶段(重要),这也是为什么当父类和子类都绑定了某个事件,会先调用子类绑定的事件,后调用父类的事件.直接看下面实例 <!Doctype ...
JS阻止事件冒泡的3种方法，以及他们之间的不同
什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这 ...
JS中的事件冒泡——总结
一. 有话要说事件冒泡这个话题已经被园子里的朋友说透了,已经没什么要讲的了,但是由于呢我这边有个小问题刚好跟这个事件冒泡有关,就突然性想写个总结:一方面是给自己增加印象,另一方面给园子的新手们,提供 ...
js中事件捕获和事件冒泡
全栈工程师开发手册 (作者:栾鹏) js系列教程8-事件操作全解 js中事件捕获和事件冒泡其实不仅在js中,在面向对象的编程语言中或多或少涉及到这个问题.js编程的事件全解,你可以到我的主页,这里给 ...
JS事件流(事件冒泡事件委托)
DOM事件流事件流描述的是从页面中接受事件的顺序事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流分为三个阶段: 捕获阶段(从上往下,从外往内) 目标阶段冒泡阶段(从下往 ...

关于JS 事件冒泡和onclick,click,on()事件触发顺序

关于JS 事件冒泡和onclick,click,on()事件触发顺序相关推荐

最新文章

热门文章