學習javaScript必知必會(4)~事件、事件綁定、取消事件冒泡、事件對象

• 2022 年 1 月 16 日
• 筆記
• 事件、事件綁定、取消事件冒泡、事件對象

1、常用的事件：

① onload：頁面加載

② onblur： 失去焦點 onfocus： 獲取焦點

③ onclick：點擊

④ onmouseover：鼠標經過 onmouseout：鼠標離開

⑤ onchange：內容改變

⑥ onsubmit：表單提交

2、綁定事件方式：

（1）行內綁定：

<元素 事件="事件處理程序(函數)">
<script>
function 函數名(){
    console.log(this); //行內綁定的this是指向window
}
</script>

（2）動態綁定（用於結構+樣式+行為分離的頁面）：

前提是進行window.load的初始化，在初始化過程中將事件綁定到元素（標籤）上

語法：對象.事件 = 事件處理程序

<button id="btn" >按鈕</button>

//js文件：通過window.onload 進行初始化，在初始化的過程中將事件動態綁定到元素上
window.onload = function (){
    document.getElementById("btn").onclick = function (){
        console.log(this);
    }
}

（3）事件監聽（為一個對象綁定多個事件處理程序）

   ① ie： attachEvent(type, callback)

     type:事件名，例如 onclick、onsubmit、onchange等  

     callback：事件處理程序(函數)

  ② 基於w3c模式：attachEventListener(type, callback, [capture])

     type:事件名,(沒有前綴on)例如 click、submit、change等  

     callback：事件處理程序(函數)

     capture：可選，事件模型（為true是捕捉模式，false是冒泡模式）

//進行ie或w3c的判斷
function addEvent(obj, type, callback){
    if(window.attachEvent){
        obj.attachEvent('on' + type, callback);
    }else {
        obj.addEventListener(type, callback);
    }
}

3、取消事件冒泡：

① ie: window.event.cancelBubble = true;
② w3c: function(event) {//方法的第一個參數是event
        event.stopPropagation();
     }
 
//進行ie或w3c的判斷
function stopBubble(event){
    if(window.event){
        window.event.cancelBubble = true;
    }else{
        event.stopPropagation();
    }
}

4、取消默認行為（例如：提交按鈕、超鏈接）

• 有些情況需要取消掉默認行為，例如資料填寫不完整，將提交按鈕的提交行為進行取消

//方法一：return false取消
<form method="get" action="#" onsubmit="return false"> //取消表單提交

//方法二：ie：window.event.returnValue = false; 
//       w3c： event.preventDefault();
<form method="get" action="#" >
<input type="text" name="name" id="name"/>
    <input type="submit" value="提交" id="submit"/>
</form>
 
<script>
    window.onload = function (){
        document.getElementById('submit').onclick = function (event) {
            if(document.getElementById('name').value===''){
                if(window.event){
                    window.event.returnValue = false;   //ie
                }else{
                    event.preventDefault();	       //w3c
                }
            }
        }
    }
</script>

5、事件對象（事件發生時產生的對象，該對象包含了該事件的所有信息）

■ 獲取事件對象:

① ie8 ：window.event

② ie9、w3c： function(event){ } //函數的第一個形參