深入学习jQuery事件对象
前面的话
在触发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事件对象的更多相关文章
- JavaScript 中的window.event代表的是事件的状态,jquery事件对象属性,jquery中如何使用event.target
http://wenda.haosou.com/q/1373868839069215 http://kylines.iteye.com/blog/1660236 http://www.cnblogs. ...
- 知识笔记:jQuery 事件对象属性小结
使用事件自然少不了事件对象.因为不同浏览器之间事件对象的获取,以及事件对象的属性都有差异,导致我们很难跨浏览器使用事件对象.jQuery中统一了事件对象,当绑定事件处理函数时,会将jQuery格式化后 ...
- jquery 事件对象属性小结
使用事件自然少不了事件对象. 因为不同浏览器之间事件对象的获取, 以及事件对象的属性都有差异, 导致我们很难跨浏览器使用事件对象. jQuery中统一了事件对象, 当绑定事件处理函数时, 会将jQue ...
- 深入学习jQuery事件绑定
× 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...
- jQuery事件对象event的属性和方法
事件处理(事件对象.目标元素的获取,事件对象的属性.方法等)在不同浏览器之间存在差异,jQuery在遵循W3C规范的情况下做了封装统一 一.事件对象常用的属性: event.type:获取事件的类型, ...
- jQuery事件对象的属性
注:摘自<锋利的jQuery(第二版)> JQuery在遵循W3C规范的情况下,对事件对象的常用属性进行了封装,使得事件处理在各大浏览器下都可以正常运行而不需要进行浏览器类型判断. 1. ...
- jQuery 事件对象的属性
jQuery 在遵循 W3C 规范的情况下,对事件对象的常用属性进行了封装,使得事件处理在各大浏览器下都可以正常运行而不需要进行浏览器类型判断. (1) event.type 该方法的作用是可以获取到 ...
- jquery 事件对象笔记
jQuery元素操作 设置或获取元素固有属性 获取 prop(属性名) 修改 prop(属性名,值) 获取自定义属性 ...
- jQuery事件对象
1.event.currentTarget 事件的监听者2.event.target 事件的目标3.event.delegateTarget 绑定了当前正在调用jQuery事件处理器的(当前事件的委托 ...
随机推荐
- Leetcode Maximum Product Subarray
Find the contiguous subarray within an array (containing at least one number) which has the largest ...
- C#调用win32 api程序实例
1.声明static extern 方法,使用DllImport特性 class MyClass { [DllImport("kernel32", SetLastError = t ...
- 基础2.Jquery过滤选择器
1.基础选择器: 名称 说明 举例 #id 根据元素Id选择 $("divId") 选择ID为divId的元素 element 根据元素的 ...
- js 短信验证码 计时器
$(function(){ getMsg(); //页面加载完成之后执行 }) function getMsg(){ //注册按钮的点击事件 $("#smsBtn").on(&qu ...
- Hibernate中Criteria的完整用法
1,CriteriaHibernate 设计了 CriteriaSpecification 作为 Criteria 的父接口,下面提供了 Criteria和DetachedCriteria .2,De ...
- mac安装虚拟机
1. 安装VirtualBox 2. 新建,按照步骤一步步选择 3.安装系统镜像 xp_sp3_74070.iso CN_WIN7_SP1_X64_33in1_V1.2.iso 设置磁盘分区等 4.V ...
- mina通信 demo
1,要用到4个jar 2,服务端 package mina.server; import java.io.IOException; import java.net.InetSocketAddress; ...
- HTML5将图片转化成字符画
HTML5将图片转化成字符画 字符画大家一定非常熟悉了,那么如何把一张现有的图片转成字符画呢?HTML5让这个可能变成了现实,通过canvas,可以很轻松实现这个功能.其实原理很简单:扫描图片相应位置 ...
- DES算法
好久没写过博客啦,最近在gao搞Qt,做出漂亮的UI确实挺难的,做美工也不简单啊,好啦,言归正传,下面是实现DES的python源码,是借鉴了开源中国一个大师的源码写出来的,直接贴啦. 加密部分: # ...
- xxxxxxxx
class IndexHandler(BaseRequestHandler): def get(self, page=1): print('iiiiiiiiiiiiiiiii') current_ti ...