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

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事件