第一模块:
课程名称: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); }) }
第四模块: