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 相关文章推荐
取得传值的函数
Oct 27 Javascript
一个JS翻页效果
Jul 23 Javascript
Javascript 两个窗体之间传值实现代码
Sep 25 Javascript
js修改input的type属性问题探讨
Oct 12 Javascript
jQuery截取指定长度字符串的实现原理及代码
Jul 01 Javascript
关于js原型的面试题讲解
Sep 25 Javascript
微信小程序 解析网页内容详解及实例
Feb 22 Javascript
SVG描边动画
Feb 23 Javascript
angularjs实现上拉加载和下拉刷新数据功能
Jun 12 Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 Javascript
深入理解vue中的slot与slot-scope
Apr 22 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
Nov 12 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
2014年10个最佳的PHP图像操作库
2014/07/14 PHP
PHP创建PowerPoint2007文档的方法
2015/12/10 PHP
thinkphp3.2点击刷新生成验证码
2016/02/16 PHP
PHP基于DOMDocument解析和生成xml的方法分析
2017/07/17 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
直接生成打开窗口代码,不必下载
2008/05/14 Javascript
js hover 定时器(实例代码)
2013/11/12 Javascript
js实现右下角提示框的方法
2015/02/03 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
2015/05/19 Javascript
js+html5实现canvas绘制镂空字体文本的方法
2015/06/05 Javascript
详解javascript传统方法实现异步校验
2016/01/22 Javascript
BootStrap3学习笔记(一)之网格系统
2016/05/20 Javascript
Bootstrap Table使用方法详解
2016/08/01 Javascript
AngularJS监听路由的变化示例代码
2016/09/23 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
2016/11/23 Javascript
bootstrap警告框使用方法解析
2017/01/13 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
2017/09/13 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
2018/08/24 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
js html实现计算器功能
2018/11/13 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
vue项目打包之开发环境和部署环境的实现
2020/04/23 Javascript
[01:34]传奇从这开始 2016国际邀请赛中国区预选赛震撼开启
2016/06/26 DOTA
python发送HTTP请求的方法小结
2015/07/08 Python
Python教程之全局变量用法
2016/06/27 Python
Python实现字符串反转的常用方法分析【4种方法】
2017/09/30 Python
pandas 读取各种格式文件的方法
2018/06/22 Python
CSS3教程(1):什么是CSS3
2009/04/02 HTML / CSS
使用CSS3的font-face字体嵌入样式的方法讲解
2016/05/13 HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
2020/03/06 HTML / CSS
小学生考试获奖感言
2014/01/30 职场文书
运动会方阵解说词
2014/02/12 职场文书
公司董事长助理工作职责
2014/07/12 职场文书
党性教育心得体会(共6篇)
2016/01/21 职场文书
pytest配置文件pytest.ini的详细使用
2021/04/17 Python