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

前端之家收集整理的这篇文章主要介绍了JavaScript中利用jQuery绑定事件的几种方式小结前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

开发过程中经常要给DOM元素添加一些事件,下面介绍几种方式:

先写几个好看的button

效果如下:

1、直接在btn1使用onclick,这种方式称为内联事件,简单粗暴,好处是可以清晰地看到button绑定了click事件;这种方式等同于:(element).onclick;

这种方式的缺点,一个元素只能指定一个内联事件,添加了这段代码之后会发现onclick="alert('hello btn1');"被覆盖了:

})();

2、使用原生JS给多个元素绑定事件,在 IE 9 之前的版本中,需要使用 attachEvent替代addEventListener

})();

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

$("#btn5").on("click",function(){
alert("hello btn5");
});

上面使用到的on和bind方法效果是一样的;

4、使用on,给多个元素绑定一个或多个事件:

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

添加几个button*/ (function(){ for(var i=8;i<10;i++){ $("#btn-list").append(""); } })();

这样动态添加元素的时候可以自动添加click事件,比如我们经常使用AJAX加载一些数据动态添加页面上,这样就简单多了。

另外:使用原生JS利用事件委托实现也比较简单,

  • css
  • js
  • html
  • (function(){
    var a=document.getElementById('list');
    a.addEventListener('click',function(e){
    var b = e.target;
    alert(b.innerHTML);
    },false);
    })();

    猜你在找的jQuery相关文章