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

 更新时间:2016年05月10日 15:16:24   作者:Kayo Lee  
这篇文章主要介绍了jQuery事件的绑定、触发、及监听方法简单说明,使用jQuery的事件会使代码更加简单,同时对各浏览器的兼容性也还不错,需要的朋友可以参考下

如果你在写文章或者 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); // 阻止默认事件
});

相关文章

  • AeroWindow 基于JQuery的弹出窗口插件

    AeroWindow 基于JQuery的弹出窗口插件

    AeroWindow是个Win7样式的弹出窗口,jQuery插件,效果很酷!而且还像windows的窗口一样可最大,最小化,随意拖动。
    2011-06-06
  • jQuery+css实现炫目的动态块漂移效果

    jQuery+css实现炫目的动态块漂移效果

    这篇文章主要介绍了jQuery+css实现的动态块漂移效果,涉及jQuery基于随机数与时间函数动态操作页面元素样式的相关技巧,需要的朋友可以参考下
    2016-01-01
  • jQuery模拟实现天猫购物车动画效果实例代码

    jQuery模拟实现天猫购物车动画效果实例代码

    最近在项目开发中遇到这样的需求,点击购买按钮,模拟抛物线将物品弹到购物车里,购物车添加物品后,显示+1动画。效果非常棒,接下来小编把实例代码分享到脚本之家平台,需要的的朋友参考下吧
    2017-05-05
  • jQuery学习笔记之2个小技巧

    jQuery学习笔记之2个小技巧

    这篇文章主要介绍了jQuery学习笔记之2个小技巧,1.jQuery功能函数前缀,2.解决window.onload函数冲突,非常不错,推荐给小伙伴参考下
    2015-01-01
  • jQuery中:text选择器用法实例

    jQuery中:text选择器用法实例

    这篇文章主要介绍了jQuery中:text选择器用法,以实例形式较为详细的分析了text选择器的功能、定义及匹配单行文本框的使用技巧,需要的朋友可以参考下
    2015-01-01
  • JQuery Ajax通过Handler访问外部XML数据的代码

    JQuery Ajax通过Handler访问外部XML数据的代码

    JQuery是一款不错的Javascript脚本框架,相信园子里的很多朋友对它都不陌生,我们在开发Web应用程序时难免会使用到Javascript脚本,而使用一款不错的脚本框架将会大大节省我们的开发时间, 并可以毫不费力地实现很多非常酷的效果。
    2010-06-06
  • jQuery实现三级菜单的代码

    jQuery实现三级菜单的代码

    上周新接手一个网站建设的活儿,其中有需要要jquery代码实现三级菜单的需求,其实说难也不难,下面小编把代码分享给大家,供大家参考
    2016-05-05
  • jquery根据name属性查找的小例子

    jquery根据name属性查找的小例子

    这篇文章主要介绍了jquery根据name属性查找的小例子,有需要的朋友可以参考一下
    2013-11-11
  • 基于jQuery实现可编辑的表格

    基于jQuery实现可编辑的表格

    这篇文章主要为大家详细介绍了基于jQuery实现可编辑的表格,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • jQuery hover事件简单实现同时绑定2个方法

    jQuery hover事件简单实现同时绑定2个方法

    这篇文章主要介绍了jQuery hover事件简单实现同时绑定2个方法,可实现同时绑定悬停与离开事件的功能,非常简单实用,需要的朋友可以参考下
    2016-06-06

最新评论