前面的话

  在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象,但支持方式不同。jQuery在遵循W3C规范的情况下,对事件对象的常用属性进行了封装,使得事件处理在各个浏览器下都可以正常运行而不需要进行浏览器类型判断,本文将详细介绍jQuery事件对象

获取

  对于DOM事件对象来说,标准浏览器和IE8-浏览器的事件对象获取方式不一致。标准浏览器的事件对象是事件处理程序中的第一个参数,而IE8-浏览器的事件对象是直接使用event变量

  jQuery采用了标准写法,并兼容低版本IE浏览器

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box" style="height:30px;width:200px;background:pink;"></div>
<script>
$('#box').click(function(event){
$(this).html(event.type);
})
</script>

事件类型

  事件有很多类型,事件对象中的type属性表示被触发的事件的类型

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box" style="height:30px;width:200px;background:pink;"></div>
<script>
$('#box').on('click mouseover mouseout',function(event){
$(this).html(event.type);
})
</script>

事件目标

  事件目标target属性返回事件当前所在的节点,即正在执行的监听函数所绑定的那个节点

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul id="box">
<li class="in">1</li>
<li class="in">2</li>
</ul>
<script>
$('#box').on('mousemove',function(event){
$(event.target).css('background-color','lightblue');
})
$('#box').on('mouseout',function(event){
$(event.target).css('background-color','transparent');
})
</script>

当前元素

  currentTarget属性始终指向事件绑定的当前DOM元素,与this值始终相等

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<ul id="box">
<li class="in">1</li>
<li class="in">2</li>
</ul>
<script>
$('#box').on('mousemove',function(event){
$(event.currentTarget).css('background-color','lightblue');
})
$('#box').on('mouseout',function(event){
$(event.currentTarget).css('background-color','transparent');
})
</script>

事件冒泡

  DOM事件流分为三个阶段:事件捕获、处于目标和事件冒泡,由于IE8-浏览器不支持事件捕获。jQuery也不支持事件捕获

stopPropagation()

  jQuery采用标准写法stopPropagation()来实现阻止事件冒泡

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn1">按钮</button>
<button id="btn2">阻止冒泡</button>
<script>
$('#btn1').on('click',function(){
alert(1);
});
$(document).on('click',function(){
alert(0);
});
$('#btn2').on('click',function(event){
event.stopPropagation();
$('#btn1').on('click',function(event){
event.stopPropagation();
});
});
</script>

isPropagationStopped()

  event.isPropagationStopped()方法用来检测事件对象中是否调用过event.stopPropagation()

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box" style="height: 30px;background:lightblue"></div>
<script>
$('#box').click(function(event){
alert(event.isPropagationStopped());//false
event.stopPropagation();
alert(event.isPropagationStopped());//true
});
</script>

stopImmediatePropagation()

  stopImmediatePropagation()方法不仅可以取消事件的进一步冒泡,而且可以阻止同一个事件的其他监听函数被调用

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn1">按钮一</button>
<button id="btn2">按钮二</button>
<script>
$('#btn1').on('click',function(event){
event.stopImmediatePropagation();
alert(1);
});
$('#btn1').on('click',function(){
alert(2);
});
$('#btn2').on('click',function(event){
alert(1);
event.stopPropagation();
});
$('#btn2').on('click',function(){
alert(2);
});
$(document).on('click',function(){
alert(0);
});
</script>

isImmediatePropagationStopped()

  isImmediatePropagationStopped()方法用来检测事件对象中是否调用过stopImmediatePropagation()

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box" style="height: 30px;background:lightblue"></div>
<script>
$('#box').click(function(event){
alert(event.isImmediatePropagationStopped());//false
event.stopImmediatePropagation();
alert(event.isImmediatePropagationStopped());//true
});
</script>

默认行为

  jQuery使用event.preventDefault()方法来阻止默认行为

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box" style="height: 30px;background:lightblue"></div>
<script>
$('#box').contextmenu(function(event){
event.preventDefault();
});
</script>

isDefaultPrevented()

  event.isDefaultPrevented()方法可以用来检测当前事件是否阻止默认行为

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box" style="height: 30px;background:lightblue"></div>
<script>
$('#box').contextmenu(function(event){
alert(event.isDefaultPrevented());//false
event.preventDefault();
alert(event.isDefaultPrevented());//true
});
</script>

命名空间

  event.namespace属性返回事件的命名空间

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box" style="height: 30px;background:lightblue"></div>
<script>
$('#box').bind('test.abc',function(event){
alert(event.namespace);//abc
});
$('#box').click(function(){
$('#box').trigger('test.abc');
})
</script>

返回值

  event.result是事件被触发的一个事件处理程序的最后返回值

  [注意]当使用return false时,既可以阻止冒泡,也可以阻止默认行为

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<div id="box" style="height: 30px;background:lightblue"></div>
<script>
$('#box').click(function(event){
return 123;
});
$('#box').click(function(event){
$('#box').html(event.result);
})
</script>

