首页 > 其他 > 详细

11.event事件对象

时间:2019-06-26 21:33:19      阅读:113      评论:0      收藏:0      [点我收藏+]
event概念及作用
 
事件通常与函数结合使用,函数不会在事件发生前被执行
event事件对象只在事件发生的过程中才有效
event对象中包含了所有与事件相关的信息(私有的、共有的属性和方法)
 
在需要获取和事件相关的信息时使用如:
获取键盘按下的按键码
获取鼠标的位置坐标
获取事件名称
获取事件生成的时间
获取事件的类型
等等......
 
获取event对象
 
所有浏览器都支持event对象,只是支持的方式不一样
FireFox、Chrome等浏览器要获取到event对象,需要从函数中传入,参数名随意
而IE在浏览器中event作为window对象的一个属性存在,可以直接使用 event 或 window.event 获取到
例如:
document.onmousedown=function ( e ){
    var ev = e || window.event ; //兼容各个浏览器
    console.log(ev);
};
注意 var ev = e || window.event ; 顺序!
 
鼠标/键盘相关属性
 
clientX/clientY属性:返回当事件被触发时,鼠标指针的坐标(到浏览器窗口的坐标)
offsetX/offsetY属性:返回当事件被触发时,鼠标指针的坐标(在事件源元素中的坐标)
pageX/pageY属性:返回当事件被触发时,鼠标指针的坐标(整个页面中的坐标)
button属性:返回触发事件的鼠标按键
which属性:返回触发事件的按键码(针对键盘和鼠标事件)
keCode属性:返回键盘按键的按键码
组合键:ctrlKey、altKey、shiftKey
 
技术分享图片
 
 
其他属性/方法
 
在火狐中获得触发事件的元素
使用:event.target
在IE中获得触发事件的元素
使用:event.srcElement
// 兼容写法
var Target = event.target || event.srcElement;
 
event.relatedTarget  火狐获取触发事件的目标源,与target相反
event.fromElement  IE获取触发事件的目标源,与srcElement相反
在mouseover事件中,它指向鼠标来自哪个元素
var from=event.relatedTarget || event.fromElement;
 
event.relatedTarget  火狐获取触发事件的目标源,与target相反
event.toElement  IE获取触发事件的目标源,与srcElement相反
在mouseout事件中,它指向鼠标去往的那个元素
var to=event.relatedTarget||event.toElement;
 
阻止浏览器默认行为
event.preventDefault()  //火狐
event.returnValue = false  //IE
event.preventDefault ? event.preventDefault() : (event.returnValue = false);
 
阻止事件传播
event.stopPropagation()  //火狐
event.cancelBubble = true  //IE
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);
 
scroll 滚动条
 
scrollLeft:设置或获取当前左滚的距离,即左卷的距离;
scrollTop:设置或获取当前上滚的距离,即上卷的距离;
scrollHeight:获取对象可滚动的总高度;
scrollWidth:获取对象可滚动的总宽度;
 
onscroll 事件在元素滚动条在滚动时触发。

11.event事件对象

原文:https://www.cnblogs.com/r-mp/p/11093237.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!