事件对象 :在执行响应对象函数前由浏览器建立的对象。该对象封装了本次事件的基本信息以及处理事件流的方法。(在DOM标准中规定的事件对象的功能较少,所以哥哥浏览器都作了扩充,所以不少事件属性和方法不兼容)javascript
事件对象 :{html
基础事件对象的属性方法java
}浏览器
target : 获取事件对应的最详细元素的Dom对象dom
currentTarget : 获取绑定了响应函数的Dom对象函数
currentTarget :不必定与target相等spa
type : 获取事件类型, 例如 clickcode
timeStamp : 获取时间戳。 Numbe类型 ---当前触发事件的时间点orm
一、target : 获取事件对应的最详细元素的Dom对象htm
<script> window.addEventListener("load", function(){ register (); }) function register (){ document.getElementById("outerDiv").addEventListener("click" ,handleEvent ) } function handleEvent(e){ //e就是浏览器封装好的 event 对象 // 获取当前事件对象的第二种方式:window.event(window.event === e); //e.target不必定是绑定事件的dom元素,是当前操做的最详细的DIV,距离点击最近的元素 console.log(e.target); } </script>
<h2>只读基本属性</h2> <div id="outerDiv" style="height: 200px; width: 200px; background-color: coral;"> <div id="innerDiv" style="height: 100px; width:100px; background-color:cornflowerblue;"> </div> </div>
二、获取当前绑定事件对象
//获取绑定了事件的事件源 target不必定与currentTarget相等 console.log(e.currentTarget);
console.log(e.currentTarget); console.log(e.type); console.log(e.timeStamp);
bubbles :获取绑定的事件的方式是否设定了冒泡或捕获( 只有使用 DOM2级绑定方式是返回true).Boolean类型。
stopPropagation( ) ;在bubbles为true时,阻止继续冒泡或捕获。
stopImmediate Propagation():强制阻止冒泡或捕获。
阻止默认行为的属性和方法
window.addEventListener("load", function(){ register (); }) function register (){ document.getElementById("outerDiv").addEventListener("click" ,function(){ alert("outerDIV1执行"); },false); //冒泡阶段 document.getElementById("innerDiv").addEventListener("click" ,function(){ alert("innerDIV1执行"); },false);//冒泡阶段 }
点击innerDIV时
在冒泡阶段先执行
一、弹出 innerDIV=1执行 二、弹出 outerDIV执行
document.getElementById("innerDiv").addEventListener("click" ,function(){ alert("innerDIV1执行"); event.stopImmediatePropagation();//阻止继续冒泡 },false);//冒泡阶段 }
默认行为:
某些元素在用户操做时,在不调用任何程序的状况下也会发生具体行为。例如 input type = submit 点击时会提交整个form表单。
defaultPrevented :获取是否组织了默认行为,boolean类型。
preventDefault( ) :阻止默认行为。