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中void(0)的具体含义解释
Feb 27 Javascript
JavaScript 空位补零实现代码
Feb 26 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
Nov 21 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
May 07 Javascript
jQuery实现ctrl+enter(回车)提交表单
Oct 19 Javascript
深入理解jquery跨域请求方法
May 18 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
Jul 11 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
Feb 28 Javascript
Vuex中mutations与actions的区别详解
Mar 01 Javascript
vue resource发送请求的几种方式
Sep 30 Javascript
详解搭建一个vue-cli的移动端H5开发模板
Jan 17 Javascript
js判断两个数组相等的5种方法
May 06 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
用文本文件制作留言板提示(上)
2006/10/09 PHP
php将数据库中的电话号码读取出来并生成图片
2008/08/31 PHP
深入HTTP响应状态码速查表的详解
2013/06/07 PHP
php二维数组排序方法(array_multisort usort)
2013/12/25 PHP
destoon复制新模块的方法
2014/06/21 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
PHP生成压缩文件实例
2015/02/07 PHP
PHP Web木马扫描器代码分享
2015/09/06 PHP
PHP实现动态创建XML文档的方法
2018/03/30 PHP
PHP获取文件扩展名的常用方法小结【五种方式】
2018/04/27 PHP
js wmp操作代码小结(音乐连播功能)
2008/11/08 Javascript
JS分页效果示例
2013/10/11 Javascript
javascript实现动态表头及表列的展现方法
2015/07/14 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
2016/05/31 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
2016/11/16 Javascript
Vue axios 中提交表单数据(含上传文件)
2017/07/06 Javascript
uniapp微信小程序实现一个页面多个倒计时
2020/11/01 Javascript
[48:00]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第二场 11.04
2020/11/04 DOTA
Python遍历文件夹和读写文件的实现方法
2017/05/10 Python
Django框架实现逆向解析url的方法
2018/07/04 Python
python设置环境变量的原因和方法
2019/06/24 Python
python 比较字典value的最大值的几种方法
2020/04/17 Python
keras实现VGG16方式(预测一张图片)
2020/07/07 Python
python中的时区问题
2021/01/14 Python
浅析HTML5 meta viewport参数
2020/10/28 HTML / CSS
微软英国官方网站:Microsoft英国
2016/10/15 全球购物
土木工程师岗位职责
2013/11/24 职场文书
生日宴会答谢词
2014/01/09 职场文书
运动会四百米广播稿
2014/01/19 职场文书
企业授权委托书范本
2014/04/02 职场文书
检讨书格式
2015/05/07 职场文书
2019最新校园运动会广播稿!
2019/06/28 职场文书
Nginx解决前端访问资源跨域问题的方法详解
2021/03/31 Servers
如何用JavaScript学习算法复杂度
2021/04/30 Javascript
Python编程中内置的NotImplemented类型的用法
2022/03/23 Python
SQL Server携程核心系统无感迁移到MySQL实战
2022/06/01 SQL Server