这篇文章主要介绍了JavaScript中利用jQuery绑定事件的几种方式小结,包括不调用jQuery的"原生js"实现方式,需要的朋友可以参考下
开发过程中经常要给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.target
alert('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);
})();
2025国考·省考课程试听报名