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