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

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

1

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

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

这样做有很多缺点
1.代码高度耦合
2.增加HTML大小
3.书写不了逻辑性很强的代码

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

 
1

$("#btn1").click(function(){ 

2
foo();

3
});

当然在新系统里面我们可以直接绑定事件,但对于这种直接在elments上通过onclick(),onchange()来绑定事件的遗留的系统怎么办？
来看jquery如何巧妙的实现替换elements已绑定事件

1

("#btn1").unbind('click').removeAttr('onclick').click(function() { 

2

alert('The method has invoked by Jquery.'); 

3
});

我们分析下核心代码
我们先通过jQuery的unbind()方法解绑click事件,然后removeAttr(“onclick”),
就能把onclick属性给去掉了
然后通过jQuery的bind()或者直接click()来重新绑定我们的click事件.

jQuery替换element元素下已经绑定的事件【转】