JS事件處理：注冊事件處理程序（個人喜歡把它看做函數(shù)調(diào)用）
三種方法
- HTML級別的處理（標簽屬性的方式）
- 0級處理（通過getElementById()的方式）
- 2級處理（通過getElementById()的方式）
1.HTML級別的處理
使用簡單，也是最基礎(chǔ)的HTML注冊事件處理的方式
<div id="div">
<button id="button1" onclick="Begin()">按鈕</button></div>
<!--修改一處需要修改兩個地方-->
<script>
function Begin() {
alert("測試練習(xí)開始");
}
</script>
調(diào)用方式：通過Onclick找到相應(yīng)Script響應(yīng)事件進行處理
如果我需要修改事件名字，不僅在Script代碼塊里面要修改，還要修改對應(yīng)的注冊事件名稱，實際項目開發(fā)中，事件處理是基礎(chǔ)并且會有許多，所以這種級別的方式實際上很耗時間
2.0級處理
使用較為方便，通過getElementById()的方式，尋找到對應(yīng)id進行事件處理
<script>
var but1 = document.getElementById("button1");
but1.onclick = function () {
alert("O級處理程序");//被覆蓋掉
}
but1.onclick = function () {
alert("會不會處理呢");
}
//清除事件,不會執(zhí)行輸出
// but1.onclick = null;
</script>
調(diào)用方式：使用0級處理，程序首先通過 document.getElementById("button1")找到相對應(yīng)的控件，然后通過but1.onclick = function () {}進行處理事件
0級處理事件.gif
如果同一個控件有多個事件處理，它會順序覆蓋它的事件，最終執(zhí)行最后一次的事件。然而實際開發(fā)中，多個事件如果覆蓋了，只執(zhí)行一次，那么就沒有必要讓一個控件有多個處理事件了，那不是多此一舉嗎？
3.二級處理事件
使用方便，隨時可以進行事件的調(diào)用，并且都會執(zhí)行
<script>//不覆蓋，一次處理所有事件
var but = document.getElementById("button1");
but.addEventListener("click",demo);
but.addEventListener("click",demo2);
function demo() {
alert("2級處理事件")
}
function demo2() {
alert("2級處理事件的另外的");
}
//移除事件 but.removeEventListener("click",demo);
</script>
調(diào)用方式：與0級處理事件方式相同
2級處理事件.gif
依次執(zhí)行所有的處理事件，不進行覆蓋，實用性強
注意：在我們需要對某些處理事件移除的時候使用removeEventListener("名稱",處理事件名)將其對應(yīng)的時間進行移除（注銷）
最后通過這三個事件處理，可以完成IE瀏覽器版本適配的問題
火狐與IE瀏覽器.gif
<script>
var bt = document.getElementById("button1");
if(bt.addEventListener){
bt.addEventListener("click",text1)
}else if(bt.attachEvent){
bt.attachEvent("onclick",text1)
}else{
bt.onclick = text1();
}
function text1() {
alert("支持")
}
</script>
UP主留言：UP學(xué)習(xí)HTML5時間不長，這是UP主第一次提筆寫關(guān)于HTML5的技術(shù)心得，有不正確的地方可以一起交流探討
