學習javaScript必知必會(4)~事件、事件繫結、取消事件冒泡、事件物件

阿新 • • 發佈：2022-01-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>