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 相关文章推荐
Javascript的getYear、getFullYear、getUTCFullYear异同分享
Nov 30 Javascript
JavaScript获取/更改文本框的值的实例代码
Aug 02 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
Aug 30 Javascript
JS基于VML技术实现的五角星礼花效果代码
Oct 26 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
May 17 Javascript
jQuery 3.0十大新特性
Jul 06 Javascript
AngularJS入门教程之模块化操作用法示例
Nov 02 Javascript
Require.js的基本用法详解
Jul 03 Javascript
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
vue.js 微信支付前端代码分享
Feb 10 Javascript
react中fetch之cors跨域请求的实现方法
Mar 14 Javascript
vue 遮罩层阻止默认滚动事件操作
Jul 28 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
动态生成gif格式的图像要注意?
2006/10/09 PHP
PHP函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
QQ登录 PHP OAuth示例代码
2011/07/20 PHP
PHP 验证码不显示只有一个小红叉的解决方法
2013/09/30 PHP
php计算数组相同值出现次数的代码(array_count_values)
2015/01/20 PHP
使用Thinkphp框架开发移动端接口
2015/08/05 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
js实现单一html页面两套css切换代码
2013/04/11 Javascript
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
网站404页面3秒后跳到首页的实例代码
2013/08/16 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
2013/12/19 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
2016/08/25 Javascript
WEB前端实现裁剪上传图片功能
2016/10/17 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
如何理解Vue的.sync修饰符的使用
2017/08/17 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
2017/12/12 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
2017/12/20 Javascript
AngularJS中的作用域实例分析
2018/05/16 Javascript
Nodejs中获取当前函数被调用的行数及文件名详解
2018/12/12 NodeJs
在vue中使用G2图表的示例代码
2019/03/19 Javascript
微信小程序swiper使用网络图片不显示问题解决
2019/12/13 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
2020/07/07 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
2020/12/14 Vue.js
vue3.0实现插件封装
2020/12/14 Vue.js
浅述python中argsort()函数的实例用法
2017/03/30 Python
Python win32com 操作Exce的l简单方法(必看)
2017/05/25 Python
Tensorflow训练MNIST手写数字识别模型
2020/02/13 Python
opencv python在视屏上截图功能的实现
2020/03/05 Python
深入理解HTML5定时器requestAnimationFrame的使用
2018/12/12 HTML / CSS
考博专家推荐信模板
2013/12/02 职场文书
幼儿园大班教学反思
2014/02/10 职场文书
股东授权委托书范文
2014/09/13 职场文书
群众路线剖析材料范文
2014/10/09 职场文书
CSS布局之浮动(float)和定位(position)属性的区别
2021/09/25 HTML / CSS
win10怎么设置右下角图标不折叠?Win10设置右下角图标不折叠的方法
2022/07/15 数码科技