JavaScript事件

事件舉例

1.onmouseout和onmouseover

//鼠標經過“World”，鼠標移出“Hello”
<div class="div" onmouseout="onOut(this)" onmouseover="onOver(this)"></div>
<script>
    function onOver(ooj){
        ooj.innerHTML="Hello";
    }
    function onOut(ooj){
        ooj.innerHTML="World";
    }
</script>

2.文本框內容改變

<form>
    <input type="text" onchange="changeDemo(this)">
</form>
<script>
    function changeDemo(bg){
        alert("內容改變");
    }   
</script>

//或直接寫
<form>
    <input type="text" onchange="alert('內容改變')">
</form>

3.文本框選中

<form>
    <input type="text" onselect="changeDemo(this)">
</form>
<script>
    function changeDemo(bg){
        bg.style.background="red";
    }   
</script>

事件流

1.事件流：描述頁面接受事件的順序
2.事件冒泡：由最具體的元素接收，然後逐級向上傳播至最不具體的元素（文檔）
3.事件捕獲：最不具體的結點先接收文件，而最具體的結點是最後接收事件

事件處理

1.HTML事件處理
缺點：修改繁瑣

<div id="div">
    <button id="btn" onclick="demo()">按鈕</button>
</div>
<script>
    function demo(){
        alert("hello world");
    }   
</script>

2.DOM0級事件處理
缺點：事件會被覆蓋

<div id="div">
    <button id="btn" onclick="demo()">按鈕</button>
</div>
<script>
    var btn=document.getElementById("btn");
    btn.οnclick=function(){alert("Hello world1")};//會被覆蓋
    btn.οnclick=function(){alert("Hello world2")};
    btn.οnclick=null;//清除當前事件   
</script>

3.DOM2級事件處理
addEventListener(“事件名”、“事件處理函數”、“布爾值”)
true（事件捕獲）
false（事件冒泡）
特點：不會被覆蓋，處理方便，書寫複雜

<div id="div">
    <button id="btn" onclick="demo()">按鈕</button>
</div>
<script>
    var btn=document.getElementById("btn");
    btn.addEventListener("click",demo);
    btn.addEventListener("click",bye);//不會覆蓋，依次處理
    btn.removeEventListener("click",bye);//移除
    function demo(){
        alert("hello world");
    }
    function bye(){
        alert("good bye");
    }
</script>

4.IE事件處理（IE8及以下）
attachEvent
detachEvent
兼容IE8及以下瀏覽器

<div id="div">
    <button id="btn" onclick="demo()">按鈕</button>
</div>
<script>
    var btn=document.getElementById("btn");
    if(btn.addEventListener){
        btn.addEventListener("click",demo);
    }else if(btn.attachEvent){
        btn.attachEvent("onclick",demo);
    }else{
        btn.οnclick=demo();
    }

    function demo(){
        alert("hello");
    }
</script>

事件對象

事件對象event：
1.type：獲取事件類型
2.target：獲取事件目標
3.stopPropagation():阻止事件冒泡
4.preventDefault()：阻止事件默認行爲

<div id="div">
    <button id="btn" onclick="demo()">按鈕</button>
    <a href="http://www.baidu.com" id="aid">百度一下</a>
</div>
<script>
    document.getElementById("btn").addEventListener("click",showType);
    document.getElementById("div").addEventListener("click",showDiv);
    document.getElementById("aid").addEventListener("click",showA);

    function showType(event){
        alert(event.type);//"click"類型
        event.stopPropagation();//阻止div事件冒泡
    }

    function showDiv(){
        alert("div");
    }//會出現事件的冒泡

   function showA(event){
        event.stopPropagation();
        event.preventDefault();//阻止默認事件執行
    }
</script>