當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript教程之事件处理
生活随笔
收集整理的這篇文章主要介紹了
JavaScript教程之事件处理
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1、什么是事件
通過鼠標、鍵盤對瀏覽器頁面所做的動作就是事件。
事件一旦發生需要有事件處理，該處理稱為“事件驅動”，事件驅動通常由函數擔任
onclick：鼠標點擊
onmouseover：鼠標移入
onmouseout：鼠標移出
onkeyup：鍵盤按下并抬起
onkeydown：鍵盤按下
onchange：內容改變
onblur：失去焦點
onfocus：獲得焦點
onsubmit：表單提交
2、設置事件
2.1、dom一級事件設置
①<input type=”text” onclick=”函數名稱()” />function 函數名稱(){this[window]}②<input type=”text” onclick=”過程代碼this[itnode]” />③itnode.onclick = function(){this[itnode]} 匿名函數④itnode.onclick = 函數名稱; 有名函數function 函數名稱(){this[itnode]}取消dom1級事件： itnode.onclick = null;2.2、dom二級事件設置
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)操作具體要求： ① 事件處理 必須是有名函數，不可以是匿名函數。 ② 事件取消的參數與綁定的參數完全一致(數量/內容)dom2級事件設置的特點： ① 可以為同一個對象設置多個同類型事件。 ② 事件取消也非常靈活。 ③ 對事件流也有很好的處理控制。 <html><head><title>事件設置</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="description" content="" /><meta name="keywords" content="" /><script type="text/javascript"></script><style type="text/css">div{width:300px; height:200px; background-color:pink;}</style></head><body><h2>dom2級事件設置</h2><div>Today is cloud</div></body> </html> <script type="text/javascript"> //給div進行事件的設置 var dv = document.getElementsByTagName('div')[0]; //dv.addEventListener(事件類型，事件處理[，事件流]); dv.addEventListener('click',function(){//事件處理過程dv.style.backgroundColor = "lightblue"; });</script> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html><head><title>新建網頁</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="description" content="" /><meta name="keywords" content="" /><script type="text/javascript"></script><style type="text/css">div{width:300px; height:200px; background-color:pink;}</style></head><body><h2>dom2級事件取消操作</h2><div>everyday is beautiful</div><input type="button" value="取消" onclick="cancel()" /></body> </html> <script type="text/javascript"> var dv = document.getElementsByTagName('div')[0]; //事件取消操作 function cancel(){//有名函數可以取消，并且事件"取消參數"與"綁定參數"完全一致dv.removeEventListener('click',f1);dv.removeEventListener('mouseover',over); }dv.addEventListener('click',function(){ dv.style.backgroundColor = "lightblue";});dv.addEventListener('click',function(){ console.log('I am here');});function over(){dv.style.backgroundColor = "lightgreen";} dv.addEventListener('mouseover',over);//直接拔事件處理函數名字設置上(沒有()括號的)function out(){dv.style.backgroundColor = "pink";} dv.addEventListener('mouseout',out);</script>3、事件流
多個彼此嵌套元素，他們擁有相同的事件，最內部元素事件被觸發后，外邊多個元素的同類型事件也會被觸發，多個元素他們同類型事件同時執行的效果稱為“事件流” 事件流分為兩種類型（如果學過flash的話，可以看出非常相似）： 冒泡型：事件從內部往外部依次執行。 捕捉型：事件從外部往內部依次執行。 //addEventListener(類型，處理，事件流true捕捉/[false冒泡]);IE瀏覽器從開始到后期事件流始終是“冒泡型”的，直到IE9以后版本兩種都開始支持。 網景的Navigator瀏覽器(現在火狐瀏覽器的許多血統來源于navigator瀏覽器)一開始的事件流是”捕捉型”。后期事件流有改進，針對捕捉型、冒泡型都可以支持。4、事件對象
事件對象，每個事件(包括鼠標、鍵盤事件)觸發執行的過程中，都有對應的事件對象，通過事件對象可以獲得鼠標相對頁面的坐標信息、通過事件對象也可以感知什么鍵子被 觸發執行、通過事件對象還可以阻止事件流產生、阻止瀏覽器默認動作。4.1、獲取事件對象
①主流瀏覽器(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()4.2、事件對象的作用
1) 獲得鼠標的坐標信息event.clientX/clientY; //相對dom區域坐標event.pageX/pageY; //相對dom區域坐標，給考慮滾動條距離event.screenX/screenY; //相對屏幕坐標 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html><head><title>新建網頁</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="description" content="" /><meta name="keywords" content="" /><script type="text/javascript"></script><style type="text/css">div{width:700px; height:3000px; background-color:pink;}</style></head><body><h2>事件對象作用</h2><div>Today is very good</div></body> </html> <script type="text/javascript"> //獲得鼠標坐標 var dv = document.getElementsByTagName('div')[0]; dv.onclick = function(evt){console.log(evt.clientX+"---"+evt.clientY);//372---287 相對dom區域坐標console.log(evt.pageX+"---"+evt.pageY);//372---2969 相對dom區域坐標，給計算滾動條距離console.log(evt.screenX+"---"+evt.screenY);//850---310 相對屏幕坐標 } </script> 2) 阻止事件流：event.stopPropagation(); //主流瀏覽器window.event.cancelBubble = true; // IE(678)瀏覽器 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html><head><title>新建網頁</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="description" content="" /><meta name="keywords" content="" /><script type="text/javascript"></script><style type="text/css">div{width:400px; height:300px; background-color:pink;}p{width:300px; height:200px; background-color:lightgreen;}span{background-color:lightblue;}</style></head><body><h2>事件流效果</h2><div><p><span>哈哈哈哈</span></p></div></body> </html> <script type="text/javascript"> var dv = document.getElementsByTagName('div')[0]; var ps = document.getElementsByTagName('p')[0]; var sn = document.getElementsByTagName('span')[0]; dv.addEventListener('click',function(evt){console.log('11111');evt.stopPropagation(); //阻止事件流}); ps.addEventListener('click',function(evt){console.log('22222');evt.stopPropagation(); //阻止事件流}); sn.addEventListener('click',function(evt){console.log('33333');evt.stopPropagation(); //阻止事件流}); </script> 3) 感知被觸發鍵盤鍵子信息event.keyCode 獲得鍵盤對應的鍵值碼信息通過事件觸發時候獲得的keyCode數值碼信息可以對應鍵盤的鍵子信息。 4) 阻止瀏覽器默認動作瀏覽器默認動作，注冊form表單頁面，提交表單的時候，瀏覽器的頁面會根據action屬性值進行跳轉，這個動作稱為“瀏覽器默認動作”。 form表單提交的時候，需要對各個表單域進行驗證，如果驗證失敗則禁止瀏覽器跳轉。event.preventDefault(); //主流瀏覽器(dom1和dom2級事件都起作用) event.returnValue = false; //IE(678)瀏覽器return false; //dom1級事件設置起作用5、加載事件onload
什么是加載事件： js代碼執行時候，需要html&css的支持，就讓html代碼先執行(先進入內存)，js代碼后執行 js代碼在最后執行的過程就是“加載過程”，通常通過“加載事件”實現加載過程加載事件onload可以保證js代碼后于html&css執行，其要在最后執行。 具體設置：<body onload=”加載函數()”>window.onload = 匿名/有名 函數; //推薦總結
以上是生活随笔為你收集整理的JavaScript教程之事件处理的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JavaScript教程之DOM和BOM
- 下一篇： JDK和cglib生成代理类