标签:
1.event 通过event变量可以直接访问事件对象,不用自己定义也不用从函数中读取,
Var btn=document.getelementBy(“id”)
Btn.onclick=function(){
Alert(“aaa”)
}
定义了两个方法:1.addEventListener()
2.removeEventListener()
他们分别接受三个参数:处理的事件名、作为事件处理程序的函数、一个布尔值,布尔值=ture时表示在捕获阶段调用事件处理程序,布尔值=false时 表示在冒泡阶段调用事件处理程序
格式:
Btn.addEventListener(“click”,function(){
Alear(“aaa”)
} ,false)
Btn.addEventListener(“click”,function(){
Alear(“bbb”)
} ,false)
如上可以为一个元素绑定多组事件,使用此方法添加的事件必须使用removeEventListener()来移除,并且保证传入的参数完全相同,也不能是匿名函数(此时的函数必须要有名称)
定义的方法:
1.attachEvent()
2.detachEvent()
此方法接受两个参数:事件处理程序名称、事件出库程序函数(IE8以及更早的版本只支持冒泡事件)
注意:在IE中使用attachEvent()与只用dom0级方法的主要区别在于事件处理程序的作用域在dom0下事件处理程序会在其所属元素的作用域内运行,而是使用attachEvent()此方法是在全局运行,因此this指的是window
var handler=function(){
alert("click")
}
var EventUtil = {
addHandler: function(btn,click,handler){
if(btn.addEventListener){
btn.addEventListener(click,handler,false);
}
else if(btn.attachEvent){
btn.attachEvent("on"+click,handler);
}
else{
btn["on"+click] = handler;
}
},
removeHandler: function(btn,click,handler){
if(btn.removeEventListener){
btn.removeEventListener(click,handler,false);
}
else if(btn.detachEvent){
btn.detachEvent("on"+click,handler);
}
else{
btn["on"+click] = null;
}
}
}
EventUtil.addHandler(btn,"click",handler);
属性和方法:
Bubbles: 表明事件是否冒泡
Cancelable: 是否取消事件的默认行为
currentTarget: 事件处理程序当前处理的事件是哪个元素
defaultPrevented: 为ture是表示调用了preventDefau()
detail: 与事件相关的细节效果
eventPhase: 调用事件处理程序的阶段:1表示捕获、2表示“处于目标”3.表示冒泡。
preventDefault(): 取消事件的默认行为,如果cancelable是ture则使用这个方法
stopImmediatePropagation():取消事件进一步捕捉或冒泡,
stopPropagation(): 取消事件进一步捕捉或冒泡,如果bubbles为ture时,则使用此方法。
target:事件目标
trusted: 为ture表示事件是浏览器生成的,为false表示事件是开发人员创建
type : 被处罚的事件类型
view : 与事件关联的抽象视图,等同于发生事件的window
注意:对象this始终等于currentTarget,而target则是包含事件的实际目标,如果直接将处理事件程序直接给了目标元素,则三者包含相同的值,当涉及到冒泡事 三则不一定相等
属性和方法:
canceBubble:默认值是false,但将其设置为ture时就可以取消事件冒泡
returnValue: 默认值是flase,将其设置为ture时可以取消默认行为;
srcElement : 事件的目标
Type: 被触发的事件类型
clienX
clienY
表示的是事件发生时鼠标指针在视口的位置,
视口:就是居浏览器内容区域(类似首屏大小),但不涉及页面滚动影响
pageX
pageY
表示的是光标在页面中的位置,就是居内容区域头部和左边的距离,受scrollLeft,scrollTop的影响.
screenX
screenY
表示的是当前元素相对于整个电脑屏幕的坐标,
点击事件中存在event的detail属性,对于单击事件来说detail中包含一个数值,表示在给定位置上发生了多少次单击,该属性从1开始计数。
offsetX:光标相对于目标元素边界的X坐标
offsetY:光标相对于目标元素边界的Y坐标
Mousewheel 鼠标滚轮事件,其包含一个特殊属性 wheelDelta,当滚轮向前滚动时wheelDelta是120的倍数,当滚轮向后滚动时wheelDelta是-120的倍数,
注意:对与Firefox支持的一个名为DOMMouseScroll的类似事件,而有关鼠标的滚轮信息则保存在detail的属性中,
当滚轮向前滚动时wheelDelta是3的倍数,当滚轮向后滚动时wheelDelta是-3的倍数,
,
标签:
原文地址:http://www.cnblogs.com/danson/p/4480892.html