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 相关文章推荐
javascript下过滤数组重复值的代码
Sep 10 Javascript
jQuery 学习 几种常用方法
Jun 11 Javascript
通过JS获取用户本地图片路径并显示的代码
Feb 16 Javascript
javascript中取前n天日期的两种方法分享
Jan 26 Javascript
JavaScript中的分号插入机制详细介绍
Feb 11 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
Nov 11 Javascript
angularJS 指令封装回到顶部示例详解
Jan 22 Javascript
你应该知道的几类npm依赖包管理详解
Oct 06 Javascript
微信小程序实现折叠面板
Jan 31 Javascript
详解如何快速配置webpack多入口脚手架
Dec 28 Javascript
JavaScript中window和document用法详解
Jul 28 Javascript
vue路由结构可设一层方便动态添加路由操作
Aug 31 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 Header用于页面跳转要注意的几个问题总结
2008/10/03 PHP
php zend 相对路径问题
2009/01/12 PHP
PHP编写文件多服务器同步程序
2016/07/02 PHP
php获得文件夹下所有文件的递归算法的简单实例
2016/11/01 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
phpstorm最新激活码分享亲测phpstorm2020.2.3版可用
2020/11/22 PHP
JavaScript 异步调用框架 (Part 4 - 链式调用)
2009/08/04 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
Javascript delete 引用类型对象
2013/11/01 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
2015/03/05 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
2015/11/18 Javascript
详解JS: reduce方法实现 webpack多文件入口
2017/02/14 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
2019/09/17 Javascript
Jquery Datatables的使用详解
2020/01/30 jQuery
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
[01:39:04]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第二场 2月1日
2021/03/11 DOTA
用pyqt5 给按钮设置图标和css样式的方法
2019/06/24 Python
Django中使用CORS实现跨域请求过程解析
2019/08/05 Python
Python 私有化操作实例分析
2019/11/21 Python
Jupyter notebook设置背景主题,字体大小及自动补全代码的操作
2020/04/13 Python
CSS 说明横向进度条最后显示文字的实现代码
2020/11/10 HTML / CSS
使用html5制作loading图的示例
2014/04/14 HTML / CSS
中粮集团旗下食品网上购物网站:我买网
2016/09/22 全球购物
Hotter Shoes英国官网:英伦风格,舒适的鞋子
2017/12/28 全球购物
美国排名第一的泳池用品直接来源:In The Swim
2019/09/23 全球购物
Belvilla法国:休闲度假房屋出租
2020/10/03 全球购物
cf搞笑广告词
2014/03/14 职场文书
青春奉献演讲稿
2014/05/08 职场文书
4s店活动策划方案
2014/08/25 职场文书
导游欢送词
2015/01/31 职场文书
行政后勤人员工作计划应该怎么写?
2019/08/16 职场文书
Vue3.0中Ref与Reactive的区别示例详析
2021/07/07 Vue.js
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers