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 图片轮播(5张图片)
Dec 30 Javascript
网页前台通过js非法字符过滤代码(骂人的话等等)
May 26 Javascript
查看源码的工具 学习jQuery源码不错的工具
Dec 26 Javascript
javascript常用的方法分享
Jul 01 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
Jan 12 Javascript
浅析$(function) ready和onload 的区别
Sep 03 Javascript
jQuery中绑定事件bind() on() live() one()的异同
Feb 23 Javascript
Javascript读取上传文件内容/类型/字节数
Apr 30 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
Oct 15 Javascript
如何实现echarts markline标签名显示自己想要的
Jul 20 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
Jul 30 Javascript
js实现点击按钮随机生成背景颜色
Sep 05 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
咖啡的植物学知识
2021/03/03 咖啡文化
php IP转换整形(ip2long)的详解
2013/06/06 PHP
php程序内部post数据的方法
2015/03/31 PHP
PHP中异常处理的一些方法整理
2015/07/03 PHP
PHP不使用递归的无限级分类简单实例
2016/11/05 PHP
PHP设计模式之策略模式原理与用法实例分析
2019/04/04 PHP
JavaScript 语言的递归编程
2010/05/18 Javascript
jquery下实现overlay遮罩层代码
2010/08/25 Javascript
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
jQuery实现动画效果的简单实例
2014/01/27 Javascript
JavaScript中扩展Array contains方法实例
2020/08/23 Javascript
loading动画特效小结
2017/01/22 Javascript
jQuery中 bind的用法简单介绍
2017/02/13 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
2018/10/23 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
2018/12/28 Javascript
微信小程序websocket聊天室的实现示例代码
2019/02/12 Javascript
Vue infinite update loop的问题解决
2019/04/23 Javascript
Layui选项卡制作历史浏览记录的方法
2019/09/28 Javascript
js实现圆形显示鼠标单击位置
2020/02/11 Javascript
[41:20]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS DK
2014/05/26 DOTA
[29:59]完美世界DOTA2联赛PWL S3 Forest vs access 第二场 12.11
2020/12/13 DOTA
python将多个文本文件合并为一个文本的代码(便于搜索)
2011/03/13 Python
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
浅谈python import引入不同路径下的模块
2017/07/11 Python
pandas表连接 索引上的合并方法
2018/06/08 Python
python sklearn包——混淆矩阵、分类报告等自动生成方式
2020/02/28 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
python编写一个会算账的脚本的示例代码
2020/06/02 Python
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
电大毕业自我鉴定
2014/02/03 职场文书
公司领导班子四风对照检查材料
2014/09/27 职场文书
党的群众路线教育实践活动组织生活会发言材料
2014/10/17 职场文书
网络妈妈观后感
2015/06/08 职场文书
退休欢送会主持词
2015/07/01 职场文书