事件被赋值常见是直接在标签里赋值,如<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)
}
更多的使用,请参考教材。