【金秋打卡】第十五天 事件对象
标签：
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);
})
}第四模块：
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