JavaScript event事件

来源：互联网发布：阿里云备案邮寄地址编辑：程序博客网时间：2024/05/24 04:06

Event对象简介
当事件发生时，会自动向事件调用函数，传递一个event参数。那么，这个event参数，就是event对象。
Event对象的作用：可以获取当前事件发生时的环境信息。如：点击时的坐标值。
Event对象是短暂存在的，也就是：当一个新的事件发生时，这个event对象就消失了。
每时每刻，只能有一个事件发生。每时每刻，只能有一个event对象产生。

一、DOM中Event对象——标准浏览器(火狐、谷歌)
1、DOM中引入Event对象
（1）通过HTML标记的事件属性来传递event对象
提示：在传递event时，该event参数，必须全小写，并且不能加引号。
（2）使用元素对象的事件属性来传递event对象

2、DOM中Event对象属性
type：事件类型
clientX和clientY：相对浏览器窗口的坐标。(包括滚动条)
pageX和pageY：相对网页左端和顶端的距离。(不包括滚动条)
screenX和screenY：相对显示屏幕左端和顶端的距离。

二、IE中Event对象
在IE中，event是window对象的一个属性。如：window.event或event。所以js函数中不用传递参数，直接使用。

IE中Event对象属性
type：事件类型
clientX和clientY：相对浏览器窗口的坐标。
x和y：相对于网页的坐标。

screenX和screenY：相对于屏幕的坐标。

DOM中(火狐谷歌浏览器)通过HTML标记的event属性来传递event对象：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript">//实例：单击图片，显示坐标值function get_xy(e){var str = "窗口左边距离："+e.clientX+",窗口上边距离："+e.clientY;str += "\n网页左边距离："+e.pageX+",网页顶边距离："+e.pageY;str += "\n屏幕左边距离："+e.screenX+",屏幕顶边距离："+e.screenY;str += "\n事件类型："+e.type;alert(str);}</script></head><body><img id="img01" width="400" src="images/01.jpg" onclick="get_xy(event)" />   <!--event是固定写法，不带引号--></body></html>

DOM中(火狐谷歌浏览器)在JavaScript中用元素对象的事件属性来传递event对象：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript">//实例：单击图片，显示坐标值window.onload = function(){//获取id=img01的元素对象var imgObj = document.getElementById("img01");//绑定onclick事件：这种情况不能带括号，也不能传参数//但是，第一个形参，就是event对象。imgObj.onclick = get_xy; //传地址，不带括号。带括号就相当于执行。}function get_xy(e)//必须接收event参数，第一个形参就是event对象。{var str = "窗口左边距离："+e.clientX+",窗口上边距离："+e.clientY;str += "\n网页左边距离："+e.pageX+",网页顶边距离："+e.pageY;str += "\n屏幕左边距离："+e.screenX+",屏幕顶边距离："+e.screenY;str += "\n事件类型："+e.type;alert(str);}</script></head><body><img id="img01" width="400" src="images/01.jpg" /></body></html>

IE中引入event对象：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript">//实例：在IE中，获取鼠标坐标值function get_xy(){var str = "窗口左边距离："+event.clientX+",窗口上边距离："+event.clientY; //event是window的一个属性，直接使用，不用通过参数传递。str += "\n网页左边距离："+event.x+",网页顶边距离："+event.y;  //ie中的x,y相当于DOM(火狐谷歌)中的pageX,pageYstr += "\n屏幕左边距离："+event.screenX+",屏幕顶边距离："+event.screenY;str += "\n事件类型："+event.type;alert(str);}</script></head><body><img width="400" src="images/01.jpg" onClick="get_xy()" /></body></html>

为了兼容DOM(火狐谷歌)和IE浏览器，可以用三元运算符：

var x = e.clientX ? e.clientX : event.clientX; //JavaScript中，用三元运算符兼容IE。

阅读全文

0 0