JS中的event 对象包含哪些东西 event,实例 详解

JavaScript016

JS中的event 对象包含哪些东西 event,实例 详解,第1张

JS中的event对象,指的是用户的操作。比如onclick,onkeydown都是属于事件,事件严格的说不是对象,他其实是一种方法,只是这种方法他是通过某种行为去调用的,不是我们手动写代码调用的,就如点击事件是在鼠标点击时被调用

事件被赋值常见是直接在标签里赋值,如<input id="a" type="button" onclick="alert()">

你也可以用js赋值

document.getElementById("a").onclick=function(){

alert()

}

看见了吗,把一个function赋给了点击事件,所以说事件他实质上方法

前言:有些事情看上去简单甚至于平淡无奇,比如说爱情或者我们的生活可实际上却很复杂。js里面的event也是一样,不信就打印一下一个平淡无奇的onclick里面包含的event,只要在方法内传入参数event,或者e,还有ev然后打印,你就会发现一个新的天地。

核心内容:多种事件的运用场景解析

开始了

1吹牛逼

2吹牛逼

3也许我别来,你自然无恙

A:复杂多样的鼠标事件

应用:鼠标事件很多,平时用个点击就以为用过那就大错特错了,鼠标事件不仅有原生的点击,双击,移动,进入,移出,悬浮,可以打印event里面的type查看,还有一些比如jq封装的事件,这些事件而且会相互触发,比如移动move是最容易被其他事件触发,或者原生的拖拽事件,不仅有自己的事件,而且会触发元素上的很多其他事件。

B:为什么会这样呢?

解析:第一本身不同事件类型但是相近的鼠标操作就会同时触发,第二在多层dom结构中的事件,由于本身事件的冒泡机制,由最底层的元素向上冒泡,到父元素到document到window,以至于类似事件不同方法但是同时触发

C:怎么解决

办法:比如现象一:只想触发最底层的元素的点击事件,不触发其父元素的点击事件,解决方案阻止冒泡。现象二:类型相近事件相互触发,导致方法重复执行,解决方案在易促发的事件的方法中可以加入条件判断,是否已经执行过相同操作,如果有要么直接return,如果还有其他操作判断,可以将可能重复的那个操作进行重置。现象三:原生方法事件以及简单事件相互交叉影响导致最后鼠标事件失灵,定义的方法不能执行,页面不可控制,解决方案单个功能实现后进行方法设为null如dom.onclick=null,然后设置dom对象释放捕获。

event事件实在太多太复杂了,正如人生一样,可是有时候多一点细心多一点耐心,没事多打打断点和测试,我们会看得更加清晰,正如我若别来,你自然无恙,越是纠结,越是沉沦,往往简单最好。

事件人生,人生事件,简单复杂,复杂简单,一正一反,经历了自然会成长,花香了自然蝶飞舞。

event对象只在事件发生的过程中才有效(比如鼠标点击,键盘按下等)。

event对象用以表示事件的状态,

例如

触发event对象的元素(event.srcElement)、

鼠标的位置(event.clientX、event.clientY)、

按下的键(event.keyCode)等等。

event对象的属性包括:

altKey,

button,

cancelBubble,

clientX,

clientY,

ctrlKey,

fromElement,

keyCode,

offsetX,

offsetY,

propertyName,

returnValue,

screenX,

screenY,

shiftKey,

srcElement,

srcFilter,

toElement,

type,

x,

y

(可以详细查看参考书)

使用event的方法:

定义

var

evt

=

window.event

FF中不能通过该方法得到event对象,可以通过传值的方法:

element.onclick

=

function(e){

var

evt

=

window.event

||

e

...

}

用event获得点击时鼠标的坐标

element.onclick

=

function(e){

var

evt

=

window.event

||

e

var

cursorPOS

=

{

x

:

evt.clientX,

y

:

clientY

}

}

用event对象指定当按下回车键时,弹出警告框

element.onkeydown

=

function(e){

var

evt

=

window.event

||

e

if(evt.keyCode==13){

alert('按下了回车!')

}

}

用event获得鼠标点击的DOM对象

document.onclick=function(e){

var

evt

=

window.event

||

e

var

_target

=

evt.srcElement

||

evt.target

alert(_target.tagName)

}

更多的使用,请参考教材。