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 相关文章推荐
5 cool javascript apps
Mar 24 Javascript
一个js拖拽的效果类和dom-drag.js浅析
Jul 17 Javascript
过虑特殊字符输入的js代码
Aug 05 Javascript
jQuery中$.each使用详解
Jan 29 Javascript
jQuery使用fadein方法实现渐出效果实例
Mar 27 Javascript
jQuery右下角旋转环状菜单特效代码
Aug 10 Javascript
sea.js常用的api简易文档
Nov 15 Javascript
jQuery实现标签页效果实战(4)
Feb 08 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
Sep 20 Javascript
AngularJS 事件发布机制
Aug 28 Javascript
setTimeout与setInterval的区别浅析
Mar 23 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
Sep 06 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接受文件并获得其后缀名的方法
2015/08/05 PHP
php表单加入Token防止重复提交的方法分析
2016/10/10 PHP
PHP array_reduce()函数的应用解析
2018/10/28 PHP
代码生成器 document.write()
2007/04/15 Javascript
类似GMAIL的Ajax信息反馈显示
2010/02/16 Javascript
基于jquery的地址栏射击游戏代码
2011/03/10 Javascript
js 操作select和option常用代码整理
2012/12/13 Javascript
使用jquery实现IE下按backspace相当于返回操作
2014/03/18 Javascript
轻松创建nodejs服务器(2):nodejs服务器的构成分析
2014/12/18 NodeJs
js函数内变量的作用域分析
2015/01/12 Javascript
javascript常用经典算法实例详解
2015/11/25 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
2016/08/17 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
js 函数式编程学习笔记
2017/03/25 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
2017/05/25 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
2017/07/17 jQuery
关于Promise 异步编程的实例讲解
2017/09/01 Javascript
图文介绍Vue父组件向子组件传值
2018/02/17 Javascript
详解angularjs4部署文件过大解决过程
2018/12/05 Javascript
vue动态绑定class选中当前列表变色的方法示例
2018/12/19 Javascript
angularjs自定义过滤器demo示例
2019/08/24 Javascript
解决在layer.open中使用时间控件laydate失败的问题
2019/09/11 Javascript
vue中如何自定义右键菜单详解
2020/12/08 Vue.js
Python中Continue语句的用法的举例详解
2015/05/14 Python
奥地利汽车配件店:Pkwteile.at
2017/03/10 全球购物
莫斯科珠宝厂官方网站:Miuz
2020/09/19 全球购物
师范毕业生个人求职信
2013/12/09 职场文书
医院总经理岗位职责
2014/02/04 职场文书
聚美优品励志广告词
2014/03/14 职场文书
《从现在开始》教学反思
2014/04/15 职场文书
教师爱岗敬业演讲稿
2014/05/05 职场文书
新闻发布会活动策划方案
2014/09/15 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
销售合作意向书范本
2015/05/08 职场文书
Nginx下配置Https证书详细过程
2021/04/01 Servers
mysql sum(if())和count(if())的用法说明
2022/01/18 MySQL