第一百七十节,jQuery,事件对象,event 对象,默认行为,冒泡
jQuery,事件对象,event 对象,默认行为,冒泡
学习要点:
1.事件对象
2.冒泡和默认行为
JavaScript 在事件处理函数中默认传递了 event 对象,也就是事件对象。但由于浏览器 的兼容性,开发者总是会做兼容方面的处理。jQuery 在封装的时候,解决了这些问题,并且 还创建了一些非常好用的属性和方法。
一.事件对象
事件对象就是 event 对象,通过处理函数默认传递接受。之前处理函数的 e 就是 event 事件对象,event 对象有很多可用的属性和方法,我们在 JavaScript 课程中已经详细的了解 过这些常用的属性和方法,这里,我们再一次演示一下。
通过处理函数传递事件对象
//通过处理函数传递事件对象
$('input').bind('click', function (e) { //接受事件对象参数
alert(e);
});
type 属性获取这个事件的事件类型,例如:click
$('div').click(function (e) {
alert(e.type); //打印click
});
target 属性获取触发事件的 DOM 元素,就是触发元素的节点,比如,div下还有一个p,而div做了点击事件,点击div时得到的div节点,点击p时得到的p节点,适应冒泡规则
$('div').click(function (e) {
alert(e.target); //打印[object HTMLDivElement]
});
data 属性获取事件调用时的额外数据,也就是可在事件函数里以形式参数的方式传参,用data来接收,额外数据,可以是数字、字符串、数组、对象
$('div').bind('click',123456,function (e) {
alert(e.data); //打印 123456
});
注意:如果字符串就传递:'123'、如果是数组就传递:[123,'abc'],如果是对象就传递: {user : 'Lee', age : 100}。数组的调用方式是:e.data[1],对象的调用方式是:e.data.user。
relatedTarget 属性获取移入移出目标点离开或进入的那个 DOM 元素,也就是鼠标移入或者移出时,鼠标经过路径中距离事件元素最近的节点
$('span').bind('mouseover',function (e) {
alert(e.relatedTarget); //打印 鼠标经过路径中距离事件元素最近的节点
});
currentTarget 属性获取冒泡前触发的 DOM 元素,等同与 this,得到的监听元素的节点,也就是绑定事件的元素节点,不适应冒泡规则
$('div').click(function (e) {
alert(e.currentTarget); //打印[object HTMLDivElement]
});
pageX 属性获取相对于页面原点的水平坐标,也就是网页左边起始位置与鼠标的位置
$('div').bind('click',function (e) {
alert(e.screenX); //打印 网页左边起始位置与鼠标的位置
});
pageY 属性获取相对于页面原点的垂直坐标,也就是网页头部起始位置与鼠标的位置
$('div').bind('click',function (e) {
alert(e.screenY); //打印 也就是网页头部起始位置与鼠标的位置
});
screenX 属性获取显示器屏幕位置的水平坐标(非 jQuery 封装),也就是显示器视口左边位置与鼠标的位置
$('div').bind('click',function (e) {
alert(e.screenX); //打印 也就是显示器视口左边位置与鼠标的位置
});
screenY 属性获取显示器屏幕位置的垂直坐标(非 jQuery 封装),也就是显示器视口头部位置与鼠标的位置
$('div').bind('click',function (e) {
alert(e.screenY); //打印 也就是显示器视口头部位置与鼠标的位置
});
clientX 属性获取相对于页面视口的水平坐标(非 jQuery 封装),也就是浏览器视口左边位置与鼠标的位置
$('div').bind('click',function (e) {
alert(e.clientX); //打印 也就是浏览器视口左边位置与鼠标的位置
});
clientY 属性获取相对于页面视口的垂直坐标(非 jQuery 封装),也就是浏览器视口头部位置与鼠标的位置
$('div').bind('click',function (e) {
alert(e.clientY); //打印 也就是浏览器视口头部位置与鼠标的位置
});
result 属性获取上一个相同事件的返回值
$('div').bind('click',function () {
return 123;
}); $('div').bind('click',function (e) {
alert(e.result); //打印 属性获取上一个相同事件的返回值123
});
timeStamp 属性获取事件触发的时间戳
$('div').bind('click',function (e) {
alert(e.timeStamp); //打印 属性获取事件触发的时间戳,387015390
});
which 属性获取鼠标的左中右键(1,2,3),或获取键盘按键返回键码
$('input').bind('mousedown',function (e) {
alert(e.which); //打印 属性获取鼠标的左中右键(1,2,3)
});
$('input').bind('keyup',function (e) {
alert(e.which); //打印 取键盘按键,返回键码
});
altKey 属性获取是否按下了alt键
$('input').bind('click',function (e) {
alert(e.altKey); //打印 属性获取是否按下了alt键
});
shiftKey 属性获取是否按下了shift键
$('input').bind('click',function (e) {
alert(e.shiftKey); //打印 属性获取是否按下了shift键
});
ctrlKey 属性获取是否按下了ctrl键
$('input').bind('click',function (e) {
alert(e.ctrlKey); //打印 属性获取是否按下了ctrl键
});
metaKey 属性获取是否按下了meta键
获取是否按下了 alt、shift、ctrl(这三个非 jQuery 封装)或
meta 键(IE 原生 meta 键,jQuery 做了封装)
二.冒泡和默认行为
如果在页面中重叠了多个元素,并且重叠的这些元素都绑定了同一个事件,那么就会出 现冒泡问题。
冒泡说明
html
<div style="width:200px;height:200px;background:red;">
<input type="button" value="按钮"/>
</div>
如果3个元素都需要绑定点击事件,这时点击最里面的input,就会产生冒泡行为,外围的元素都会被触发
//如果3个元素都需要绑定点击事件,这时点击最里面的input,就会产生冒泡行为,外围的元素都会被触发
$('input').bind('click',function () {
alert('点击input'); //打印
});
$('div').bind('click',function () {
alert('点击div'); //打印
});
$(document).bind('click',function () {
alert('点击document'); //打印
});
注意:当我们点击文档的时候,只触发文档事件;当我们点击 div 层时,触发了 div 和 文档两个;当我们点击按钮时,触发了按钮、div 和文档。触发的顺序是从小范围到大范围。 这就是所谓的冒泡现象,一层一层往上。
jQuery 提供了一个事件对象的方法:event.stopPropagation();这个方法设置到需要触发 的事件上时,所有上层的冒泡行为都将被取消。
stopPropagation()取消事件冒泡行为
$('input').bind('click',function (e) {
alert('点击input'); //打印
e.stopPropagation(); //取消冒泡行为
});
$('div').bind('click',function (e) {
alert('点击div'); //打印
e.stopPropagation(); //取消冒泡行为
});
$(document).bind('click',function () {
alert('点击document'); //打印
});
默认行为
网页中的元素,在操作的时候会有自己的默认行为。比如:右击文本框输入区域,会弹 出系统菜单、点击超链接会跳转到指定页面、点击提交按钮会提交数据。
preventDefault()阻止元素的默认行为
$('a').click(function (e) {
e.preventDefault(); //阻止默认行为后超链接点击后无法跳转
});
禁止提交表单跳转
$('form').submit(function (e) {
e.preventDefault(); //阻止默认行为后,禁止提交表单跳转
});
同时阻止默认行为和取消冒泡行为的简写方案
注意:如果想让上面的超链接同时阻止默认行为且禁止冒泡行为,可以把两个方法同时 写上:event.stopPropagation()和 event.preventDefault()。这两个方法如果需要同时启用的时候, 还有一种简写方案代替,就是直接 return false。
$('a').click(function (e) {
return false;
});
冒泡和默认行为的一些方法
preventDefault() 取消某个元素的默认行为
$('a').click(function (e) {
e.preventDefault(); //阻止默认行为后超链接点击后无法跳转
});
isDefaultPrevented() 判断是否调用了 preventDefault()方法
//判断是否取消了元素的默认行为
$('input').keyup(function (e) {
e.preventDefault();
alert(e.isDefaultPrevented());
});
stopPropagation() 取消事件冒泡
$('input').bind('click',function (e) {
alert('点击input'); //打印
e.stopPropagation(); //取消冒泡行为
});
isPropagationStopped() 判断是否调用了 stopPropagation()方法
//判断是否调用了 stopPropagation()方法
$('input').click(function (e) {
e.stopPropagation();
alert(e.isPropagationStopped());
});
stopImmediatePropagation() 取消事件冒泡,并取消该事件的后续事件处理函数
//取消冒泡并取消后续事件处理函数
$('input').click(function (e) {
alert('input');
e.stopImmediatePropagation(); //取消冒泡并取消后续事件处理函数
});
$('input').click(function () { //这里属于后续事件,将不执行了
alert('input2');
});
$(document).click(function () {
alert('document');
});
isImmediatePropagationStopped() 判断是否调用了 stopImmediatePropagation()方法
//判断是否执行了 stopImmediatePropagation()方法
$('input').click(function (e) {
e.stopImmediatePropagation();
alert(e.isImmediatePropagationStopped());
});
第一百七十节,jQuery,事件对象,event 对象,默认行为,冒泡的更多相关文章
- 第三百七十节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索结果分页
第三百七十节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索结果分页 逻辑处理函数 计算搜索耗时 在开始搜索前:start_time ...
- 第一百二十节,JavaScript事件对象
JavaScript事件对象 学习要点: 1.事件对象 2.鼠标事件 3.键盘事件 4.W3C与IE JavaScript事件的一个重要方面是它们拥有一些相对一致的特点,可以给你的开发提供更多的强大功 ...
- 第一百七十一节,jQuery,高级事件,模拟操作,命名空间,事件委托,on、off 和 one
jQuery,高级事件,模拟操作,命名空间,事件委托,on.off 和 one 学习要点: 1.模拟操作 2.命名空间 3.事件委托 4.on.off 和 one jQuery 不但封装了大量常用的事 ...
- 第一百七十五节,jQuery,工具函数
jQuery,工具函数 学习要点: 1.字符串操作 2.数组和对象操作 3.测试操作 4.URL 操作 5.浏览器检测 6.其他操作 工具函数是指直接依附于 jQuery 对象,针对 jQuery 对 ...
- 第一百七十四节,jQuery,Ajax进阶
jQuery,Ajax进阶 学习要点: 1.加载请求 2.错误处理 3.请求全局事件 4.JSON 和 JSONP 5.jqXHR 对象 在 Ajax 课程中,我们了解了最基本的异步处理方式.本章,我 ...
- 第一百七十八节,jQuery-UI,知问前端--对话框 UI
jQuery-UI,知问前端--对话框 UI 学习要点: 1.开启多个 dialog 2.修改 dialog 样式 3.dialog()方法的属性 4.dialog()方法的事件 5.dialog 中 ...
- 第一百七十六节,jQuery,插件
jQuery,插件 学习要点: 1.插件概述 2.验证插件 3.自动完成插件 4.自定义插件 插件(Plugin)也成为 jQuery 扩展(Extension),是一种遵循一定规范的应用程序接口编 ...
- 第一百七十九节,jQuery-UI,知问前端--按钮 UI-图标
jQuery-UI,知问前端--按钮 UI 学习要点: 1.使用 button 按钮 2.修改 button 样式 3.button()方法的属性 4.button('action', param) ...
- 第一百七十七节,jQuery,知问前端--概述及 jQuery UI
jQuery,知问前端--概述及 jQuery UI 学习要点: 1.项目介绍 2.jQuery UI 3.UI 主题 一.项目介绍 我们重点仿照“知乎”的架构模式来搭建界面和布局,以及大部分前端功能 ...
随机推荐
- 客户端JavaScript加密数据,服务端Java解密数据
原文:http://blog.csdn.net/peterwanghao/article/details/43303807 在普通的页面提交时,如果没有使用SSL,提交的数据将使用纯文本的方式发送.如 ...
- SqlServer 执行计划及Sql查询优化初探
网上的SQL优化的文章实在是很多,说实在的,我也曾经到处找这样的文章,什么不要使用IN了,什么OR了,什么AND了,很多很多,还有很多人拿出仅几S甚至几MS的时间差的例子来证明着什么(有点可笑),让许 ...
- SQLSERVER调用DLL程序
在SQL Server中调用dll分为两个步骤 1.创建一个dll文件(dll文件分成3种类型,讲其中一种) 2.把dll文件放进SQL Server的程序集中.然后定义一个Function,就可以通 ...
- angular directive 的controllerAs的用法
原文: https://stackoverflow.com/questions/31857735/using-controlleras-with-a-directive --------------- ...
- [转]SQL Server 性能调优(cpu)
研究cpu压力工具 perfom SQL跟踪 性能视图 cpu相关的wait event Signal wait time SOS_SCHEDULER_YIELD等待 CXPACKET等待 CME ...
- 单用户模式下mount -o remount,rw / 有大用途
我们的Linux系统在无法启动时候,通常需要进入单用户模式下进行修改一些配置文件,或调整一些参数方可.但是在进入单用户模式后,我们的/文件系统是只读模式,无法进行修改,那么这个时候我们就需要用到一条命 ...
- iOS之基于FreeStreamer的简单音乐播放器(模仿QQ音乐)
代码地址如下:http://www.demodashi.com/demo/11944.html 天道酬勤 前言 作为一名iOS开发者,每当使用APP的时候,总难免会情不自禁的去想想,这个怎么做的?该怎 ...
- 网络协议系列之三:IP
前言 这篇博客主要对IP协议中一些基础知识点加以总结,并将书中一些晦涩难懂的部分去除了.IP地址协议是网络层中最重要的协议,IP地址协议能够对因特网上的全部设备进行唯一标识.也正由于有了IP协议,我们 ...
- 安装Drupal7.12+Postgresql9.1(Ubuntu Server 12.04)
怀揣着为中小企业量身定做一整套开源软件解决方案的梦想开始了一个网站的搭建.http://osssme.org/ OS环境准备 这次是从OS开始安装的.最开始装Ubuntu12.04这里就不再赘述, 唯 ...
- LoadRunner+Java接口性能测试
想必各位小伙伴们会对LR还可以调用java感到好奇,之前我也这么一直认为LR只支持C语言.其实LR脚本支持的语言有:C.Java.Visual Basic.VbScript.JavaScript,只不 ...