事件三要素（事件源、事件、監聽器） 事件源：在哪個元素上發生的，p、a、div、form表單 事件：到底發生了什么事件，click、mouSEOver、load、submit、focus 監聽器：如何應對事件的發生，如何回應發生的事件，通常以函數的形式來出現
你未必理解的事件概念 事件實際上應該稱之為事件模型，事件本身只是一個單純的行為。 事件不是以 on 開頭的那個名稱，如onclick不是事件，click才是事件。onclick引用的是一個元素對象的屬性，它指向click事件類型綁定的實際處理函數。
通過鼠標、鍵盤對瀏覽器頁面所做的動作就是事件。 事件一旦發生需要有事件處理，該處理稱為“事件驅動”，事件驅動通常由函數擔任 onclick：鼠標點擊 onmouseover：鼠標移入 onmouseout：鼠標移出 onkeyup：鍵盤按下并抬起 onkeydown：鍵盤按下 onchange：內容改變 onblur：失去焦點 onfocus：獲得焦點 onsubmit：表單提交 …
在DOM中，有如下幾種方式： DOM 0級，以屬性的方式直接寫在行內。一般不推薦。 DOM 1級，給元素添加屬性，屬性的值就是一個具體的函數。用的比較多，好處就是兼容所有的瀏覽器，寫起來簡單。它的功能相對要弱一些，不利于團隊開發。 下面介紹下DOM2級操作
1) 主流瀏覽器方式(包括IE9以上 版本瀏覽器)： itnode.addEventListener(事件類型，事件處理[，事件流]); //設置 itnode.removeEventListener(事件類型，事件處理[，事件流]); //取消
2) IE瀏覽器方式(IE6/7/8)： itnode.attachEvent(事件類型，事件處理); //設置 itnode.detachEvent(事件類型，事件處理); //取消
事件類型：就是我們可以設置的具體事件，例如onclick/onmouseover等 主流瀏覽器方式沒有”on標志”，例如addEventListener(‘click’，…); IE瀏覽器方式有”on”標志，例如attachEvent(‘onclick’)
事件處理：事件驅動，可以是一個有名/匿名 函數 例如addEventListener(‘click’,function(){}/有名函數);
事件流：true捕捉型、[false冒泡型]
事件取消(removeEventListener/detachEvent)操作具體要求： ① 事件處理 必須是有名函數，不可以是匿名函數。 ② 事件取消的參數與綁定的參數完全一致(數量/內容)
特點: ① 可以為同一個對象設置多個同類型事件。 ② 事件取消也非常靈活。 ③ 對事件流也有很好的處理控制。
<h2>事件設置</h2><script>//追加事件 var dv=document.getElementsByTagName('h2')[0]; dv.addEventListener('click',function(){ //事件處理過程 dv.style.backgroundColor='lightblue'; }); dv.addEventListener('click',over); function over(){ console.log("單擊事件觸發了"); }//事件取消 dv.removeEventListener('click',over); //原來的動作不再觸發</script>效果圖(圖中下面網址是水印): 
多個彼此嵌套元素，他們擁有相同的事件，最內部元素事件被觸發后，外邊多個元素的同類型事件也會被觸發，多個元素他們同類型事件同時執行的效果稱為“事件流”. 圖解: 
事件流分為兩種類型： 冒泡型：事件從內部往外部依次執行。false 捕捉型：事件從外部往內部依次執行。ture //addEventListener(類型，處理，事件流true捕捉/[false冒泡]);
效果圖: 
如果上面代碼后面第三個參數不是true,是默認或者false是這如下結果: 
事件對象，每個事件(包括鼠標、鍵盤事件)觸發執行的過程中，都有對應的事件對象，通過事件對象可以獲得鼠標相對頁面的坐標信息、通過事件對象也可以感知什么鍵子被 觸發執行、通過事件對象還可以阻止事件流產生、阻止瀏覽器默認動作。
①主流瀏覽器(IE9以上版本瀏覽器)： 事件處理函數的第一個形參就是 事件對象 例如： node.onclick = function(evt){evt就是事件對象} addEventListener(類型,function(evt){}/函數名字); function 函數名稱(evt){} //evt就是事件對象
② IE(6/7/8)瀏覽器 node.onclick = function(){window.event事件對象} //全局變量event就是事件對象
全局變量直接上級對象是window。可以通過window訪問全局變量信息。 window.document.getElementById();
1) 獲得鼠標的坐標信息 event.clientX/clientY; //相對dom區域坐標 event.pageX/pageY; //相對dom區域坐標，給考慮滾動條距離 event.screenX/screenY; //相對屏幕坐標
<div>Today is very good</div><script>var dv=document.getElementsByTagName('div')[0];dv.onclick=function(evt){ //相對于dom區域坐標 console.log(evt.clientX+"---"+evt.clientY); //相對于dom區域坐標,計算滾動條 console.log(evt.pageX+"---"+evt.pageY); //相對于屏幕坐標 console.log(evt.screenX+"---"+evt.screenY);}</script>event.stopPRopagation(); //主流瀏覽器window.event.cancelBubble = true; // IE(678)瀏覽器 冒泡型、捕捉型都可以進行阻止,為了阻止比較有意義，只考慮冒泡型即可。
<h2>事件流效果</h2><div> <p> <span>Today is very good</span> </p></div><script>var dv=document.getElementsByTagName('div')[0];var p=document.getElementsByTagName('p')[0];var sp=document.getElementsByTagName('span')[0];dv.addEventListener('click',function(evt){ console.log('I am div'); evt.stopPropagation(); //阻止事件流});p.addEventListener('click',function(){ console.log('I am p'); evt.stopPropagation(); //阻止事件流});sp.addEventListener('click',function(){ console.log('I am sp'); evt.stopPropagation(); //阻止事件流});</script>效果圖: 
event.keyCode 獲得鍵盤對應的鍵值碼信息 通過事件觸發時候獲得的keyCode數值碼信息可以對應鍵盤的鍵子信息。
<h2>事件對象作用</h2><input type="text" id="username"><script>//感知被觸發鍵子信息var it = document.getElementById('username');it.addEventListener('keydown',function(evt){ //alert(evt); //[object KeyboardEvent] var num=evt.keyCode; //獲得被觸發鍵子的"數值碼" console.log(num);});</script>瀏覽器默認動作，注冊form表單頁面，提交表單的時候，瀏覽器的頁面會根據action屬性值進行跳轉，這個動作稱為“瀏覽器默認動作”。
form表單提交的時候，需要對各個表單域進行驗證，如果驗證失敗則禁止瀏覽器跳轉。
event.preventDefault(); //主流瀏覽器(dom1和dom2級事件都起作用) event.returnValue = false; //IE(678)瀏覽器 return false; //dom1級事件設置起作用
<form method='post' action='./1.php'> 密碼:<input type="passWord" name="pwd"><br /> <input type="submit" value="注冊"></form><script>var fm=document.getElementsByTagName('form')[0];fm.addEventListener('submit',function(evt){ alert('密碼不對!'); evt.preventDefault();});</script>js代碼執行時候，需要html&CSS的支持，就讓html代碼先執行(先進入內存)，js代碼后執行 js代碼在最后執行的過程就是“加載過程”，通常通過“加載事件”實現加載過程
加載事件onload可以保證js代碼后于html&css執行，其要在最后執行。 具體設置：
<body onload=”加載函數()”>window.onload = 匿名/有名 函數; //推薦如果使用dom1級操作要注意如下2點:
<h2 id='h'>today is good</h2><script> var obj=document.getElementById("h"); function f1(){ console.log("事件被觸發了!"); } //這里函數傳地址不帶括號就寫函數名字 h.onclick=f1; </script><!--這里函數傳地址帶括號帶引號--><h2 id='h' onclick="f1()">today is good</h2><script> var obj=document.getElementById("h"); function f1(){ console.log("事件被觸發了!"); } </script>新聞熱點
疑難解答
