DOM 1級方式設置(4種)
- 通過onclick指定JS函數名稱
<input type="text" name="userName" onclick="函數名稱()">
function 函數名稱(）{···};
- 在onclick中直接寫入過程代碼
<input type="text" name="userName" onclick="var a=10;alert(a);">
- JS中節點.onclick = 匿名函數
- JS中節點.onclick = 函數名稱 注意是函數名稱，不是調用函數
itnode.onclick = 有名函數名稱;
function 函數名稱(){···}
注意：以上DOM1級事件設置的4種具體表現形式，除了第1種(this代表window)，其他三種方式內部this都代表當前節點本身
DOM 2級事件設置
所謂DOM 2級事件設置可以更加靈活的任何可視節點添加動作事件。
- addEventListener：節點.addEventListener(動作名稱，事件名稱，事件流)
//addEventListener第一種使用方式
var dv = document.getElementsByTagName('div')[0];
dv.addEventListener('click',function(){
this.style.backgroundColor ="pink";
});
//addEventListener第二種使用方式
dv.addEventListener('mouseover',f1);
function f1(){
dv.style.backgroundColor ="pink";
};
- removeEventListener：節點.removeEventListener(動作名稱，事件名稱，事件流)
如果是IE瀏覽器(IE9以下)的話最好使用attachEvent(事件類型，事件處理)和detachEvent(事件類型，事件處理)
事件流
多個彼此嵌套的元素，他們擁有相同的時間，最內部事件被觸發后，外邊多個元素的同類型時間會被觸發，多個元素他們同類型時間同時執行的效果稱為"事件流"
事件類型
注意：在addEventListener或者removeEventListener中最后一個參數如果為false（冒泡型，從內而外），為true（捕捉型，從外而內）
事件對象
事件對象，每個事件(包括鼠標，鍵盤事件)觸發執行的過程中，都有對應的事件對象，通過事件對象可以獲得鼠標相對頁面的坐標信息，什么鍵子被觸發執行，通過事件對象還可以阻止事件流產生，阻止瀏覽器默認動作。
獲得事件對象
聲明觸發方法時參數evt，evt就是事件對象獲取鼠標的坐標信息
event.clientX/clientY （相對dom的坐標）
event.pageX/pageY （考慮滾動條）
event.screenX/screenY （相對屏幕坐標）
- 阻止事件流
event.stopPropagetion() //主流瀏覽器
event.cancelBubble = true //IE瀏覽器
冒泡型、捕捉型都可以進行阻止
- 阻止瀏覽器默認動作
事件對象.preventDefault() //主流瀏覽器
事件對象.returnValue=false //IE瀏覽器
return false //dom1級事件設置
- 獲取被觸發鍵盤鍵子信息
event.keyCode 獲得鍵盤對應的鍵值碼信息，返回的為ASC碼
加載事件 onload
JS代碼執行時如果涉及到html或者css時，需要讓html和css執行后，在執行js代碼，但通過加載事件可以實現JS代碼寫在html和css代碼之前
具體設置：
//方式1（不推薦）
<body onload=“加載函數()”>
//方式2
//在js中書寫
window.load=加載函數();
