JavaScript中利用jQuery绑定大事的几种方式小结_.docx

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 绑定大事有多种方式，每种方式都有其优缺，开发者可以根据实际情况选择合适的方式。