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); // 阻止默认事件
});

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
, 事件
, 监听
, 触发
绑定
jquery绑定监听事件、jquery 触发绑定事件、外部触发监听、ckplayer监听事件触发、监听变量 触发事件,以便于您获取更多的相关知识。

时间: 2024-09-29 05:06:49

jQuery事件的绑定、触发、及监听方法简单说明_jquery的相关文章

Java接口的定义,使用,以及事件的监听方法

众所周知,类是对所有对象所共有的方法和属性的定义,即类是一个抽象的规则,定义一个类无非是两个用途,或者生成对象调用其方法,或者用作给其他类来继承,而在后一个用途上,我们要求子类必须重写父类的方法时就需要定义一个接口. 接口本身也是一个类,但是接口定义的是一个没有任何方法体实现的方法,而这也是接口定义的规则,只能定义方法名,返回值,以及参数表,而不能有实现.并且,接口不能用来直接创建对象. 在定义接口的时候,一个class类可以实现多个接口,而一个class类只能继承一个class,这也就意味着我

jquery事件重复绑定的快速解决方法

 本篇文章主要是对jquery事件重复绑定的快速解决方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 一 $.fn.live 重复绑定   解决:使用die()方法,在live()方法绑定前,将此元素上的前面被绑定的事件统统解除,然后再通过live()方法绑定新的事件.   代码如下: //先通过die()方法解除,再通过live()绑定 $("#selectAll").die().live("click",function(){ //事件运行代码 })

java 鼠标和按键监听都注册时。鼠标拖曳会触发按键监听的Ctrl键是怎么回事?

问题描述 java 鼠标和按键监听都注册时.鼠标拖曳会触发按键监听的Ctrl键是怎么回事? 我写的一程序.添加了按键监听和鼠标监听,各执行一个功能.当我按住鼠标左或右键拖曳的时候,触发了按键监听那里的事件.于是我就在按键监听类里用System.out.print(e.getKeyCode),打印出来是0x11(ctrl的键码). 解决方案 你的问题不太清晰. 什么怎么回事?? 不知道你想获取啥信息 解决方案二: 按理说不会,看下是不是你启动程序的时候朝程序发了什么按键,完全用鼠标来启动你的程序.

Android开发之Button事件实现与监听方法总结

本文实例总结了Android开发之Button事件实现与监听方法.分享给大家供大家参考,具体如下: 先来介绍Button事件实现的两种方法 main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="

JS针对浏览器窗口关闭事件的监听方法集锦_javascript技巧

本文实例总结了JS针对浏览器窗口关闭事件的监听方法.分享给大家供大家参考,具体如下: 方式一:(适用于IE浏览器,而且刷新不提示,只在点击浏览器关闭按钮的时候提示) <script type="text/javascript"> window.onbeforeunload=onclose; function onclose() { if(event.clientX>document.body.clientWidth&&event.clientY<

Android编程双重单选对话框布局实现与事件监听方法示例

本文实例讲述了Android编程双重单选对话框布局实现与事件监听方法.分享给大家供大家参考,具体如下: 首先是自定义XML布局代码: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_pare

java监听事件-java中为什么监听方法的方法参数没有对象,详细代码如下

问题描述 java中为什么监听方法的方法参数没有对象,详细代码如下 b.setOnClickListener.( new On ClickListnener( ) {方法体省略若干代码 } ); java中为什么监听方法的方法参数没有对象,详细代码如上 解决方案 b.setOnClickListener.( new On ClickListnener( ) {方法体省略若干代码 } ); Listener.这里多了一个点吧. 这里b.setOnClickListener需要一个对象,而new O

android如何在另一个方法里面调用ExpandableListView的监听方法

问题描述 android如何在另一个方法里面调用ExpandableListView的监听方法 我想在别的地方(比如button的click监听方法里面) 来控制listView的一级子菜单的收缩和展开,一级二级子菜单的选定. 新人报道 ,求大神... 解决方案 这是动态监听expandableListView的高度,你可以参考下. 在button的click中监听,可以吧ListView的点击事件提出来写,在button的click中调用 setListViewHeightBasedOnChi

Android ListView里控件添加监听方法的实例详解

Android ListView里控件添加监听方法的实例详解 关于ListView,算是android中比较常见的控件,在ListView我们通常需要一个模板,这个模板指的不是住模块,而是配置显示在ListView里面的东西,今天做项目的时候发现想要添加一个ImageView监听方法,发现崩了,也许是好久没有动ListView竟然忘了不能直接在主UI的xml文件里面调用其他xml文件的控件,哪怕ListView用的是这个xml文件. [错误示范]: 直接调用ImageView这个控件是ListV