javascript之事件详解2

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>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

---------------------------------------------------------------------------