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 相关文章推荐
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
Jun 25 Javascript
JavaScript实现拼音排序的方法
Nov 20 Javascript
js 控制下拉菜单刷新的方法
Mar 03 Javascript
浅析jQuery 3.0中的Data
Jun 14 Javascript
解析利用javascript如何判断一个数为素数
Dec 08 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
Mar 03 Javascript
微信小程序 页面跳转如何实现传值
Apr 05 Javascript
vue权限路由实现的方法示例总结
Jul 29 Javascript
Vue.js中 v-model 指令的修饰符详解
Dec 03 Javascript
如何使用 vue + d3 画一棵树
Dec 03 Javascript
Laravel admin实现消息提醒、播放音频功能
Jul 10 Javascript
javascript简单实现深浅拷贝过程详解
Oct 08 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下统计用户在线时间的一种尝试
2010/08/26 PHP
PHP实现的MongoDB数据库操作类分享
2014/05/12 PHP
php实现微信公众平台账号自定义菜单类
2014/12/02 PHP
PHP使用 Pear 进行安装和卸载包的方法详解
2019/07/08 PHP
JS查看对象功能代码
2008/04/25 Javascript
javascript 动态参数判空操作
2008/12/22 Javascript
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
js实现可得到不同颜色值的颜色选择器实例
2015/02/28 Javascript
深入理解JavaScript中的浮点数
2016/05/18 Javascript
js的各种排序算法实现(总结)
2016/07/23 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
2016/11/07 Javascript
js监听input输入框值的实时变化实例
2017/01/26 Javascript
JavaScript数据结构之二叉树的删除算法示例
2017/04/13 Javascript
手把手教你搭建ES6的开发运行环境
2017/07/11 Javascript
js实现可以点击收缩或张开的悬浮窗
2017/09/18 Javascript
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
iview在vue-cli3如何按需加载的方法
2018/10/31 Javascript
解析原来浏览器原生支持JS Base64编码解码
2019/08/12 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
python使用xlrd与xlwt对excel的读写和格式设定
2017/01/21 Python
python3设计模式之简单工厂模式
2017/10/17 Python
Python内置函数 next的具体使用方法
2017/11/24 Python
python版大富翁源代码分享
2018/11/19 Python
pymongo中聚合查询的使用方法
2019/03/22 Python
python+jinja2实现接口数据批量生成工具
2019/08/28 Python
python pprint模块中print()和pprint()两者的区别
2020/02/10 Python
Python图像处理库PIL的ImageEnhance模块使用介绍
2020/02/26 Python
django xadmin 管理器常用显示设置方式
2020/03/11 Python
Python在后台自动解压各种压缩文件的实现方法
2020/11/10 Python
windeln官方海外旗舰店:德淘超人气母婴超市
2017/12/15 全球购物
销售部主管岗位职责
2013/12/18 职场文书
教师年度考核自我鉴定
2014/01/19 职场文书
设计师求职信
2014/07/01 职场文书
弘扬焦裕禄精神走群众路线思想汇报
2014/09/12 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
Z-Order加速Hudi大规模数据集方案分析
2022/03/31 Servers