JS event那點事

 

If an event causes both a default action and execution of a event handling script:

1. the event handler script is executed first
2. the default action takes place afterwards

<a href='' onclick='code here'>clicke me</a>  會限制性click事件，再執行默認事件

 

 

「How do I prevent the default action of the event?」
If you return false from the event handling script, the default action (following the link, submitting the form) is prevented. This technique was standardized by Netscape 2 and still works fine.

若是在自定義的事件句柄裏面加個return false，則默認的時間則不會觸發，類如a標籤，表單提交

 

 

 

js的事件添加有三種方式:

1.inline(如上)  

2.traditional   ie:  element.onclick = doSomething;

3.w3c and Microsoft     ie:element.addEventListener('click',doSomething,false)

針對第三種方式：

1.netscape : element.addEventListener

2.Microsoft : element.attachEvent

 

 

事件的冒泡和捕捉，冒泡適用於全部的Netscape 2瀏覽器

冒泡 {由子-> 父}

捕捉{由父 ->子}

 

 

<div id='parents'>
<a class='child' id='child' href='javascript:void(0)' style='background:red'>default click action is prevented</a>
</div>
<script>

function $(id)
{
　　if(typeof(id)=='string')
　　{
　　　　return document.getElementById(id);
　　}
　　else
　　{
　　　　return id;
　　}
}
$('parents').addEventListener('click',function(){alert('you clicked the parentCode!!')},true);  //這個第三個參數若是是true的話，表明適用捕獲,false表明冒泡

$('child').addEventListener('click',function(){alert('you clicked the child!!')},false);

 

  

若是是ie瀏覽器的話，只在冒泡階段觸發，所以觸發順序是先是最裏面的，而後是外層的 若是是火狐瀏覽器，用的是onclick=function(){} 那麼觸發也是在冒泡階段 若是是addEventListener，第三個參數是冒泡階段，與上面的同樣 若是第三個參數是捕獲流階段，先是最外層的元素，而後是最內層的元素