JavaScript  event对象整理及详细介绍


Posted in Javascript onOctober 10, 2016

Event属性和方法:

1. type:事件的类型,如onlick中的click;

2. srcElement/target:事件源,就是发生事件的元素;

3. button:声明被按下的鼠标键,整数,1代表左键,2代表右键,4代表中键,如果按下多个键,酒把这些值加起来,所以3就代表左右键同时按下;(firefox中 0代表左键,1代表中间键,2代表右键)

4. clientX/clientY:事件发生的时候,鼠标相对于浏览器窗口可视文档区域的左上角的位置;(在DOM标准中,这两个属性值都不考虑文档的滚动情况,也就是说,无论文档滚动到哪里,只要事件发生在窗口左上角,clientX和clientY都是 0,所以在IE中,要想得到事件发生的坐标相对于文档开头的位置,要加上
document.body.scrollLeft和 document.body.scrollTop)

5. offsetX,offsetY/layerX,layerY:事件发生的时候,鼠标相对于源元素左上角的位置(这一定要定义position:relative;,值 可以是fixed absolute relative这几种);

6. x,y/pageX,pageY:检索相对于父要素鼠标水平坐标的整数;

7. altKey,ctrlKey,shiftKey等:返回一个布尔值;

8. keyCode:返回keydown何keyup事件发生的时候按键的代码,以及keypress 事件的Unicode字符;(firefox2不支持 event.keycode,可以用 event.which替代 )

9. fromElement,toElement:前者是指代mouseover事件中鼠标移动过的文档元素,后者指代mouseout事件中鼠标移动到的文档元素;

上面支持IE

下面的支持firefox:

event.relatedTarget;去那里
从那里来用event.srcElement || event.target

10. cancelBubble:一个布尔属性,把它设置为true的时候,将停止事件进一步起泡到(捕获)包容层次的元素;(e.cancelBubble = true; 相当于 e.stopPropagation();)

11. returnValue:一个布尔属性,设置为false的时候可以组织浏览器执行默认的事件动作;(e.returnValue = false; 相当于 e.preventDefault();)

12. attachEvent(),detachEvent()/addEventListener(),removeEventListener:为制定DOM对象事件类型注册多个事件处理函数的方法,它们有两个参数,第一个是事件类型,第二个是事件处理函数。在
attachEvent()事件执行的时候,this关键字指向的是window对象,而不是发生事件的那个元素;

13. screenX、screenY:鼠标指针相对于显示器左上角的位置,如果你想打开新的窗口,这两个属性很重要;

HTML DOM innerheight、innerwidth 属性

定义和用法

只读属性,声明了窗口的文档显示区的高度和宽度,以像素计。

这里的宽度和高度不包括菜单栏、工具栏以及滚动条等的高度。

IE 不支持这些属性。它用 document.documentElement 或 document.body (与 IE 的版本相关)的 clientWidth 和 clientHeight 属性作为替代。

Window 对象

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一:

window.document.getElementById("header");

与此相同:

document.getElementById("header");

浏览器对象模型 (BOM)

浏览器对象模型(Browser Object Model)尚无正式标准。

Window 尺寸

有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:
    - window.innerHeight - 浏览器窗口的内部高度
    - window.innerWidth - 浏览器窗口的内部宽度

对于 Internet Explorer 8、7、6、5:
    - document.documentElement.clientHeight
    - document.documentElement.clientWidth

或者
    - document.body.clientHeight
    - document.body.clientWidth

实用的 JavaScript 方案(涵盖所有浏览器):

实例

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

亲自试一试

该例显示浏览器窗口的高度和宽度:(不包括工具栏/滚动条)

Object 对象

Object 对象自身用处不大,不过在了解其他类之前,还是应该了解它。因为 ECMAScript 中的 Object 对象与 Java 中的 java.lang.Object 相似,ECMAScript 中的所有对象都由这个对象继承而来,Object 对象中的所有属性和方法都会出现在其他对象中,所以理解了 Object 对象,就可以更好地理解其他对象。

Object 对象具有下列属性:

constructor

对创建对象的函数的引用(指针)。对于 Object 对象,该指针指向原始的 Object() 函数。

Prototype

对该对象的对象原型的引用。对于所有的对象,它默认返回 Object 对象的一个实例。

Object 对象还具有几个方法:

hasOwnProperty(property)

判断对象是否有某个特定的属性。必须用字符串指定该属性。(例如,o.hasOwnProperty("name"))

IsPrototypeOf(object)

判断该对象是否为另一个对象的原型。

PropertyIsEnumerable

判断给定的属性是否可以用 for...in 语句进行枚举。

ToString()

返回对象的原始字符串表示。对于 Object 对象,ECMA-262 没有定义这个值,所以不同的 ECMAScript 实现具有不同的值。

ValueOf()

返回最适合该对象的原始值。对于许多对象,该方法返回的值都与 ToString() 的返回值相同。

