JavaScript 中利用 jQuery 绑定大事的几种方式小结
JavaScript 中利用 jQuery 绑定大事有多种方式，下面将介绍四种常见的方式。
方式一：内联大事
内联大事是将 JavaScript 代码直接写在 HTML 元素的事件属性中，例如 onclick。这种方式简洁粗暴，好处是可以清楚地看到 button 绑定了 click 大事。例如：
`<input type="button" id="btn1" value="OK1" onclick="alert('hello btn1');">`
这种方式的缺点是，一个元素只能指定一个内联大事，添加了这段代码之后会发现 onclick="alert('hello btn1');" 被掩盖了。
方式二：原生 JS 给多个元素绑定大事
原生 JS 给多个元素绑定大事可以使用 addEventListener 或 attachEvent 方法。在 IE 9 之前的版本中，需要使用 attachEvent 替代 addEventListener。例如：
`(function(){
var _btns=document.querySelectorAll("[click-type=listener]"), i = 0, len = _btns.length;
for (i; i < len; ++i) {
var _btn=_btns[i];
_btn.addEventListener("click", function (evt) {
var target = evt.target
alert('hello '+target.id);
});
}
})();`
方式三：使用 jQuery 绑定大事
使用 jQuery 绑定大事可以使用 click 方法或 on 方法。例如：
`$("#btn4").click(function(){
alert("hello btn4");
});
$("#btn5").on("click",function(){
alert("hello btn5");
});`
上面使用到的 on 和 bind 方法效果是一样的。
方式四：使用 jQuery 的 on 方法绑定大事
使用 jQuery 的 on 方法可以给多个元素绑定一个或多个大事。例如：
`$("#btn-list").on("click","input",function(evt){
alert("hello "+ evt.target.id);
});`
这种方式有个好处，例如动态添加元素的时候可以自动添加 click 大事。例如：
`(function(){
for(var i=8;i<10;i++){
$("#btn-list").append("<input type='button' id='btn"+i+"' value='OK"+i+"'");
}
})();`
JavaScript 中利用 jQuery 绑定大事有多种方式，每种方式都有其优缺，开发者可以根据实际情况选择合适的方式。
VIP享7折，此内容立减5.97元 
