js event属性

用来保存事件相关的所有信息的对象，在domtree中该事件触发时，系统自动生成获取event对象function(e){console.log(e)}function(eve){console.log(eve)} function(event){console.log(event)}兼容性写法var event=event||window.event;属性获取事件类型event.type  当前触发事件的类型是否冒泡，如果支持返回true，否则返回falseevent.bubbles   事件传导至当前节点处于什么状态 event.eventPhase  返回1  事件处于捕获状态返回2  事件处于真正的触发者返回3  事件处于冒泡状态返回事件的触发者event.target   返回事件的监听者(即冒泡或捕获发生的事件)event.currentTarget   返回当前阶触发的元素，比如发生在冒泡的第二个元素的回调上就为冒泡的第二个元素获取鼠标横纵坐标event.clientXevent.clientY获取键盘阿斯克码值event.keyCode获取键盘案件名event.key获取鼠标按键event.button     //非ie当事件触发时，0为左键，1为中键，2为右键//ie，1为左键，4为中键，2为右键**event方法**非ie中的方法阻止冒泡：event.stopPropagation();   event.stopImmediatePropagation();  执行之后会阻止后续所有事件流（包括同一个节点的相同类型事件、捕获事件）取消当前节点的默认行为event.preventDefault()非ie下event值默认为undefine，ie中event的值为null非ie下可以任意通过dom0和dom2中的参数来使用event，ie中dom0无法使用传参的形式来使用event，dom2可以ie中的相同功能属性:获取事件的真正触发者，等同于targetevent.srcElement兼容性写法: var target=event.target||event.srcElement阻止当前节点上的冒泡行为(ie无捕获事件)event.cancelBubble=true;  布尔值为true可以取消冒泡结束当前节点的默认行为event.returnValue=false;   布尔值为false阻止默认行为

代码示例:

<html><head><meta charset="utf-8"><title></title><style>.box{height: 200px;width:200px;background-color: orange;}.small{height:100px;width:100px;background-color: pink;}</style></head><body><div class="box"><p class="p1">1234</p><div class="small"></div></div><p>aaaa</p><script>var box=document.querySelector(".box");var p1=document.querySelector(".p1");var small=document.querySelector(".small"); var p=document.querySelector("p");small.onclick=function(){console.log("aaaaaaaa");}box.onclick=function(event){console.log("target:"+event.target);console.log("currenttarget:"+event.currentTarget);}/*           box.οnclick=function(event){
//              console.log(event);console.log('box'+event.eventPhase);console.log(event.type+event.bubbles)console.log(event.bubbles)}p1.οnclick=function(event){console.log('p'+event.eventPhase);}document.body.οnclick=function(event){console.log("body"+event.eventPhase);}p1.addEventListener("click",function(event){console.log("冒泡p"+event.eventPhase);},true);box.addEventListener("click",function(event){console.log("冒泡box"+event.eventPhase)},true)document.body.addEventListener("click",function(event){console.log("冒泡body"+event.eventPhase)},true)*/function t(){event.preventDefault();}p.onclick=function(event){var event=event||window.event;console.log(event);}</script></body>
</html>

js event属性相关推荐

JS的Event属性和方法
Event对象只在事件发生的过程中才有效. Event的某些属性只对特定的事件有意义.比如,fromElement 和 toElement 属性只对 onmouseover 和 onmouseout ...
JS常用属性方法大全
JS常用属性方法大全 1.输出语句:document.write(""); 2.JS中的注释为: 3.传统的HTML文档顺序是:document->html->(hea ...
JS Event对象详解
JS Event对象详解参考资料: js添加事件和移除事件:addEventListener()与removeEventListener() Event 对象 Event 对象代表事件的状态,比如事 ...
JQuery Event属性说明
JQuery事件中的Event属性是经常性的被忽略的.大多数时间你的确不怎么用它,但有些时候它还是有作用的. 如获知触发时用户的环境(是否按了shift etc).每个浏览器对event都有不同的地方 ...
Node.js event loop 和 JS 浏览器环境下的事件循环的区别
Node.js event loop 和 JS 浏览器环境下的事件循环的区别: 1.线程与进程: JS 是单线程执行的,指的是一个进程里只有一个主线程,那到底什么是线程?什么是进程? 进程是 CPU ...
Js Event Loop
Js Event Loop 本文主要介绍 Node 中的事件循环参考官网 (什么是 Event Loop? - 阮一峰的网络日志 (ruanyifeng.com)) What is the Eve ...
Js 字符串属性及方法
Js 字符串属性及方法本文记录下字符串相关属性及方法,参考文档 MDM String. 一.语法: 'hello world' "hello world" "中文&qu ...
JS元素属性操作方法，包括获取属性，修改属性，删除属性
JS元素属性操作方法,包括获取属性,修改属性,删除属性本篇记录JS元素属性的操作的方法.其中包含获取属性两个方法,修改属性两个方法,删除属性一个方法获取属性 element.属性该方法通常获取自 ...
彻底理解 JS Event Loop（浏览器环境）
最近罗列了一些软件开发基础知识点,计划逐一的.彻底的理解每一个知识点,并为每个知识点写一篇详细的,图文并茂的文章.这篇是关于浏览器环境下 JS 的 Event Loop 机制(如有错误,欢迎指出). ...

js event属性

js event属性相关推荐

最新文章

热门文章