event对象

Js的event对象用来描述Js的事件,它主要作用于IE和NN4(Netscape Navigator4)以后的各个浏览器版本中。event对象代表事件状态,如事件发生的元素、键盘状态、鼠标位置和鼠标按钮状态。一旦事件发生,便会生成event对象,如单击一个按钮,浏览器的内存中就产生相应的event对象。

1.在IE中引用event对象

在IE中,event对象被作为window对象属性访问:

window.event

由于window引用部分是可选的,因此脚本像全局引用一样对待event对象:

event.propertyName

这样,一个事件处理程序的任何语句在不进行特殊处理和初始化的情况下,都可以访问event对象。

2.在W3C中引用event对象

在W3C事件模型中,event对象引用比较复杂。在多数情况下,必须明确地将event对象作为一个参数传递到时间处理函数中。event对象有时可自动作为参数传递,这依赖于事件处理函数如何与对象绑定。
如果使用原始的方法将事件处理函数与对象绑定(通过元素标记的一个属性),则必须把event对象作为参数传递。例如:

onKeyUp=“example(event)”

这是W3C模型中唯一像全局引用一样明确引用event对象的方式,这个引用只作为事件处理函数的参数,在别的内容中不起作用。如果有多个参数,则event对象引用可以以任意顺序排列,例如:

onKeyUp=“example(this,event)”

与元素绑定的函数定义应该有一个参数变量来“捕获event对象参数:

function example(widget,evt){…}

这个参数变量名称没有任何限制,例子中,使用event对象或evt。在跨浏览器的脚本中使用,应避免使用event作为参数变量名,以避免与IE的event属性冲突。

还可以通过其他方式将事件处理函数绑定到对象(在NN6+中,使用属性赋值和W3C DOM的addEventListener()方法),将这些事件处理函数的引用赋给文档中所需的对象。例如:

document.forms[0].someButton.onKeyUp=example;
document.getElementById('myButton').addEventListener("KeyUp",example,false);

通过这些方式进行事件绑定可以防止自己的参数直接到达调用的函数。但是,W3C浏览器自动传送event对象的引用并将它作为唯一参数,这个event对象是为响应激活事件的用户或系统行为而创建的。也就是说,函数需要用一个参数变量来拒收传递的event对象:

function example(evt){…}

事件对象包含作为事件目标的对象(例如,包含表单控件对象的表单对象)的引用,从而可以访问该对象的任何属性。

3、event对象的属性

(1)altLeft属性
该属性设置或获取左Alt键的状态。检索左Alt键的当前状态,返回值true表示关闭,false为不关闭。
语法:

[window.]event.altLeft

由于altLeft属性是Boolean值,因此可以将该属性应用到if语句中,根据获取的值不同而执行不同的操作。
(2)ctrlLeft属性
该属性设置或获取左Ctrl键的状态。检索左Ctrl键的当前状态,返回值true表示关闭,false为不关闭。
语法:

[window.]event.ctrlLeft

由于ctrlLeft属性是Boolean值,因此可以将该属性应用到if语句中,根据获取的值不同而执行不同的操作。
(3)shiftLeft属性
该属性设置或获取左Shift键的状态。检索Shift键的当前状态,返回值true表示关闭,false为不关闭。
语法:

[window.]event.shiftLeft

由于shiftLeft属性是Boolean值,因此可以将该属性应用到if语句中,根据获取的值不同而执行不同的操作。
由于这3个属性的值都是Boolean类型的,所以可以将它们组合成一个条件在if语句中应用,并且也可以和altKey、ctrlKey和shiftKey属性同时使用。
例:将altKey、ctrlKey和shiftKey属性进行组合,组合成一个综合的条件,应用if语句判断当Ctrl键、shift键和Alt键同时按下是执行一个操作。
代码如下:

<script>
    function example(){        //创建自定义函数
        //应用if语句判断Ctrl键、shift键和Alt键是否同时被按下
        if(window.event.ctrlKey && window.event.altKey && window.event.shiftKey){
            //如果Ctrl键、Shift键和Alt键同时按下,则执行下面的内容
            alert('Ctrl键、Shift键和Alt键同时按下啦!')
        }
    }
    document.onkeydown = example;
</script>

(4)botton属性
该属性设置或获取事件发生时用户所按的鼠标键。
语法:

[window.]event.button

该属性的值如表所示。

说明 说明
0 表示没有按键 4 按下中间键
1 按下左键(主键) 5 同时按下左键和中间键
2 按下右键 6 同时按下右键和中间键
3 同时按下左键和右键 7 同时按下左键、中间键和右键

当用户按下多个键时,每次按键都激活一个onmousedown事件。如果用户首先按下左键,则onmousedown事件激活,event.button属性值为1;如果此时按下右键,那么onmousedown事件再次发生,但event.button属性值为3。如果脚本同时按下两个按键执行特殊动作,那么就应该忽略单一按键动作,因为在处理过程中很可能激活单键事件,从而干扰目标行为。

button属性仅用于onmousedown、onmouseup和onmousemove事件。对于其他事件,无论鼠标状态如何,都返回0(如onclick);

例子:在页面中的任何位置单击鼠标右键都弹窗“你点击右键了”的对话框,单击“确定”按钮后将进入到明日科技网站的首页。代码如下:

<script>
    function gosite(){
        if(event.button == 2){
            alert('你点击右键了');
            window.open('http://www.baidu.com/');
            return false;
        }
    }
    document.onmousedown = gosite;
</script>

(5)clientX属性
该属性获取鼠标在浏览器窗口中的X坐标,它是一个只读属性,即只能获取鼠标的当前位置,不能改变鼠标的位置。
语法:

[window.]event.clientX

(6)clientY属性
该属性获取鼠标在浏览器窗口中的Y坐标,它是一个只读属性,即只能获取鼠标的当前位置,不能改变鼠标的位置。
语法:

[window.]event.clientY

(7)X属性
该属性设置或获取鼠标指针位置相对于css属性中有position属性的上级元素的X轴坐标。如果css属性中没有position属性的上级元素,默认以body元素作为参考对象。
语法:

[window.]event.X

如果鼠标事件触发后,鼠标移出窗口外,则返回的值为-1。这是个只读属性,只能通过它获取鼠标的当前位置,但不能用它来更改鼠标的位置。
(8)Y属性
该属性设置或获取鼠标指针位置相对于css属性中有position属性的上级元素的Y轴坐标。如果css属性中没有position属性的上级元素,默认以body元素作为参考对象。
语法:

[window.]event.Y

如果鼠标事件触发后,鼠标移出窗口外,则返回的值为-1。这是个只读属性,只能通过它获取鼠标的当前位置,但不能用它来更改鼠标的位置。
(9)cancelBubble属性
该属性检测是否接受上层元素的事件的控制。如果该属性的值是false,则允许被上层元素的事件控制;否则值为true,则不被上层元素的事件控制。
语法:

[window.]event.cancelBubble[=cancelBubble]

(10)srcElement属性
该属性设置或获取触发事件的对象。srcElement属性是事件初始目标的HTML元素对象引用。由于事件通过元素容器层次进行处理,且可以在任何一个层次进行处理,因此由一个属性指向产生初始事件的元素是很有帮助的。
语法:

[window.]event.srcElement

通过该属性可以读、写属于该元素的属性,并调用它的任何方法。


真烧脑~~
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,657评论 6 505
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,889评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,057评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,509评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,562评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,443评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,251评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,129评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,561评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,779评论 3 335
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,902评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,621评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,220评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,838评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,971评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,025评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,843评论 2 354

推荐阅读更多精彩内容