【金秋打卡】第十五天 事件對(duì)象
標(biāo)簽：
JavaScript
第一模块：
课程名称：DOM事件探秘
章节：3-1~3-3
讲师名称：Amy
第二模块:
什么是事件对象？
在触发DOM上的事件时都会产生一个对象
DOM中的事件对象
1.type属性用于获取事件类型
2.target属性用于获取事件目标
3.stopPropagation()方法用于阻止事件冒泡
4.preventDefault()方法阻止事件的默认行为
IE中的事件对象
1.type属性用于获取事件类型
2.srcElement属性用于获取事件的目标
3.cancelBubble属性用于阻止事件冒泡：设置为true表示阻止冒泡，设置为false表示不阻止冒泡
第三模块：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<div id='box'>
<input type='button' value="按钮" id='btn' onclick="showMes()" />
<input type='button' value="按钮2" id='btn2' />
<input type='button' value="按钮3" id='btn3' />
<a href="event.html" id='go'>跳转</a>
</div>
<script>
getEvent:function(event){
return event?event:window.event;
},
getType:function(event){
return event.type;
},
getElement:function(event){
return event.target||event.srcElement;
},
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
</script>
</body>
</html>// script.js
window.onload=function(){
var go=docoment.getElementById('go');
var box=docoment.getElementById('box');
eventUtil.addHandler(box,'click',function(){
alert('我是整个父盒子');
})
eventUtil.addHandler(go,'click',function(){
e=eventUtil.getEvent(e);
alert(eventUtil.getElement(e));
eventUtil.preventDefault(e);
})
}第四模块：
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí)，寫下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會(huì)繼續(xù)努力的～
掃碼打賞，你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開微信掃一掃，即可進(jìn)行掃碼打賞哦