js引入：內嵌式（<script type="text/javascript">....</script>）、外聯式（<script type="text/javascript" src="1.js"></script>）
獲得指定id對象（document.getElementById(...)）
獲得指定name的多個對象（document.getElementsByName(...)）
Bom對象：window(定時器（setInterval（間歇調用） 、setTimeout（超時調用）、clearInterval( timer )、clearTimeout）、消息框（alert()、confirm()、prompt()顯示提示框）)、location（location.href）、history（history.go(-1)表示返回到瀏覽過的前一個頁面）
事件：onclick()單擊、onload()頁面加載、onfucus()獲得焦點、onsubmit()提交
事件綁定：HTML代碼直接編寫<body onload="...">JS綁定window.onload = function(){}
js事件綁定的幾種方式：
事件處理程序即給元素綁定事件的方式有下列幾種：HTML事件處理程序、DOM0級事件處理程序、DOM2級事件處理程序、IE事件處理程序、跨瀏覽器事件處理程序。其實這些方式就是一個逐步優化和實現跨瀏覽器的過程。
1、HTML事件處理程序：直接在html的標籤中添加事件屬性，例如：
<div onclick="fun()"></div>
這樣做很是不好，有下列兩大缺點，這也是如今在開發中很難見到這樣綁定事件的原因。
（1）存在一個時差問題，因爲用戶可能會在HTML元素一出現在頁面上就觸發相應的事件，但當時的事件處理程序有可能尚不具備執行條件（比如js代碼還沒有下載下來），由此會引發錯誤。
（2）HTML與js代碼緊密耦合。如果要更換事件處理程序，就要改動兩個地方:HTML代碼和JS代碼，這非常不利於後期代碼的維護。
所以這種方法在開發中基本不用，但是還是得了解它是怎麼個用法和爲什麼不用它的原因。
2、DOM1級事件處理程序：將一個函數賦值給一個事件處理程序屬性，表示元素的方法，這時的事件處理程序是在元素的作用域中運行。例如：
var oBox = document.getElementById("container");
oBox.onclick = function() {}
這種做法的優點是：簡單和所有瀏覽器都支持。
缺點是：只能給該元素綁定一個事件。於是出現DOM2級事件處理程序。
3、DOM2級事件處理程序：addEventListener()添加事件，removeEventListener()刪除事件。可添加多個，執行順序與添加順序相同。兩個方法都接受三個參數：
第一個參數：事件名稱
第一個參數：作爲事件處理程序的函數
第一個參數：捕獲值false(不捕獲)/true(捕獲),不寫表示默認值false
例如：
var oBox = document.getElementById("container");
oBox.addEventListener("click",fn(),false);
oBox.removeEventListener("click",fn(),false);
function fn(){//執行代碼}
關於第三個參數一般填寫默認值false或不填，因爲：大多數情況下，都是將事件處理程序添加到時間流的冒泡階段，這樣可以最大限度地兼容各種瀏覽器，如果不是特別需要，不建議在事件捕獲階段註冊事件處理程序。關於捕獲和冒泡同時存在的情況下我總結了以下幾點：
（1）冒泡且捕獲：捕獲導致不能進入更低層事件，點擊該層的更低層只能觸發該捕獲層，一般爲了不阻斷其他事件的觸發設置捕獲爲false。
（2）冒泡但不捕獲：執行冒泡順序，從觸發層從內到外執行事件，與事件監聽綁定的順序無關。
（3）若多級包含元素且多個元素都添加事件監聽則爲了更穩定的執行時間需要：①每個元素的事件監聽的捕獲都設置爲false或不填。②並且在執行函數內阻止冒泡。e.stopPropagation()||e.cancelBubble=true;
4、IE事件處理程序：attachEvent()添加事件，detachEvent()刪除事件，由於（IE8-）不支持捕獲，所以兩種方法只支持兩個參數：
第一個參數：事件處理程序函數名稱eg:onclick onmouseover
第二個參數：作爲事件處理程序的函數
例如：
var oBox = document.getElementById("container");
oBox.attach("click",fn());
oBox.detach("click",fn());
function fn(){//執行函數}
注意：使用這種方法的事件處理程序的作用域是全局，函數內this指向window而不是事件目標對象，如果要指定事件目標對象可以也使用event.srcElement。能給添加多個，但是執行順序與添加順序相反。
5、跨瀏覽器事件處理程序：
var EventUtil = {
addHandle: function(element,type,handle) {
if(element.addEventListener) {
element.addEventListener(type,handle);
}else if(element.attachEvent) {
element.attachEvent("on"+type,handle);
}else {
element["on"+type] = handle;
}
},
removeHandle: function(element,type,handle) {
if(element.removeEventListener) {
element.removeListener(type,handle);
}else if(element.detachEvent) {
element.detachEvent("on"+type,handle);
}else {
element["on"+type] = null;
}
}
}
EventUtil.addHandle(oBox,"click",fn);
EventUtil.removeHandle(oBox,"click",fn);
原文：https://blog.csdn.net/qq_36060786/article/details/79430151?utm_source=copy