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中extend函数的实现原理详解
Feb 03 Javascript
js用拖动滑块来控制图片大小的方法
Feb 27 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
May 12 Javascript
AngularJS折叠菜单实现方法示例
May 18 Javascript
ReactNative实现图片上传功能的示例代码
Jul 11 Javascript
详解angularjs实现echart图表效果最简洁教程
Nov 29 Javascript
js统计页面上每个标签的数量实例代码
May 29 Javascript
Vue.js实现的购物车功能详解
Jan 27 Javascript
详解jQuery-each()方法
Mar 13 jQuery
详解Vue中使用插槽(slot)、聚类插槽
Apr 12 Javascript
TypeScript开发Node.js程序的方法
Apr 30 Javascript
javascript实现blob加密视频源地址的方法
Aug 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
?繁体转换的class
2006/10/09 PHP
跟我学Laravel之快速入门
2014/10/15 PHP
PDO防注入原理分析以及注意事项
2015/02/25 PHP
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
php解决和避免form表单重复提交的几种方法
2016/08/31 PHP
11款新鲜的jQuery插件[附所有demo下载]
2011/01/24 Javascript
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
2013/12/14 Javascript
JavaScript中window.open用法实例详解
2015/04/15 Javascript
javascript表格的渲染组件
2015/07/03 Javascript
jQuery基于cookie实现的购物车实例分析
2015/12/24 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
2017/01/08 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
2017/01/11 Javascript
详解Node.js access_token的获取、存储及更新
2017/06/20 Javascript
Echarts基本用法_动力节点Java学院整理
2017/08/11 Javascript
微信小程序仿朋友圈发布动态功能
2018/07/15 Javascript
vue-iview动态新增和删除的方法
2020/06/17 Javascript
js实现弹幕墙效果
2020/12/10 Javascript
Pyramid将models.py文件的内容分布到多个文件的方法
2013/11/27 Python
Java多线程编程中ThreadLocal类的用法及深入
2016/06/21 Python
Python学习笔记之if语句的使用示例
2017/10/23 Python
解决pycharm每次新建项目都要重新安装一些第三方库的问题
2019/01/17 Python
修改 CentOS 6.x 上默认Python的方法
2019/09/06 Python
Python性能分析工具Profile使用实例
2019/11/19 Python
Python matplotlib 绘制双Y轴曲线图的示例代码
2020/06/12 Python
解决keras模型保存h5文件提示无此目录问题
2020/07/01 Python
Pycharm 设置默认解释器路径和编码格式的操作
2021/02/05 Python
艺术设计专业个人求职信范文
2013/12/11 职场文书
中学自我评价
2014/01/31 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
2014乡镇干部对照检查材料思想汇报
2014/09/26 职场文书
工程款催款函
2015/06/24 职场文书
MySQL获取所有分类的前N条记录
2021/05/07 MySQL
Pytorch 中net.train 和 net.eval的使用说明
2021/05/22 Python
Python集合的基础操作
2021/11/01 Python
OpenCV实现普通阈值
2021/11/17 Java/Android