手记

【金秋打卡】第十五天 事件对象

第一模块:

课程名称: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);
    })
}



第四模块:



0人推荐
随时随地看视频
慕课网APP