jQuery事件的绑定、触发、及监听方法简单说明


Posted in Javascript onMay 10, 2016

如果你在写文章或者 Demo,为了简单,你当然可以用事件监听函数,以及那些事件对象提供的方法等。但在实际中,有一些方法和属性是有兼容性问题的,所以我们会使用 jQuery 来消除兼容性问题。

下面简单的来说一下 jQuery 中事件的基础操作。

绑定事件和事件代理

在 jQuery 中,提供了诸如 click() 这样的语法糖来绑定对应事件,但是这里推荐统一使用 on() 来绑定事件。语法:

.on( events [, selector ] [, data ], handler )

events 即为事件的名称,你可以传递第二个参数来实现事件代理,具体文档.on() 这里不再赘述。

处理过兼容性的事件对象(Event Object)

事件对象有些方法等也有兼容性差异,jQuery 将其封装处理,并提供跟标准一直的命名。

如果你想在 jQuery 事件回调函数中访问原来的事件对象,需要使用 event.originalEvent,它指向原生的事件对象。

触发事件 trigger 方法

点击某个绑定了 click 事件的节点,自然会触发该节点的 click 事件,从而执行对应回调函数。

trigger 方法可以模拟触发事件,我们单击另一个节点 elementB,可以使用:

$(elementB).on('click', function(){
 $(elementA).trigger( "click" );
});

事件监听
jQuery 中的事件监听,完全可以用 addEventListener/attachEvent 模拟,分别对应于现代浏览器和 IE ,可以把两个方法封装一下,但是为了方便,这里把其他事件相关处理,如移除事件监听、阻止默认事件等方法统一写在一个对象中,方便调用,具体代码如下:

// 事件处理对象
 
var EventUtil = {
  
 // 添加事件监听 
 add: function(element, type, callback){
   
  if(element.addEventListener){
   element.addEventListener(type, callback, false);
  } else if(element.attachEvent){
   element.attachEvent('on' + type, callback);
  } else {
   element['on' + type] = callback;
  }
 },
 
 // 移除事件监听
 remove: function(element, type, callback){
   
  if(element.removeEventListener){
   element.removeEventListener(type, callback, false);
  } else if(element.detachEvent){
   element.detachEvent('on' + type, callback);
  } else {
   element['on' + type] = null;
  }
 
 },
 
 // 跨浏览器获取 event 对象
 getEvent: function(event){
  
  return event ? event : window.event;
 },
 
 // 跨浏览器获取 target 属性
 getTarget: function(event){
   
  return event.target || event.srcElement;
 },
 
 // 阻止事件的默认行为
 preventDefault: function(event){
  
  if(event.preventDefault){
   event.preventDefault();
  } else {
   event.returnValue = false;
  }
 },
 
 // 阻止事件流或使用 cancelBubble
 stopPropagation: function(){
   
  if(event.stopPropagation){
   event.stopPropagation();
  } else {
   event.cancelBubble = true;
  }
 }
 
};
 
// 使用例子
var at = document.getElementbyId('atemp');
EventUtil.add(at, 'click', function(){
 
 console.log('被点击了');
 
 event = EventUtil.getEvent(event); // 跨浏览器获取 event 对象
 EventUtil.preventDefault(event); // 阻止默认事件
});
Javascript 相关文章推荐
基于jquery实现的文字淡入淡出效果
Nov 14 Javascript
Javascript全局变量var与不var的区别深入解析
Dec 09 Javascript
jquery中子元素和后代元素的区别示例介绍
Apr 02 Javascript
Jquery动态替换div内容及动态展示的方法
Jan 23 Javascript
JavaScript对数字的判断与处理实例分析
Feb 02 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
Aug 17 Javascript
javascript编程异常处理实例小结
Nov 30 Javascript
javascript拖拽效果延伸学习
Apr 04 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
Mar 02 Javascript
详解js中Array的方法及技巧
Sep 12 Javascript
在vue中高德地图引入和轨迹的绘制的实现
Oct 11 Javascript
Vue中实现回车键切换焦点的方法
Feb 19 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
May 10 #Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
May 10 #Javascript
JS实现登录页面记住密码和enter键登录方法推荐
May 10 #Javascript
详解JavaScript中的自定义事件编写
May 10 #Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 #Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
May 10 #Javascript
解决jquery无法找到其他父级子集问题的方法
May 10 #Javascript
You might like
PHP使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
PHP获取数组最大值下标的方法
2015/05/12 PHP
php 利用socket发送GET,POST请求的实例代码
2020/07/04 PHP
写入cookie的JavaScript代码库 cookieLibrary.js
2009/10/24 Javascript
javascript中万恶的function实例分析
2011/05/25 Javascript
jquery模拟按下回车实现代码
2011/09/20 Javascript
jquery中文乱码的多种解决方法
2013/06/21 Javascript
学习JavaScript设计模式(多态)
2015/11/25 Javascript
图片上传之FileAPI与NodeJs
2017/01/24 NodeJs
Angular.js之作用域scope'@','=','&'实例详解
2017/02/28 Javascript
inner join 内联与left join 左联的实例代码
2017/09/18 Javascript
浏览器事件循环与vue nextTicket的实现
2019/04/16 Javascript
使用express获取微信小程序二维码小记
2019/05/21 Javascript
原生JS无缝滑动轮播图
2019/10/22 Javascript
layui实现显示数据表格、搜索和修改功能示例
2020/06/03 Javascript
在Django中使用Sitemap的方法讲解
2015/07/22 Python
Python数据类型详解(二)列表
2016/05/08 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
python url 参数修改方法
2018/12/26 Python
python对绑定事件的鼠标、按键的判断实例
2019/07/17 Python
Django错误:TypeError at / 'bool' object is not callable解决
2019/08/16 Python
Python实现对adb命令封装
2020/03/06 Python
Pymysql实现往表中插入数据过程解析
2020/06/02 Python
详细分析Python可变对象和不可变对象
2020/07/09 Python
python-地图可视化组件folium的操作
2020/12/14 Python
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
用缩写的指针比较"if(p)" 检查空指针是否可靠?如果空指针的内部表达不是0会怎么样?
2014/01/05 面试题
简历自荐信
2013/12/02 职场文书
销售行政专员职责
2014/01/03 职场文书
追悼会子女答谢词
2014/01/28 职场文书
经贸韩语专业大学生职业规划
2014/02/14 职场文书
计算机毕业生求职信
2014/06/10 职场文书
公司门卫工作职责
2014/06/28 职场文书
党员学习新党章思想汇报
2014/10/25 职场文书
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android