JavaScript中利用jQuery绑定事件的几种方式小结

开发过程中经常要给DOM元素添加一些事件，下面介绍几种方式：
先写几个好看的button

//引入JQuery<script type="text/javascript" src="jquery-1.8.3.min.js"></script><span id="tips"></span><input type="button" id="btn1" value="OK1" onclick="alert（"hello btn1"）;"><input type="button" id="btn2" value="OK2" click-type="listener"><input type="button" id="btn3" value="OK3" click-type="listener"><input type="button" id="btn4" value="OK4"><input type="button" id="btn5" value="OK5"><div id="btn-list"><input type="button" id="btn6" value="OK6"><input type="button" id="btn7" value="OK7"></div>

效果如下：

1、直接在btn1使用onclick，这种方式称为内联事件，简单粗暴，好处是可以清晰地看到button绑定了click事件；这种方式等同于：（element）.onclick；
这种方式的缺点，一个元素只能指定一个内联事件，添加了这段代码之后会发现onclick="alert（"hello btn1"）;"被覆盖了：

（function（）{var _btn1 = document.getElementById（"btn1"）,_tips = document.getElementById（"tips"）;_btn1.onclick=function（）{_tips.innerHTML="hello world~";}; }）（）;

2、使用原生JS给多个元素绑定事件，在 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.targetalert（"hello "+target.id）;}）;} }）（）;

3、第二种方式逻辑比较简单，逼格会高一点，但是代码量比较多，而且还需要考虑IE的兼容性问题，由于我们的项目一般都会使用到JQuery，所以就可以这样写了：

$（"#btn4"）.click（function（）{alert（"hello btn4"）;}）; $（"#btn5"）.on（"click",function（）{alert（"hello btn5"）;}）;

上面使用到的on和bind方法效果是一样的；
4、使用on，给多个元素绑定一个或多个事件：

$（"#btn-list"）.on（"click","input",function（evt）{alert（"hello "+ evt.target.id）;}）;

这是我现在在开发中最常用的一种方法，有个好处，举个栗子：

/*动态添加几个button*/（function（）{for（var i=8;i<10;i++）{$（"#btn-list"）.append（"<input type="button" id="btn"+i+"" value="OK"+i+"">"）;}}）（）;

这样动态添加元素的时候可以自动添加click事件，比如我们经常使用AJAX加载一些数据动态添加到页面上，这样就简单多了。
另外：使用原生JS利用事件委托实现也比较简单，

<ul id="list"><li>css</li><li>js</li><li>html</li></ul>（function（）{var a=document.getElementById（"list"）;a.addEventListener（"click",function（e）{var b = e.target; alert（b.innerHTML）;},false）;}）（）;