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


Posted in Javascript onMarch 06, 2016

开发过程中经常要给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>

效果如下:

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

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);
})();

Javascript 相关文章推荐
基于jquery实现的表格分页实现代码
Jun 21 Javascript
Google的跟踪代码 动态加载js代码方法应用
Nov 12 Javascript
javascript中传统事件与现代事件
Jun 23 Javascript
JavaScript判断按钮被点击的方法
Dec 13 Javascript
基于javascript实现简单的抽奖系统
Apr 15 Javascript
JS判断浏览器是否安装flash插件的简单方法
Sep 13 Javascript
BootStrap Tooltip插件源码解析
Dec 27 Javascript
JS实现微信里判断页面是否被分享成功的方法
Jun 06 Javascript
angular.extend方法的具体使用
Sep 14 Javascript
详解react-redux插件入门
Apr 19 Javascript
vue完成项目后,打包成静态文件的方法
Sep 03 Javascript
浅谈目前可以使用ES10的5个新特性
Jun 25 Javascript
Node.js模块封装及使用方法
Mar 06 #Javascript
JavaScript中三种异步上传文件方式
Mar 06 #Javascript
JavaScript中获取纯正的undefined的方法
Mar 06 #Javascript
JS面向对象编程详解
Mar 06 #Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
Mar 05 #Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
Mar 05 #Javascript
JavaScript的React框架中的JSX语法学习入门教程
Mar 05 #Javascript
You might like
PHP图片处理类 phpThumb参数用法介绍
2012/03/11 PHP
解析php DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
php 批量替换程序的具体实现代码
2013/10/04 PHP
理解PHP中的Session及对Session有效期的控制
2016/01/08 PHP
thinkPHP利用ajax异步上传图片并显示、删除的示例
2018/09/26 PHP
PHP实现微信申请退款功能
2018/10/01 PHP
jquery getScript动态加载JS方法改进详解
2012/11/15 Javascript
使用js解决由border属性引起的div宽度问题
2013/11/26 Javascript
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
基于javascript的COOkie的操作实现只能点一次
2014/12/26 Javascript
jQuery的css() 方法使用指南
2015/05/03 Javascript
JS中判断null的方法分析
2016/11/21 Javascript
详解基于javascript实现的苹果系统底部菜单
2016/12/02 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
webpack之引入图片的实现及问题
2018/10/08 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
2019/01/08 Javascript
echarts饼图各个板块之间的空隙如何实现
2020/12/01 Javascript
Python正则替换字符串函数re.sub用法示例
2017/01/19 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
如何基于python实现画不同品种的樱花树
2020/01/03 Python
Python属性和内建属性实例解析
2020/01/14 Python
解析Tensorflow之MNIST的使用
2020/06/30 Python
Node.js 和 Python之间该选择哪个?
2020/08/05 Python
python实现暗通道去雾算法的示例
2020/09/27 Python
python中turtle库的简单使用教程
2020/11/11 Python
我们没有写servlet的构造方法,那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
管理科学大学生求职信
2013/11/13 职场文书
电子商务个人职业生涯规划范文
2014/02/12 职场文书
食品销售计划书
2014/04/26 职场文书
值班管理制度范本
2015/08/06 职场文书
学生病假条范文
2015/08/17 职场文书
搞笑欢迎词大全
2015/09/30 职场文书
Java用自带的Image IO给图片添加水印
2021/06/15 Java/Android
Oracle中DBLink的详细介绍
2022/04/29 Oracle
5个实用的JavaScript新特性
2022/06/16 Javascript