工作日常--event对象总结
2017-12-05 23:43
141 查看
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得众多属性中。我实际开发中用到的并不多。在最新的
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可以计算出当前点击的元素是哪一块。方便快捷。这里不方便截图我工作负责项目的截图。大概思想就是拿到这个值之后做出相应的运算,然后得出鼠标点击的元素的具体相对于该容器的位置。
关于上表中的解释参考:点击这里跳转详细英文解释
相关文章推荐
- JS的event对象--知识点总结
- JS的event对象--知识点总结
- Javascript学习第九、十天总结scroll家族和event对象及放大镜特效
- 事件元素JS的event对象--知识点总结
- 【BOM操作】JavaScript中的event对象之总结
- arm之上的threadx OS编程之总结
- 黑马程序员-ASP.NET(1)学习总结
- PHP的数组遍历总结
- Android异常总结---res\layout\addUser.xml: Invalid file name: must contain only [a-z
- Android学习笔记:练习中用到的一些技巧总结
- JNDI学习总结(3)——Tomcat下使用C3P0配置JNDI数据源
- java中相对路径,绝对路径问题总结
- c++ 排序算法总结
- java语言中关于抽象类和接口的区别(面试经常问到,因此总结一下)
- SSI框架总结
- Oracle开发专题之:对事务的一些总结和理解
- [转]C#.net同步异步SOCKET通讯和多线程总结
- 第十九天总结0415
- 内存泄漏的检测、定位和解决经验总结
- 针对软件编程初学者阶段总结的简易点评,更像是对学习方法的一些建议