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语句中的CDATA标签的意义
May 09 Javascript
document.getElementById为空或不是对象的解决方法
Jan 24 Javascript
javascript 词法作用域和闭包分析说明
Aug 12 Javascript
Javascript学习笔记之相等符号与严格相等符号
Nov 23 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
May 20 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
Aug 02 Javascript
node.js操作mysql简单实例
May 25 Javascript
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
Jan 22 Javascript
jQuery实现简易聊天框
Feb 08 jQuery
解决vue动态下拉菜单 有数据未反应的问题
Aug 06 Javascript
浅谈JavaScript节流和防抖函数
Aug 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)
2010/09/04 PHP
PHP图片库imagemagick安装方法
2014/09/23 PHP
PHP实现自动对图片进行滚动显示的方法
2015/03/12 PHP
浅谈Laravel中的三种中间件的作用
2019/10/13 PHP
tp5.1框架数据库子查询操作实例分析
2020/05/26 PHP
基于jquery的$.ajax async使用
2011/10/19 Javascript
jQuery插件的写法分享
2013/06/12 Javascript
Jquery实现自定义弹窗示例
2014/03/12 Javascript
jquery通过ajax加载一段文本内容的方法
2015/01/15 Javascript
JavaScript包装对象使用详解
2015/07/09 Javascript
JQuery解析XML的方法小结
2016/04/02 Javascript
简单解析JavaScript中的__proto__属性
2016/05/10 Javascript
基于jQuery实现淡入淡出效果轮播图
2020/07/31 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
2016/11/25 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
node.js利用redis数据库缓存数据的方法
2017/03/01 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
2017/03/10 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
在vue中添加Echarts图表的基本使用教程
2017/11/22 Javascript
js实现弹出框的拖拽效果实例代码详解
2019/04/16 Javascript
vue学习之Vue-Router用法实例分析
2020/01/06 Javascript
js实现网页版贪吃蛇游戏
2020/02/22 Javascript
Postman内建变量常用方法实例解析
2020/07/28 Javascript
使用Python的Supervisor进行进程监控以及自动启动
2014/05/29 Python
在Python的Django框架下使用django-tagging的教程
2015/05/30 Python
python pands实现execl转csv 并修改csv指定列的方法
2018/12/12 Python
python实现求特征选择的信息增益
2018/12/18 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
python字典的常用方法总结
2019/07/31 Python
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
十岁生日同学答谢词
2014/01/19 职场文书
关于环保的建议书
2014/05/12 职场文书
幼儿教师师德师风演讲稿
2014/08/22 职场文书
应届生求职自荐信范文
2015/03/04 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书