JS多播事件处理问题小结
2012-08-19 18:49
447 查看
前段时间在项目开发过程中,遇到了一个JS多播事件的问题,第一次处理这类问题感觉还是挺棘手的,现在把这个问题记录下来,以备将来不时之需。
1、首先,我在页面上画了这么一个表格,用于数据的展现:
页面代码如下:
★需要加以说明的是,在项目需求中,表格的行记录是通过JS动态追加上去的。也就是说,表格可以根据用户需求动态添加行记录。这里我就不贴出使用JS动态追加表格行标签TR代码,原因是JS动态追加的页面代码跟上面贴出的代码结构类似。
2、然后,利用JQuery为表格每行注册鼠标单击选择事件,用以对行记录进行操作
JQuery事件注册代码如下:
使用上面代码注册的鼠标单击选择事件,导致了一个行记录选择失灵的问题:
(1)单击第三条记录,事件正常触发
(2)单击第二条记录,第二条记录和第三条记录同时被选中
(3)单击第一条记录,第一、二、三条记录同时被选中
(4)单击第二条记录时,第二、三条记录会被选中
再单击第二条记录的时候,第二、三条记录会被取消选中,而第一条记录却会被选中
由此可见,鼠标无论单击表格中任意一行,都会触发每一行的事件处理函数。
3、我开始考量JQuery事件注册中可能会导致问题出现的原因。让我感觉嫌疑最大的就是,页面表格在动态追加行记录的同时,都要对表格所有行执行JQuery注册单击事件,或许表格行记录的鼠标单击事件重复注册正是问题的根源。
(1)JQuery的多播事件委托机制
例子:
单击testDiv对象时,依次提示"one"和"two"。JQuery添加多播事件委托,也就是为click事件又添加了一个方法,而且新添加方法不会覆盖对象的click事件原有的事件处理函数。
(2)多播事件的抑制:stopImmediatePropagation()取消执行其他的事件处理函数并取消事件冒泡
如果同一个事件绑定了多个事件处理函数,在其中一个事件处理函数中调用stopImmediatePropagation()方法后将不会继续调用其他的事件处理函数
例子:
(3)多播事件处理在表格行记录注册事件的应用
问题记录到这里,我们已经基本解决了上面提到的问题。以上就是我在项目开发过程中解决问题的一点小收获,和大家一起分享了,希望大家给点批评指正意见。
1、首先,我在页面上画了这么一个表格,用于数据的展现:
页面代码如下:
★需要加以说明的是,在项目需求中,表格的行记录是通过JS动态追加上去的。也就是说,表格可以根据用户需求动态添加行记录。这里我就不贴出使用JS动态追加表格行标签TR代码,原因是JS动态追加的页面代码跟上面贴出的代码结构类似。
2、然后,利用JQuery为表格每行注册鼠标单击选择事件,用以对行记录进行操作
JQuery事件注册代码如下:
使用上面代码注册的鼠标单击选择事件,导致了一个行记录选择失灵的问题:
(1)单击第三条记录,事件正常触发
(2)单击第二条记录,第二条记录和第三条记录同时被选中
(3)单击第一条记录,第一、二、三条记录同时被选中
(4)单击第二条记录时,第二、三条记录会被选中
再单击第二条记录的时候,第二、三条记录会被取消选中,而第一条记录却会被选中
由此可见,鼠标无论单击表格中任意一行,都会触发每一行的事件处理函数。
3、我开始考量JQuery事件注册中可能会导致问题出现的原因。让我感觉嫌疑最大的就是,页面表格在动态追加行记录的同时,都要对表格所有行执行JQuery注册单击事件,或许表格行记录的鼠标单击事件重复注册正是问题的根源。
(1)JQuery的多播事件委托机制
例子:
$("#testDiv").bind("click", function(event){ alert("one"); }); $("#testDiv").bind("click", function(){ alert("two"); });
单击testDiv对象时,依次提示"one"和"two"。JQuery添加多播事件委托,也就是为click事件又添加了一个方法,而且新添加方法不会覆盖对象的click事件原有的事件处理函数。
(2)多播事件的抑制:stopImmediatePropagation()取消执行其他的事件处理函数并取消事件冒泡
如果同一个事件绑定了多个事件处理函数,在其中一个事件处理函数中调用stopImmediatePropagation()方法后将不会继续调用其他的事件处理函数
例子:
$("p")click(function(event){ //event handler code event.stopImmediatePropagation(); }); $("p").click(function(event){ //This event handler function won't be executed });
(3)多播事件处理在表格行记录注册事件的应用
for(var index in app.idLocs) { var checkboxID = app.idLocs[index]; var queryListTD = $("tbody#queryList").find("td."+checkboxID); $.each(queryListTD, function(i, n){ $(queryListTD[i]).click(function(event){ clickTr(checkboxID); event.stopImmediatePropagation(); }); }); }
问题记录到这里,我们已经基本解决了上面提到的问题。以上就是我在项目开发过程中解决问题的一点小收获,和大家一起分享了,希望大家给点批评指正意见。
相关文章推荐
- JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
- js下关于onmouseout、事件冒泡的问题经验小结
- JS中关于事件处理函数名后面是否带括号的问题
- js下关于onmouseout、事件冒泡的问题经验小结
- 原生js解决对象事件处理程序添加和删除的兼容性问题
- js下关于onmouseout、事件冒泡的问题经验小结
- JavaScript事件学习小结(二)js事件处理程序
- js中关于事件处理函数名后面是否带括号的问题
- JS onMouseOut 事件问题的处理方式
- <转>js中关于事件处理函数名后面是否带括号的问题
- JS事件冒泡问题的处理
- JS事件处理程序小结
- JS中关于事件处理函数名后面是否带括号的问题
- js事件处理
- Datagridview的排序和CellEndEdit事件问题处理
- JS中button控件click事件无法响应的问题
- JS--构建自己的函数库之——浏览器兼容问题处理(持续构建中……)
- [问题记录]js将事件写在函数之前解决IE8的兼容性问题
- js 事件流,事件处理程序,事件对象
- 如何妥善处理WebBrowser对Javascript的错误问题,阻止JS弹出框,提高用户体验(原创)