Saturday, October 9, 2010

jquery 事件处理研究(1)

jquery 事件绑定很好用,
不过处理事件冒泡、后续事件执行逻辑很是纠结。
总结已知的逻辑如下。


jquery 的事件提供以下方法处理相关逻辑:

1. ev.preventDefault -> 阻止浏览器绑定到当前 node 的默认行为,比如 a 链接的 click 事件默认会跳转
2. ev.stopPropagation -> 阻止冒泡,即当前 node 的 parentNode s 绑定的同类型事件不会被触发
3. ev.stopImmediatePropagation -> 阻止当前 node 同事件类型 后续函数的触发,会自动调用 ev.stopPropagation() ,
    比如给 #a 绑定了 5 个 click ,当第 2 个函数调用了 ev.stopImmediatePropagation() 以后,后面的 3 个函数都不会被调用,
    并且这个 click 事件也不会再冒泡了。
    如果只想阻止后续函数的触发而不阻止冒泡(假如有这需求呢),那么可以设置
        ev.isImmediatePropagationStopped = function () {return true;}; 即可。
4. return false -> 如果事件处理函数返回 false ,那么 jquery 会自动调用 ev.stopPropagation() 和 ev.preventDefault() ;
    但是后续函数会继续执行 :(

以上描述在正常的 .bind .click 等方法中正常,在 .live 和 .delegate 稍有不同

1. 在 .live 的事件处理函数中 return false ,行为不仅仅是上面描述的,还会产生类似 ev.stopImmediatePropagation() 的效果,
    即后续的 live 事件都不执行了;
2. 在 .live 的事件处理函数中想阻止后续函数的执行,只能 return false ;
    但是这样有个副作用就是 jquery 会自动调用 ev.stopPropagation() 和 ev.preventDefault() ,这个行为没法改变!!!!



纠结的事情啊
望同样纠结、研究过的一起探讨


参考:


1 comment:

Anonymous said...

我的理解,一个是预绑定,一个是即时绑定