JS-23-DOM事件

一、DOM事件

1.什麼是事件?
用戶和瀏覽器之間的交互行爲我們就稱之爲事件, 比如：點擊，移入/移出;
2.如何給元素綁定事件?
在JavaScript中所有的HTML標籤都可以添加事件;
元素.事件名稱 = function(){};
當對應事件被觸發時候就會自動執行function中的代碼;

 let oBtn = document.querySelector("button");
 oBtn.onclick = function () {
     alert("按鈕被點擊了");
 }
 // 注意點: 如果給元素添加了和系統同名的事件, 我們添加的事件不會覆蓋系統添加的事件
 let oA = document.querySelector("a");
 oA.onclick = function () {
     alert("a標籤被點擊了");
     // 以下代碼的含義: 用我們添加的事件覆蓋掉系統同名的事件
     return false;
 }

---

二、定時器

<button id="start">開始</button>
<button id="close">結束</button>

在JavaScript中有兩種定時器, 一種是重複執行的定時器, 一種是隻執行一次的定時器;

1.重複執行的定時器

 setInterval(function () {
     console.log("隨便寫點");
 }, 1000);
 
let startBtn = document.querySelector("#start");
let id = null;

startBtn.onclick = function () {
    id = setInterval(function () {
        console.log("隨便寫點");
    }, 1000); // 每過1秒輸出一次
}

let closeBtn = document.querySelector("#close");
closeBtn.onclick = function () {
    clearInterval(id);
}

2.只執行一次的定時器

window.setTimeout(function () {
   console.log("隨便寫點");
}, 5000);

let startBtn = document.querySelector("#start");
let closeBtn = document.querySelector("#close");
let id = null;

startBtn.onclick = function () {
   id = window.setTimeout(function () {
       console.log("隨便寫點");
   }, 5000);
}

closeBtn.onclick = function () {
   clearTimeout(id);
}

---

三、添加事件三種方式

方式一:

1.通過onxxx的方式來添加:
注意點: 由於是給屬性賦值, 所以後賦值的會覆蓋先賦值

 oBtn.onclick = function () {
     alert("666");
 }
 oBtn.onclick = function () {
     alert("777");
 }
點擊，輸出777

方式二:

2.通過addEventListener方法添加:
注意點:
1.事件名稱不需要添加on
2.後添加的不會覆蓋先添加的
3.只支持最新的瀏覽器IE9

oBtn.addEventListener("click", function () {
        alert("666");
    });
    oBtn.addEventListener("click", function () {
        alert("777");
    });

點擊後先輸出666，點擊確定後再輸出777

方式三

3.通過attachEvent方法添加:
注意點:
1.事件名稱必須加上on
2.後添加的不會覆蓋先添加的
3.只支持低版本的瀏覽器

 oBtn.attachEvent("onclick", function () {
     alert("666");
 });
 oBtn.attachEvent("onclick", function () {
     alert("777");
 });

---

四、JavaScript-事件對象

1.什麼是事件對象?

事件對象就是一個系統自動創建的一個對象， 當註冊的事件被觸發的時候, 系統就會自動創建事件對象；

2.事件對象的注意點:
在高級版本的瀏覽器中, 會自動將事件對象傳遞給回調函數；
在低級版本的瀏覽器中, 不會自動將事件對象傳遞給回調函數；
在低級版本的瀏覽器中, 需要通過window.event來獲取事件對象；

let oA = document.querySelector("a");
    oA.onclick = function (event) {
        // 兼容性的寫法
        event = event || window.event;

        alert("666");
        // 阻止默認行爲
        return false; // 企業開發推薦

        // 注意點: preventDefault方法只支持高級版本的瀏覽器
        // event.preventDefault();
        // event.returnValue = false; // IE9以下的瀏覽器
    }

---

五、事件執行的三個階段

1.事件的三個階段
1.1.捕獲階段(從外向內的傳遞事件)
1.2.當前目標階段
1.3.冒泡的階段(從內向外的傳遞事件)

2.注意點:
三個階段只有兩個會被同時執行， 要麼捕獲和當前, 要麼當前和冒泡；

3.爲什麼要麼只能是捕獲和當前, 要麼只能是當前和冒泡?
這是JS處理事件的歷史問題；早期各大瀏覽器廠商爲佔領市場, 以及對事件的理解不同。後續W3C爲了兼容, 將兩種方式都納入標準。

1.如何設置事件到底是捕獲還是冒泡?
通過addEventListener方法, 這個方法接收三個參數
第一個參數: 事件的名稱
第二個參數: 回調函數
第三個參數: false冒泡 / true 捕獲

注意點:
onXxx的屬性, 不接收任何參數, 所以默認就是冒泡
attachEvent方法, 只能接收兩個參數, 所以默認就是冒泡

---

六、JavaScript-阻止事件冒泡

oFDiv.onclick = function () {
        console.log("father");
    }
    oSDiv.onclick = function (event) {
        event = event || window.event;
        // 注意點: stopPropagation方法只支持高級瀏覽器
        // event.stopPropagation();
        // event.cancelBubble = true; // 低級瀏覽器
//下面是兼容性寫法
        if(event.cancelBubble){
            event.cancelBubble = true;
        }else{
            event.stopPropagation();
        }
        console.log("son");
    }

---

七、JavaScript-移入移出事件區別

1.onmouseover和onmouseenter的區別

onmouseover移入到子元素,父元素的移入事件也會被觸發；
onmouseenter移入到子元素,父元素的移入事件不會被觸發；

2.onmouseout和onmouseleave的區別

onmouseout移出到子元素,父元素的移入事件也會被觸發；
onmouseleave移出到子元素,父元素的移入事件不會被觸發；

---

八、JavaScript-位置獲取

1.offsetX / offsetY: 事件觸發相對於當前元素自身的位置

2.clientX / clientY: 事件觸發相對於瀏覽器可視區域的位置

注意點: 可視區域是不包括滾動出去的範圍的

3.pageX / pageY: 事件觸發相對於整個網頁的位置
注意點: 整個網頁包括滾動出去的範圍的

4.screenX / screenY: 事件觸發相對於屏幕的位置

 var oDiv = document.getElementById("box");
 oDiv.onclick = function (event) {
     event = event || window.event;
     // console.log("offsetX", event.offsetX);
     // console.log("offsetY", event.offsetY);
     /*
     console.log("clientX", event.clientX);
     console.log("clientY", event.clientY);
     console.log("----------------------");
     console.log("pageX", event.pageX);
     console.log("pageY", event.pageY);
     */
     console.log(event.screenX);
     console.log(event.screenY);
 }

注意點: clientX / clientY無論高級瀏覽器還是低級瀏覽器都支持；pageX / pageY只有高級瀏覽器支持, 低級瀏覽器是不支持的(IE9以下)

---

-End