javascript对象--8 事件

事件对象 :在执行响应对象函数前由浏览器建立的对象。该对象封装了本次事件的基本信息以及处理事件流的方法。(在DOM标准中规定的事件对象的功能较少,所以哥哥浏览器都作了扩充,所以不少事件属性和方法不兼容)javascript

事件对象 :{html

基础事件对象的属性方法java

浏览器

1、经常使用基本属性 :(下面四个对象均为只读属性)

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);

2、阻止冒泡及捕获的属性以及方法

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( ) :阻止默认行为。

相关文章
相关标签/搜索