注释:上面列出的每种属性和方法都会被其他对象覆盖。

一些说明:

1.  event代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等;

2.  event对象只在事件发生的过程中才有效。

firefox里的event跟IE里的不同,IE里的是全局变量,随时可用;firefox里的要用参数引导才能用,是运行时的临时变量。

在IE/Opera中是window.event,在Firefox中是event;而事件的对象,在IE中是window.event.srcElement,在Firefox中是event.target,Opera中两者都可用。

3.  下面两句效果相同

var evt = (evt) ? evt : ((window.event) ? window.event : null);

var evt = evt || window.event; // firefox下window.event为null, IE下event为null

4.  IE中事件的起泡

IE中事件可以沿着包容层次一点点起泡到上层,也就是说,下层的DOM节点定义的事件处理函数,到了上层的节点如果还有和下层相同事件类型的事件处理函数,那么上层的事件处理函数也会执行。例如, div 标签包含了 a ,如果这两个标签都有onclick事件的处理函数,那么执行的情况就是先执行标签 a 的onclick事件处理函数,再执行 div 的事件处理函数。如果希望的事件处理函数执行完毕之后,不希望执行上层的 div 的onclick的事件处理函数了,那么就把cancelBubble设置为true即可。

var s=+newDate();

解释如下:=+是不存在的;

+new Date()是一个东西;

+相当于.valueOf();

看到回复补充一下.getTime()这个也是得到毫秒数

//4个结果一样返回当前时间的毫秒数
alert(+new Date());
alert(+new Date);
var s=new Date();
alert(s.valueOf());
alert(s.getTime());

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
拖拉表格的JS函数
Nov 20 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
Dec 20 Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 Javascript
JavaScript解八皇后问题的方法总结
Jun 12 Javascript
jQuery实现手机自定义弹出输入框
Jun 13 Javascript
详解JS获取HTML DOM元素的8种方法
Jun 17 Javascript
javascript+css3开发打气球小游戏完整代码
Nov 28 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
Jan 27 Javascript
MVVM框架下实现分页功能示例
Jun 14 Javascript
vue强制刷新组件的方法示例
Feb 28 Javascript
layui prompt 设置允许空白提交的方法
Sep 24 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
Jul 17 Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 #Javascript
JavaScript 闭包机制详解及实例代码
Oct 10 #Javascript
Javascript 事件冒泡机制详细介绍
Oct 10 #Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
Oct 10 #Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
Oct 10 #Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 #Javascript
jQuery继承extend用法详解
Oct 10 #Javascript
You might like
php中计算中文字符串长度、截取中文字符串的函数代码
2011/08/09 PHP
PHP中的错误处理、异常处理机制分析
2012/05/07 PHP
请离开include_once和require_once
2013/07/18 PHP
php中Ioc(控制反转)和Di(依赖注入)
2017/05/07 PHP
使用prototype.js进行异步操作
2007/02/07 Javascript
jquery.ui.progressbar 中文文档
2009/11/26 Javascript
IE图片缓存document.execCommand("BackgroundImageCache",false,true)
2011/03/01 Javascript
JavaScript事件学习小结(一)事件流
2016/06/09 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
2016/08/17 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
JavaScript判断输入是否为数字类型的方法总结
2017/09/28 Javascript
在vue中使用express-mock搭建mock服务的方法
2018/11/07 Javascript
Vue仿微信app页面跳转动画效果
2019/08/21 Javascript
原理深度解析Vue的响应式更新比React快
2020/04/04 Javascript
[02:34]DOTA2英雄基础教程 幽鬼
2014/01/02 DOTA
如何运行Python程序的方法
2013/04/21 Python
python连接mongodb操作数据示例(mongodb数据库配置类)
2013/12/31 Python
python切换hosts文件代码示例
2013/12/31 Python
python matplotlib绘图,修改坐标轴刻度为文字的实例
2018/05/25 Python
PyTorch CNN实战之MNIST手写数字识别示例
2018/05/29 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
对python:print打印时加u的含义详解
2018/12/15 Python
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
python获取时间戳的实现示例(10位和13位)
2020/09/23 Python
python给list排序的简单方法
2020/12/10 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
美国购买韩国护肤和美容产品网站:Althea Korea
2020/11/16 全球购物
小孩百日宴答谢词
2014/01/15 职场文书
贷款委托书范本
2014/04/08 职场文书
圣诞节活动策划方案
2014/06/09 职场文书
西岭雪山导游词
2015/02/06 职场文书
2015年加油站站长工作总结
2015/05/27 职场文书
教师继续教育反思周记
2015/06/25 职场文书
MyBatis 动态SQL全面详解
2021/10/05 MySQL
css3带你实现3D转换效果
2022/02/24 HTML / CSS
Flutter集成高德地图并添加自定义Maker的实践
2022/04/07 Java/Android