事件对象

摘要:
1.什么是事件对象:官方解释:event对象代表事件的状态,比如键盘按键的状态,鼠标的位置,鼠标按钮的状态简单理解:事件发生后,跟事件相关的一系列信息数据的集合都放到这个对象里面,这个对象就是事件对象event,它有很多属性和方法。

1.什么是事件对象:

官方解释:event 对象代表事件的状态,比如键盘按键的状态,鼠标的位置,鼠标按钮的状态

简单理解:事件发生后,跟事件相关的一系列信息数据的集合都放到这个对象里面,这个对象就是事件对象 event,它有很多属性和方法。

2.事件对象的使用语法:

eventTarget.onclick=function( event ){

//这个 event 就是事件对象 , 我们还喜欢的写成 e 或者 evt

}

eventTarget.addEventListener('click',function( event ){

// 这个 event 就是事件对象,我们还喜欢的写成 e 或者 evt

} )

这个 event 是个形参,系统帮我们设定为事件对象, 不需要传递实参过去

当我们注册事件时, event 对象就会被系统自动创建,并依次传递给事件监听器(事件处理函数)

3.事件对象的兼容性方案

事件对象本身的获取存在兼容问题:

1.标准浏览器中是浏览器给方法传递的参数,只需要定义形参 e 就可以获取

2.在 IE6 - 8 中,浏览器不会给方法传递参数,如果需要的话,需要到 window.event 中获取查找。

解决:

e = e || window.event;

4.事件对象的常见属性和方法

e.target 返回触发事件的对象 标准

e.srcElement 返回触发事件的对象 非标准 ie6-8 使用

e.type 返回事件的类型 click mouseover 不带 on

e.cancelBubble 阻止冒泡 非标准 ie6-8 使用

e.stopPropagation() 阻止冒泡 标准

e.returnValue 阻止默认事件(默认行为)非标准 ie6-8使用 比如不让链接跳转

e.preventDefault() 阻止默认事件(默认行为) 标准 比如不让链接跳转

案例1:e.target 和 this 的区别:

this 有一个非常相似的属性 currentTarget ie678不认识 ,不常用  

e.target 返回的是触发事件的对象(元素)

this 返回的是绑定事件的对象(元素)

var ul = document . querySelector('ul');

ul.addEventListener('click',function(e){

console.log(this); // ul

console.log(e.target) // li

})

兼容性:

ul.onclick=function(e){

e = e || window.event;

var target = e.target || e.srcElement;

console.log(target);

}

案例2:阻止默认行为(事件) 让链接不跳转 或者让提交按钮不提交

a.addEventListener('click',function(e){

e.preeventDefault(); //dom 标准写法

})

传统注册方式:

a.onclick = function( e ){

// 普通浏览器 e.preventDefault(); 方法

// 低版本浏览器 ie678 returnValue 属性

// 也可以利用 return false 也能阻止默认行为 ,没有兼容性问题,特点:return 后面的代码不执行了,只限于 传统注册方式使用

return false;

alert(11); // return 后面的语句不再执行

}

案例3:阻止事件冒泡的两种方式

标准写法:利用事件对象里面的 stopPropagation()方法

e.stopPropagation(); // stop 停止 Propagation 传播

非标准写法:IE6 - 8 利用事件对象 cancelBubble 属性

e.cancel Bubble = true ; // cancel 取消 bubble 泡泡

阻止事件冒泡的兼容性解决方案

if(e && e.stopPropagation ){

e.stopProgation();

}else{

window .event .cancelBubble = true;

}

免责声明:文章转载自《事件对象》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇svn基本命令使用iOS 运行时使用(交换两个方法)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

IE6浏览器常见的bug及其修复方法

IE6不支持min-height,解决办法使用css hack: .target { min-height: 100px; height: auto !important; height: 100px; // IE6下内容高度超过会自动扩展高度 } ol内li的序号全为1,不递增。解决方法:为li设置样式d...

Linux 7.6查看开机自启

[root@tz-yycs-db01 etc]# systemctl list-unit-files |grep enable brandbot.path enabled auditd.service enabled autov...

拖放排序插件Sortable.js 兼容好及功能全个人觉得比dragula.js 好的多

经测试,Sortable.js 兼容好和使用方便都是比较不错的,特别手机端使用很棒 介绍 Sortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小,但是功能很强大)下载地址:https://github.com/RubaXa/Sor...官方DEMO:https://sortablejs.github.io/Sortable 特点 支持触屏...

centos 6.5环境利用iscsi搭建SAN网络存储服务及服务端target和客户端initiator配置详解

一、简介 iSCSI(internet SCSI)技术由IBM公司研究开发,是一个供硬件设备使用的、可以在IP协议的上层运行的SCSI指令集,这种指令集合可以实现在IP网络上运行SCSI协议,使其能够在诸如高速千兆以太网上进行路由选择。iSCSI技术是一种新储存技术,该技术是将现有SCSI接口与以太网络(Ethernet)技术结合,使服务器可与使用IP网络...

9.2.4 .net core 通过ViewComponent封装控件

我们在.net core中还使用了ViewComponent方式生成控件。ViewComponent也是asp.net core的新特性,是对页面部分的渲染,以前PartialView的功能,可以使用ViewComponent来实现。 View Component包含2个部分,一个是类(继承于ViewComponent),和它返回的结果Razor视图(和...

unity Mathf 数学运算汇总

在使用unity做游戏的过程中难免会遇到这样那样的数学运算,比如简单的正弦,余弦等。其实,在c#的Mathf 函数中 还有很多方便我们开发使用的 数学函数。在此,分享下比较全面的Mathf解析(由网上收集),方便大家参考 使用。 Mathf 数学运算 Mathf.Abs绝对值 计算并返回指定参数 f 绝对值。 Mathf.Acos反余弦 static fu...