键值

  鼠标事件中需要判断左键、右键还是滚轮。键盘事件中需要判断按下键盘的哪个按键

  jQuery使用事件对象event.whitch属性来确定鼠标事件和键盘事件键值

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="box" style="height: 30px;width: 50px;background:lightblue">按钮</button>
<script>
$('#box').on('keydown mousedown',function(event){
$(this).html(event.which);
});
</script>

深入学习jQuery事件对象的更多相关文章

  1. JavaScript 中的window.event代表的是事件的状态,jquery事件对象属性,jquery中如何使用event.target

    http://wenda.haosou.com/q/1373868839069215 http://kylines.iteye.com/blog/1660236 http://www.cnblogs. ...

  2. 知识笔记:jQuery 事件对象属性小结

    使用事件自然少不了事件对象.因为不同浏览器之间事件对象的获取,以及事件对象的属性都有差异,导致我们很难跨浏览器使用事件对象.jQuery中统一了事件对象,当绑定事件处理函数时,会将jQuery格式化后 ...

  3. jquery 事件对象属性小结

    使用事件自然少不了事件对象. 因为不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异, 导致我们很难跨浏览器使用事件对象. jQuery中统一了事件对象, 当绑定事件处理函数时, 会将jQue ...

  4. 深入学习jQuery事件绑定

    × 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...

  5. jQuery事件对象event的属性和方法

    事件处理(事件对象.目标元素的获取,事件对象的属性.方法等)在不同浏览器之间存在差异,jQuery在遵循W3C规范的情况下做了封装统一 一.事件对象常用的属性: event.type:获取事件的类型, ...

  6. jQuery事件对象的属性

    注:摘自<锋利的jQuery(第二版)> JQuery在遵循W3C规范的情况下,对事件对象的常用属性进行了封装,使得事件处理在各大浏览器下都可以正常运行而不需要进行浏览器类型判断. 1. ...

  7. jQuery 事件对象的属性

    jQuery 在遵循 W3C 规范的情况下,对事件对象的常用属性进行了封装,使得事件处理在各大浏览器下都可以正常运行而不需要进行浏览器类型判断. (1) event.type 该方法的作用是可以获取到 ...

  8. jquery 事件对象笔记

    jQuery元素操作 设置或获取元素固有属性   获取               prop(属性名)    修改               prop(属性名,值) 获取自定义属性          ...

  9. jQuery事件对象

    1.event.currentTarget 事件的监听者2.event.target 事件的目标3.event.delegateTarget 绑定了当前正在调用jQuery事件处理器的(当前事件的委托 ...

随机推荐

  1. 双向链表、双向循环链表的JS实现

    关于链表简介.单链表.单向循环链表.JS中的使用以及扩充方法:  单链表.循环链表的JS实现 关于四种链表的完整封装: https://github.com/zhuwq585/Data-Structu ...

  2. 将excel数据读入matlab

    1.[NUM,TXT,RAW]=xlsread('example'),其中example是你的excel名,假设所有的数据都在example.xls中. 2.NUM返回的是excel中的数据,TXT输 ...

  3. html5shiv.js and respond.min.js

    因为用到这两个插件,所以记录下来.. html5shiv:解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题. respond.min:让不支持Css3 Media Quer ...

  4. ajax内调用WCF服务

    WCF可以当作WebService一样被调用,在html内通过ajax调用WCF服务的方法如下: 1.新建一个WCF服务的网站项目: 2.在项目内增加一个新项:启用了ajax的WCF服务: 3.在对应 ...

  5. Cocos2d 利用继承Draw方法制作可显示三维数据(宠物三维等)的三角形显示面板

    很久没有写博客了,这段时间比较忙,又是搬家又是做自己的项目,还有太多琐碎的事情缠身,好不容易抽出时间把最近自己做的一些简单例子记录一下. 在我的项目中,我需要一个显示面板来显示游戏中的一个三维数据,例 ...

  6. Javascript外部对象

    Window 浏览器: - location:地址 - history:历史 - Document:文档 - screen:窗口 - navigator:帮助 > 1.外部对象就是浏览器提供的A ...

  7. H5+Mui文件配置 vue-resource基本使用方法

    使用HBuilder空项目搭建h5原生开发框架需要的文件配置: *css:mui.min.css *fonts:mui.ttf mui-icon-extra.ttf *js:mui.js mui.mi ...

  8. VS2015安装&简单的C#单元测试

    <软件工程>开课已经三周了,三周的上课感觉就是老师教授的概念性东西少了不少,基本就是贯穿“做中学”的教学理念,三周的时间让我学到了挺多东西,很多东西都是课本没有的. 这周的任务就是安装VS ...

  9. 下载判断Android和iOS

    //下载 function down(){ var url = ''; var u = navigator.userAgent, app = navigator.appVersion; var isA ...

  10. ubuntu下 编译安装swftools

    1.下载:http://www.swftools.org/download.html2.安装: tar -zvxf swftools-0.x.x.tar cd swftools-0.x.x ./con ...