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 相关文章推荐
ExtJs3.0中Store添加 baseParams 的Bug
Mar 10 Javascript
限制文本框输入N个字符的js代码
May 13 Javascript
(function($){...})(jQuery)的意思
Jul 22 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
Aug 23 Javascript
jQuery实现动画效果的简单实例
Jan 27 Javascript
jquery插件bxslider用法实例分析
Apr 16 Javascript
纯js实现手风琴效果
Apr 17 Javascript
Bootstrap和Java分页实例第二篇
Dec 23 Javascript
用angular实现多选按钮的全选与反选实例代码
May 23 Javascript
fetch 使用及如何接收JS传值
Nov 11 Javascript
jquery实现企业定位式导航效果
Jan 01 jQuery
js 计算月/周的第一天和最后一天代码
Feb 01 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
PHP4 与 MySQL 数据库操作函数详解
2006/12/06 PHP
PHP的APC模块实现上传进度条
2015/10/27 PHP
PHP内核探索之解释器的执行过程
2015/12/22 PHP
PHP+swoole+linux实现系统监控和性能优化操作示例
2019/04/15 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
不错的一个日期输入 动态
2006/11/06 Javascript
JavaScript 关键字屏蔽实现函数
2009/08/02 Javascript
jQuery文本框(input textare)事件绑定方法教程
2013/04/24 Javascript
AJAX跨域请求json数据的实现方法
2013/11/11 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
JavaScript访问CSS属性的几种方式介绍
2014/07/21 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
2015/03/20 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
2015/12/28 Javascript
Angular 4环境准备与Angular cli创建项目详解
2017/05/27 Javascript
JS实现简易换图时钟功能分析
2018/01/04 Javascript
node中使用es6/7/8(支持性与性能)
2019/03/28 Javascript
NodeJS多种创建WebSocket监听的方式(三种)
2020/06/04 NodeJs
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
2020/09/21 Javascript
使用vue3重构拼图游戏的实现示例
2021/01/25 Vue.js
[01:21]DOTA2新纪元-7.0新版本即将开启!
2016/12/11 DOTA
[01:19:46]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第一场 2月28日
2021/03/11 DOTA
Python将多个list合并为1个list的方法
2018/06/27 Python
python使用writerows写csv文件产生多余空行的处理方法
2019/08/01 Python
Python中字典与恒等运算符的用法分析
2019/08/22 Python
TensorFlow实现打印每一层的输出
2020/01/21 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
css3实现书本翻页效果的示例代码
2021/03/08 HTML / CSS
美国从事品牌鞋类零售的连锁店:Famous Footwear
2016/08/25 全球购物
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
绘画设计学生的个人自我评价
2013/09/20 职场文书
阅兵口号
2014/06/19 职场文书
死者家属慰问信
2015/03/24 职场文书
2015年全国助残日活动方案
2015/05/04 职场文书