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

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

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. winutils spark windows installation

    http://stackoverflow.com/questions/37305001/winutils-spark-windows-installation

  2. (简单) LightOJ 1074 Extended Traffic，SPFA+负环。

    Description Dhaka city is getting crowded and noisy day by day. Certain roads always remain blocked ...

  3. OC语言的特性(二)-Block

    本篇文章的主要内容 了解何谓block. 了解block的使用方法. Block 是iOS在4.0版本之后新增的程序语法. 在iOS SDK 4.0之后,Block几乎出现在所有新版的API之中,换句 ...

  4. ucos事件邮箱信号量队列详解

    Ucos的事件分为时钟,信号量,互斥性信号量,消息队列,以及消息邮箱 首先说信号量 信号量在ucos中的类型定义为OS_EVENT_TYPE_SEM,在任务控制块ecb中,主要是用到的是信号量计数器O ...

  5. BZOJ2698染色

    2698: 染色 Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 223  Solved: 150[Submit][Status][Discuss] De ...

  6. UVa 10827 - Maximum sum on a torus

    题目大意:UVa 108 - Maximum Sum的加强版,求最大子矩阵和,不过矩阵是可以循环的,矩阵到结尾时可以循环到开头.开始听纠结的,想着难道要分情况讨论吗?!就去网上搜,看到可以通过补全进行 ...

  7. 按住ctrl键可以在新窗口打开图片

    用firebug查看网页时,img标签(或background属性里面的url地址源)里面的图片源按住ctrl键可以弹出新窗口显示,并可右键另存为到本地目录

  8. max-width

    #main { max-width: 600px; margin: 0 auto; } <div id="main"> Using max-width instead ...

  9. 最近iOS开发遇到的问题

    1)计算器,编辑框键盘: 2)类间参量引用传递: 3)饼状图: 4)折线图: 5)uicollection使用: 6)富文本开发: 7)separatorInset,layoutMargins uit ...

  10. Java网络编程总结

    网络编程: 端口: 物理端口: 逻辑端口:用于标识进程的逻辑地址,不同进程的标识:有效端口:0~65535,其中0~1024系统使用或保留端口. java 中ip对象:InetAddress. imp ...