1.事件对象:
在触发DOM事件的时候都会产生一个对象。
2.事件对象event:
(1)、type:获取事件类型
(2)、target:获取事件目标
(3)、stopPropagation():阻止事件冒泡
(4)、preventDefault():阻止事件默认行为
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
例(针对2-(1)):
<div id="div">
<button id="btn1">按钮</button>
</div>
<script>
document.getElementById("btn").addEventListener("cilck",showType);
function showType(event){
alert(evet.type);
}
</script>
结果:界面弹出提示框“cilck”.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
例(针对2-(2)):
<div id=div>
<button id="btn1">按钮</button>
</div>
<script>
document.getElementById("btn1").addEventListener("cilck",showType);
function showType(event){
alert(event.target);
}
</script>
结果:点击按钮,弹出提示框“object.HTMLButtonElement”
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
例(针对2-(3)(4)):
<div id="div">
<button id="btn1">按钮</button>
<a href="http://www.cnblogs.com/yanyuanyuan/">烽火戏诸诸诸侯</a>
</div>
<script>
document.getElementById("btn1").addEventListener("click",showType);
document.getElementById("div").addEventListener("click",showDiv);
document.getElemetnById("aid").addEventListener("cilck",showA);
function showType(event){
alert(event.type);
event.stopPropagation();//阻止了showDiv框的弹出
}
function showDiv(){
alert(div);
}
function showA(event){
event.stopPropagation();//阻止事件冒泡
event.preventDefault();//对a的链接不进行跳转
}
</script>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
---------------------------------------------------------------------------