jQuery替换element元素上已经绑定的事件

转：http://www.popo4j.com/article/jQuery-replace-element-binding-event.html

jQuery如何重新绑定已经绑定的事件?虽然我们现在推荐行为分离,渐进增强,但在很多遗留系统里还是存在很多这样的代码

<input type="button" value="ClickMe" id="btn1" onclick="foo()" />

就是直接在DOM元素上绑定事件

这样做有很多缺点

1.代码高度耦合

2.增加HTML大小

3.书写不了逻辑性很强的代码

这种绑定事件的方法太丑陋了,我们看看jquery等框架是如何绑定事件的?

$("#btn1").click(function(){foo();});

当然在新系统里面我们可以直接绑定事件,但对于这种直接在elments上通过onclick(),onchange()来绑定事件的遗留的系统怎么办？

来看jquery如何巧妙的实现替换elements已绑定事件

 ("#btn1").unbind('click').removeAttr('onclick').click(function() {alert('The method has invoked by Jquery.');});

我们分析下核心代码

我们先通过jQuery的unbind()方法解绑click事件,然后removeAttr(“onclick”),

就能把onclick属性给去掉了

然后通过jQuery的bind()或者直接click()来重新绑定我们的click事件