javaScript中的事件对象event
事件对象event,每当一个事件被触发的时候,就会随之产恒一个事件对象event,该对象中主要包括了关于该事件的基本属性,事件类型type(click、dbclick等值)、目标元素target(我的理解是事件源对象,即触发该事件的dom元素)等,以及一些与该事件相关的方法。取消事件默认行为preventDefault()、组织事件继续冒泡或捕获stopPropagation()等等,这里我仅仅列举了,项目中我用到的属性和方法。
既然事件被触发。就随之产生了一个event对象。笔者在IE中測试了。不须要通过赋值就可以使用,也许低版本号的须要吧,火狐浏览器是须要对其进行赋值的,在这里我认为须要养成一个习惯。多谢一行代码呗。每次在事件处理程序中使用event对象,都通过赋值的方式去使用:
var event = event||window.event;
事实上,默认參数数组中第一元素就是event对象,也就是说,能够用数组元素赋值
var event = arguments[0];
type属性。应该是最easy理解的,事件类型。单击click,双击dbclick等等
target属性,触发事件的dom元素对象。我看到网上说target是火狐浏览器。srcElement是IE中的,可是我測试的结果是。在IE11中两个都能够使用了,一样的效果。可是火狐中仅仅能使用target属性,浏览器之间的实现方式能不能有个通用的标准呢,兼容性非常纠结呢,所以和event对象的获取一样,建议是通过赋值的方式去获取触发事件的dom对象:
var target = event.target||event.srcElement;
preventDefault()方法是用来取消默认事件行为的,比方超链接,点击超链接,会依据href属性,跳到还有一个页面。之前在项目中。就遇到非常多须要取消超链接的默认点击行为,在点击事件处理程序中。取消默认的事件行为,能够例如以下操作:
if(event.preventDefault){//推断该函数是否存在
event.preventDefault;
}else{
returnValue = false;
}
这样也实现了取消超链接的默认行为,事实上在项目中,还看到别的同事使用的别的方式,也取消是默认的点击行为
<a href="javaScript:void(0);">也行</a>
stopPropagation()方法直接就取消事件的继续冒泡或者捕获了,这个非常有用的,假设父元素和子元素都绑定了某个相同类型的事件,比方都绑定了click事件。如今用户触发了一个事件,事件在捕获阶段被触发,针对父元素,则会继续向下捕获。进而触发子元素的事件。针对子元素。在冒泡阶段被触发,也相同由于冒泡行为,会触发父元素的事件。因此往往须要取消这样的无意的触发。
if(event.stopPropagation){//推断是否存在
event.stopPropagation();
}else{
event.cancleBubble = true;
}
2014年9月30日22:04:18
兴许项目中。假设还是用到了别的相关操作,我在继续补充
javaScript中的事件对象event的更多相关文章
- javaScript中的事件对象event是怎样
事件对象event,每当一个事件被触发的时候,就会随之产恒一个事件对象event,该对象中主要包含了关于该事件的基本属性,事件类型type(click.dbclick等值).目标元素target(我的 ...
- JavaScript中的事件对象
JavaScript中的事件对象 JavaScript中的事件对象是非常重要的,恐怕是我们在项目中使用的最多的了.在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有 ...
- JavaScript 中的事件对象(读书笔记思维导图)
在触发 DOM 上的某个事件时,会产生一个事件对象 event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对象中,会包含 ...
- Javascript中的事件对象和事件类型
接上次看JS的事件冒泡和捕获,所以顺带就把事件相关的知识都看完好了 而且想到一个好的学习方法,第一天自己看,第二天把前一天学习的东西写下来,一方面可以当复习,一方面当重新整理并且分享 事件对象 事件处 ...
- javaScript动画3 事件对象event onmousemove
事件对象的获取(event的获取) var event = event || window.event;(主要用这种) screenX.pageX和clientX的区别 PageY/pageX: 鼠标 ...
- 彻底理解javascript 中的事件对象的pageY, clientY, screenY的区别和联系。
说到底, pageY, clientY, screenY的计算,就是要找到参考点, 它们的值就是: 鼠标点击的点----------- 和参考点指点----------的直角坐标系的距离 stacko ...
- 谈谈事件对象-event
JavaScript 中的事件对象(event) 当我们每次触发一种事件(如点击事件),我们会在回调函数中传入事件对象event.今天就来来谈谈. 1.当我们想判断当前事件是我们想要的事件类型时,可以 ...
- javascript中的事件Event
一.事件流 1.事件流:描述的是从页面中接受事件的顺序 IE的事件流是事件冒泡流,Netscape的事件流是事件捕获流. 2.事件冒泡 IE的事件流叫做事件冒泡(event bubbing),即事件开 ...
- JavaScript:事件对象Event和冒泡
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 绑定事件的两种方式 我们在上一篇文章中已经讲过事件的概念.这里讲一下注册 ...
随机推荐
- Android nomedia 避免图片等资源泄露在系统图库其中
总结 Android nomedia 避免文件泄露在系统图库和系统铃声中 在应用开发中 项目的图片总是被系统的图库收录了 避免图片被系统图库收录的发现有2个方法 第一种针对图片 将 .png为后缀的图 ...
- 为什么网络银行不支持GNU/Linux操作系统下的浏览器操作
当年Linux没出时.银行就開始信息化建设了. 所为信息化,就是指用计算机工作了.服务客户了. 顺带着,慢慢的建server,连网(内部网).外网(网上银行) 这样下来, unix, dos, win ...
- 2014秋C++ 第7周项目 数据类型和表达式
课程主页在http://blog.csdn.net/sxhelijian/article/details/39152703,课程资源在云学堂"贺老师课堂"同步展示,使用的帐号请到课 ...
- Android学习笔记之ProgressBar案例分析
(1) <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:to ...
- 解决 Eclipse 导入项目后 Maven Dependencies missing jar 问题
转自:https://yq.aliyun.com/ziliao/314086 话不多说直接上图 上图是我通过git导入项目后, Maven Dependencies Library中很多包出现miss ...
- struts2学习之基础笔记3
第8章Struts 2类型转换 使用类型转换器 自定义类型转换器 步骤:1. Struts 2 构建流程 2.自定义类型转换器类(继承 DefaultTypeConverter /StrutsType ...
- 初学C#,总结一下.sln和.csproj的区别
1.sln:solusion 解决方案 csproj:c sharp project C#项目 csproj文件大家应该不会陌生,那就是C#项目文件的扩展名,它是“C Sharp Project”的缩 ...
- Python——wordcloud
import jiebafrom wordcloud import WordCloud,STOPWORDSimport matplotlib.pyplot as pltfrom scipy.misc ...
- H5-移动端适配
之前写H5页面也会遇到适配问题, 是通过媒体查询一点一点调整,始终觉得很繁琐,但一直也没去想想解决的办法. 今天专门花了一上午的时间来去研究. 小生只是刚踏入前端路的小白,对于网上各位大佬的讲解适配 ...
- vue 表格数据编辑,点击取消或者完成按钮后,关闭编辑状态没有及时生效
点击编辑按钮: 编辑状态下,表格可以编辑.但是点击“确认”或者“取消”按钮,列数据编辑状态已经修改,但是视图没有改变. 页面代码: 获取当前行的index,并直接修改当前行用于判断是否编辑状态的数据为 ...