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 相关文章推荐
js取值中form.all和不加all的区别介绍
Jan 20 Javascript
jquery序列化表单去除指定元素示例代码
Apr 10 Javascript
ExtJS4给Combobox设置列表中的默认值示例
May 02 Javascript
Bootstrap实现带动画过渡的弹出框
Aug 09 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
Oct 11 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
Feb 23 Javascript
jQuery实现扑克正反面翻牌效果
Mar 10 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
Vue用v-for给src属性赋值的方法
Mar 03 Javascript
JS正则表达式常见用法实例详解
Jun 19 Javascript
vue回到顶部监听滚动事件详解
Aug 02 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
一个程序下载的管理程序(三)
2006/10/09 PHP
php的4种常用运行方式详解
2016/12/22 PHP
用PHP的反射实现委托模式的讲解
2019/03/22 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
Gambit vs CL BO3 第三场 2.13
2021/03/10 DOTA
javascript xml为数据源的下拉框控件
2009/07/07 Javascript
Textarea与懒惰渲染实现代码
2012/01/04 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
JQuery获取表格数据示例代码
2014/05/26 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
2015/08/05 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
Jquery 效果使用详解
2015/11/23 Javascript
js格式化时间的方法
2015/12/18 Javascript
js类式继承与原型式继承详解
2016/04/07 Javascript
JavaScript之iterable_动力节点Java学院整理
2017/06/29 Javascript
javascript Function函数理解与实战
2017/12/01 Javascript
select获取下拉框的值 下拉框默认选中方法
2018/02/28 Javascript
Vue实现搜索结果高亮显示关键字
2019/05/28 Javascript
微信小程序页面滚动到指定位置代码实例
2019/09/07 Javascript
解决layui弹出层layer的area过大被遮挡的问题
2019/09/21 Javascript
基于Vue全局组件与局部组件的区别说明
2020/08/11 Javascript
[01:31](回顾)杀出重围,决战TI之巅
2014/07/01 DOTA
python+mysql实现教务管理系统
2019/02/20 Python
浅谈pytorch grad_fn以及权重梯度不更新的问题
2019/08/20 Python
在Python中利用pickle保存变量的实例
2019/12/30 Python
新年福利来一波之Python轻松集齐五福(demo)
2020/01/20 Python
3种适用于Python的疯狂秘密武器及原因解析
2020/04/29 Python
主键(Primary Key)约束和唯一性(UNIQUE)约束的区别
2013/05/29 面试题
总经理岗位职责
2013/11/09 职场文书
高一家长会邀请函
2014/01/12 职场文书
销售人员求职的自我评价分享
2014/03/15 职场文书
通信工程专业求职信
2014/06/04 职场文书
五一劳动节活动总结
2015/02/09 职场文书
承诺保证书格式
2015/02/28 职场文书
高中地理教学反思
2016/02/19 职场文书
Linux下使用C语言代码搭建一个简单的HTTP服务器
2022/04/13 Servers