哎，事件也有对象呦。程序员一直在讲对象对象，那么，过年是不是该带个对象回家呢？
好了，既然事件有对象，承认这个事实吧！哈哈，那么，其就有属性，接下来，就放个

例子来讲讲，顺便把常用的属性也添加进去。。

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

	</head>

	<body>

		<input type="button" id="btn" value="按下">

		<div id="do"></div>
 

		<script>

		   window.onload = function(){

		   	 var bt = document.getElementById("btn");

		   	 bt.onclick = ff;

		   	 bt.onmouseover = ff;

		   }

		   function ff(evn){

		   	var di = document.getElementById("do");

		   	if(window.event){evn = window.event}/*事件对象，兼容ie，事件对象是ie的一个属性*/

		   	if(evn.type == "click"){/*就把这里的自定义evn作为一个对象来处理，这里，判断evn的事件对象的操作事件方式*/

		   		di.innerHTML+= "click<br>";

		   	}

		   	else if(evn.type == "mouseover"){

		   		di.innerHTML+= "mouseover<br>";

		   	}

		   	/*接下的都是事件对象的一些常用属性*/

		   	console.log(evn.button);/*事件对象button属性*/

		   	console.log(evn.type);/*事件对象type属性*/

		   	console.log(evn.clientX);/*事件对象clientX属性 事件发生的时候，鼠标相对于浏览器窗口可视文档区域的左上角的位置*/

		   	console.log(evn.clientY);/*事件对象clientY属性*/

		   	console.log(evn.offsetX);/*事件对象offsetX属性 事件发生的时候，鼠标相对于源元素左上角的位置*/

		   	console.log(evn.offsetY);/*事件对象offsetY属性*/

		   	console.log(evn.screenX);/*事件对象screenX属性鼠标指针相对于显示器左上角的位置*/

		   	console.log(evn.screenY);/*事件对象screenY属性*/

		   	console.log(evn.target.nodeName);/*事件对象target属性 事件源，就是发生事件的元素；*/

		   }

		</script>

	</body>

</html>

　　

js事件对象的更多相关文章

  1. JavaScript学习06 JS事件对象

    JavaScript学习06 JS事件对象 事件对象:当事件发生时,浏览器自动建立该对象,并包含该事件的类型.鼠标坐标等. 事件对象的属性:格式:event.属性. 一些说明: event代表事件的状 ...

  2. JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习

    JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习 btn.onclick = function(event) { 语句 } 其中event就是事件对象,在这个方法中指向的对象是onc ...

  3. JS—事件对象

    在触发DOM上的某个事件时,会产生一个事件对象event.这个对象中包含着所有与事件有关的信息.包括导致事件的元素,事件的类型以及其他与特定事件相关的信息. 举例鼠标操作导致的事件对象中,会包含鼠标位 ...

  4. JS事件对象与事件委托

    事件对象 包含事件相关的信息,如鼠标.时间.触发的DOM对象等 js默认将事件对象封装好,并自动的以参数的形式,传递给事件处理函数的第1个参数,如下: document.getElementsByTa ...

  5. JS 事件对象和事件冒泡

    1.事件对象 js的事件对象中保存了当前被触发事件的一些相关的属性信息,如事件源.事件发生时的鼠标位置.事件按键等. 事件对象的获取方法: IE中可以window.event直接获取,而Firefox ...

  6. JS:事件对象1

    一,this关键字和上下文 var box = document.getElementById("box");. 普通的函数如果没有给他传递参数,函数本身是没有参数的. test( ...

  7. js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象

    事件对象    在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对 ...

  8. js 事件对象

    /* 事件绑定的格式: 元素节点.on + 事件类型 = function(){ } 元素节点 事件类型 on+事件类型:事件处理函数 [注]上述三者一绑定:生成一个新的事件对象. [注]触发事件以后 ...

  9. js 事件对象event

    在触发DOM上的某个事件时,会产生一个事件对象event.这个对象中包含着所有与事件有关的信息.包括导致事件的元素,事件的类型以及其他与特定事件相关的信息. <body> <a hr ...

随机推荐

  1. 【BZOJ 1572】 1572: [Usaco2009 Open]工作安排Job（贪心+优先队列）

    1572: [Usaco2009 Open]工作安排Job Description Farmer John 有太多的工作要做啊!!!!!!!!为了让农场高效运转,他必须靠他的工作赚钱,每项工作花一个单 ...

  2. 51Nod 1534

    分析:Pwin代表Polycarp走的步数,而Win代表Vasiliy走的步数,则有Pwin=p.x+p.y,Vwin=max(v.x,v.y);显然若Pwin<=Win,肯定是Vasiliy胜 ...

  3. Hibernate与IBatis的优缺点及可行性分析

    以下文章来源于考试大 1.优点 简单: 易于学习,易于使用,通过文档和源代码,可以比较完全的掌握它的设计思路和实现. 实用: 提供了数据映射功能,提供了对底层数据访问的封装(例如ado.net),提供 ...

  4. iOS之UITableView的上拉刷新

    #import "ViewController.h" #import "UITableView+PullRefresh.h" @interface ViewCo ...

  5. Linux终端、控制台复制粘贴

    1. 在终端下:          复制命令:Ctrl + Shift + C  组合键.          粘贴命令:Ctrl + Shift + V  组合键.  2. 在控制台下:        ...

  6. Spring自学教程-ssh整合(六)

    以下是本人原创,如若转载和使用请注明转载地址.本博客信息切勿用于商业,可以个人使用,若喜欢我的博客,请关注我,谢谢!博客地址 感谢您支持我的博客,我的动力是您的支持和关注!如若转载和使用请注明转载地址 ...

  7. 设计模式笔记之四：MVP+Retrofit+RxJava组合使用

    本博客转自郭霖公众号:http://mp.weixin.qq.com/s?__biz=MzA5MzI3NjE2MA==&mid=2650236866&idx=1&sn=da66 ...

  8. $_SERVER参数的含义

    $_SERVER是由服务器创建的,包含了头信息.参数.路径等信息,以下是一些键代表的含义: $_SERVER['PHP_SELF'] #当前正在执行脚本的文件名,与 document root相关.$ ...

  9. NSCalendar 日历类

    NSCalendar 日历类 Cocoa中对日期和时间的处理 NSCalendar (一) (2008-11-12 21:54:10) NSCalendar用于处理时间相关问题.比如比较时间前后.计算 ...

  10. Markdown及MarkdownPad使用规则

    Markdown Markdown 是一种轻量级标记语言.它允许人们"使用易读易写的纯文本格式编写文档,然后转换成有效的XHTML(或者HTML)文档". Markdown语法简要 ...