工作日常--event对象总结

• event属性列表

// 在浏览器输入如下代码
// 前提----页面上有一个id为dom2的元素
var dom2= document.getElementById("dom2");
dom2.addListener("click",function(e){
// 打印出所有的event属性
  for(item in e){
   console.log(item +':' +e[item]);
   }
},false)


----------

属性/方法	类型	说明
altKey	boolean	返回当点击事件触发的时候，‘alt’是否被按下
bubbles	boolean	表明事件是否冒泡
button	number	返回当事件被触发时，哪个鼠标按钮被点击。
buttons	number	每一个可以按下的按钮都有一个数字来表示，当哪个按钮被按下，那么就会累加这个数子
cancelBubble	boolean	如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。
cancelable	boolean	如果用 preventDefault() 方法可以取消与事件关联的默认动作，则为 true，否则为 fasle
clientX	number	返回当点击事件触发的时候，鼠标指针的水平坐标
clientY	number	返回当点击事件触发的时候，鼠标指针的竖直坐标
composed	boolean	只读属性，点击事件是否可以被遮盖的DOM点击
ctrlKey	boolean	返回当点击事件出发的时候，‘ctrl’是否被按下
currentTarget	string	返回其事件监听器触发该事件的元素
defaultPrevented	boolean	返回一个布尔值,表明当前事件的默认动作是否被取消,也就是是否执行了
detail	number	被点击的次数
eventPhase	number	返回一个代表当前执行阶段的 整数值
fromElement	string	返回被点击元素的父级元素
isTrusted	boolean	只读属性，当返回true那么说明被用户点击触发，返回false则表明被脚本触发或者未触发
layerX	number	非标准，返回相对于当前层的水平坐标
layerY	number	非标准，返回相对于当前层的垂直坐标
metaKey	boolean	返回当点击事件出发的时候，‘meta’是否被按下
movementX	number	只读属性提供的事件和以前的MouseMove事件之间的鼠标指针的X坐标的转换。
movementY	number	只读属性提供的事件和以前的MouseMove事件之间的鼠标指针的Y坐标的转换。
offsetX	number	相对于当前容器的X坐标
offsetY	number	相对于当前容器的Y坐标
pageX	number	以整个屏幕为参考的X轴坐标
pageY	number	以整个屏幕为参考的Y轴坐标
path	array	相对于网页的路径
relatedTarget	string	这个是事件的二次事件，比如如果该次点击事件是focus,那么这个就是失去focus
returnValue	boolean	非正式属性，基本用不到。看英文文档云里雾里。true对于事件的默认行为是否已发生，false阻止发生
screenX	number	全屏幕为定位点X坐标
screenY	number	全屏幕为定位点X坐标
shiftKey	boolean	返回当点击事件出发的时候，‘shift’是否被按下
sourceCapabilities	obj	不知道
srcElement	string	被点击元素来源
target	obj	被点击元素的所有信息
timeStamp	string	如果事件系统为特定事件支持它，此属性只起作用。
toElement	string	被点击元素
type	string	点击的类型‘click’,’mousemove’注入此类
view	boolean	不知道
which	number	返回被按下的键盘上案件的数字
x	boolean	不知道
y	boolean	不知道

---

• 我开发中用到的一些event事件

这里做出说明，其实在event得众多属性中。我实际开发中用到的并不多。在最新的vue框架中直接就有封装好的防止冒泡属性v-on:click.stop。当让我之前写JQ的时候有时候会用到要防止事件冒泡的情况。代码可以这么写

// jq语法过于简单，我还是写dom2的点击事件吧
var dom2= document.getElementById("dom2"); 
dom2.addListener('click',function(event){
event.stopPropagation(); //加上这句代码可以方式事件冒泡
 // do something
},false)

还有用到的就是计算当前鼠标点击的是哪个元素，利用event.offsetX和event.offsetY可以计算出当前点击的元素是哪一块。方便快捷。这里不方便截图我工作负责项目的截图。大概思想就是拿到这个值之后做出相应的运算，然后得出鼠标点击的元素的具体相对于该容器的位置。

关于上表中的解释参考：点击这里跳转详细英文解释