整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          前端開發-JavaScript中的事件(Event)

          前端開發-JavaScript中的事件(Event)及事件處理總結

          avaScript是基于事件驅動的編程模型,當網頁頁面發生某種形式的交互操作或者變化時就會產生事件。舉個簡單的例子:用戶在網頁頁面點擊鼠標按鍵就會產生一個點擊事件。鼠標移動則會產生鼠標移動的事件。因此事件對于JavaScript客戶端腳本語言至關重要,在JavaScript編程模型中事件是實現一切前端交互操作的基礎與依據。事件的學習、理解與使用成為JavaScript編程學習的重點與難點。本文主要介紹部分常用事件及事件處理。

          event事件


          1、事件的類型與事件處理

          在面向對象程序設計語言中,事件是依附于對象的。不同的對象具有不同類型的事件類型及事件處理的方法。JavaScript中一個事件主要由事件對象、事件類型與事件處理三部分所組成。JavaScript常用事件類型主要包括鍵盤事件、鼠標與滾輪事件、頁面事件、表單事件、設備事件等。在頁面運行過程中,JavaScript通過事件類型,檢測發生的事件,并對事件進行處理。事件處理程序響應事件、處理時間需要按照一定的順序執行,事件順序主要包括事件捕獲與時間冒泡兩種類型。其中事件捕獲從HTML最外層開始處理事件,直到底層元素事件的處理完成。事件冒泡則與事件捕獲相反,從子元素開始響應事件。在默認情況下消息響應都是從子元素開始的。

          冒泡處理實例

          冒泡處理實例如上圖,div元素嵌套,將兩個div分為父元素與子元素,同樣定義onclick單擊事件,首先響應的是內層子元素。

          2、事件的綁定

          除直接在對HTML元素直接定義事件屬性之外,還可以通過事件綁定形式實現事件的注冊、綁定與監聽。通過調用DOM文檔對象模型提供的addEventListener()方法實現為網頁頁面元素添加事件,該函數的原型描述如下:

          addEventListenser(type,listener [,options ])
          type:事件類型
          listener:事件處理函數名稱
          options: bool類型,事件處理方式,捕獲、冒泡
          

          通過對DOM對象進行事件綁定就可以響應制定的消息,但需注意,頁面元素能夠響應的事件類型。事件綁定實例描述如下:

          事件監聽與處理

          事件綁定實例如上圖所示,我們給id為test的div元素綁定了click事件,并用myfun函數對事件進行處理。其中事件類型是需要編寫者注意的問題,這些事件類型是定義好的,我們只需要選擇即可,例如鼠標事件的定義如下表所示:

          鼠標事件類型

          除以上事件綁定之外,還可以通過以下簡單形式綁定事件,如上例題事件可通過一下語句定義:

          事件綁定的簡單形式

          3、事件的解除

          通常情況下事件的綁定執行之后是不會移除事件的,但如果需要解除事件的綁定,則可以通過removeEventListener()方法或者對綁定事件的DOM對象對應時間名賦值為null實現事件的解除。實際案例如下所示:

          事件移除操作

          4、event對象

          event對象是JavaScript語言中重要的對象之一,用于存儲記錄交互響應實現相關基本信息,event對象主要存儲信息包括事件類型、事件對應的按鍵信息及事件發生相關坐標信息等。event對象是其他各類事件的父類,其他事件對象均為該類的子類。event對象會在事件調用過程中以隱藏的形式進行參數的傳遞。event事件使用描述如下圖:

          event事件使用實例


          以上給出了JavaScript中的事件基本概念及案例分析,如有問題可在評論區討論。本頭條號長期關注編程資訊分享;編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見,可以聯系作者,共同探討。期待大家關注!相關文章鏈接如下:

          前端開發-JavaScript初學者練習題及參考答案

          前端開發-CSS3動畫實現焦點(圖文輪播)圖效果

          前端開發-JavaScript DOM動態生成文本框

          前端設計-教你如何快速繪制HTML5動畫

          前端設計-響應式頁面開發基礎

          前端設計-Ajax技術及實例展示

          件處理

          【onClick】單擊事件、【onMouseOver】鼠標經過事件、【onMouseOut】鼠標移出事件、【onChange】文本內容改變事件、【onSelect】文本被框選事件、【onFoucus】得到光標事件、【onBlur】光標失去事件、【onLoad】網頁加載事件(在body標簽中添加)、【onUnload】網頁關閉事件(在body標簽中添加或者使用window.onload=function(){} )

          事件注冊及監聽

          1、 DOM0級事件處理

          在標簽中添加onClick或其他事件的屬性并賦值為JS的自定義方法名

          onClick="dongfun(20)"
          

          兩種方法在事件中得到事件的標簽對象:

          <div id="divid" onMouseOver="overbut(this)" onMouseOut="outbut()">東小東</div>
          <script>
           //通過參數傳遞對象
           function overbut(obj){
           obj.innerHTML="事件觸發發,鼠標在我的范圍";
           }
           //通過ID查找到對象
           function outbut(){
           document.getElementById("divid").innerHTML="再見見";
           }
          </script>
          

          內容改變監聽:

          方法一

          <input onChange="this.style.backgroundColor='red'">
          

          方法二

          <input id="inid" onChange="inputbut(this)">
          <script>
           function inputbut(obj){
           obj.style.backgroundColor="green";//更改樣式 
           }
          </script>
          

          2、 DOM1級事件處理

          通過標簽或者ID尋找到對象,進行事件監聽,一個事件只能對應一個事件處理函數,在HTML中不用進行注冊

          function dongfunx(){
           alert("東小東彈框");
           }
          //找到對象
          var h1objx=document.getElementsByTagName("h1")[0];
          //注冊事件
          h1objx.onclick=dongfunx;
          //清除事件
          h1objx.onclick=null;
          

          3、 DOM2級事件處理

          通過標簽或者ID尋找到對象,進行事件監聽,一個事件只能對應多個事件處理函數,在HTML中不用進行注冊

          //通過ID找到標簽對象
          divobjx=document.getElementById("divid");
           
          //添加監聽事件,可以添加多個相同或者不同的事件
          //參數(事件名,處理函數名),其中事件名是普通事件中去掉“on”前綴
          divobjx.addEventListener("click",onck1);
          divobjx.addEventListener("click",onck2);
           
          //事件處理函數
          function onck1(){
           alert("----- onck1 -----"); 
           }
          function onck2(){
           alert("----- onck2 -----"); 
          }
           
          //移除點擊事件
          divobjx.removeEventListener("click",onck1);
          

          匿名方法實現

          divobjx=document.getElementById("divid");
          divobjx.addEventListener("click",function(){
          //執行操作內容
          alert("----------");
          });
          

          補充:

          阻止HTML的默認事件

          <a  rel="external nofollow" >跳轉</a>
          <script>
           function dongfunx(eventx){
           eventx.preventDefault();//阻止默認事件,不進行跳轉
           }
           //找到對象
           var aobjx=document.getElementsByTagName("a")[0];
           //注冊事件
           aobjx.onclick=dongfunx;
          </script>
          

          頁面加載完畢監聽:

          window.onload=function(){
          alert("頁面加載完畢");
          }
          

          異常捕獲

          如果程序執行時遇到異常且未進行異常捕獲,則程序將終止執行,如果有異常捕獲,則可以繼續執行異常以下的代碼。

          捕獲所有異常:

          try{
           //alert(jj);//未定義變量異常
           throw("東小東異常");//手動拋出異常,參數為異常內容
          }catch(e){
           alert("捕獲的錯誤:"+e);
           }
          

          最后

          以下是總結出來最全前端框架視頻,包含: javascript/vue/react/angualrde/express/koa/webpack 等學習資料。

          【領取方式】

          關注頭條 前端全棧架構丶第一時間獲取最新前端資訊學習

          手機用戶可私信關鍵詞 【前端】即可獲取全棧工程師路線和學習資料!


          主站蜘蛛池模板: 一区二区三区中文字幕| 日韩一区二区三区视频久久| 在线不卡一区二区三区日韩| 高清国产精品人妻一区二区| 视频一区二区三区免费观看| 日本精品3d动漫一区二区| 亚洲福利电影一区二区?| 无码国产精品一区二区免费模式| aⅴ一区二区三区无卡无码| 日韩成人一区ftp在线播放| 无码精品不卡一区二区三区| 69久久精品无码一区二区| 国产精品高清一区二区三区| 夜夜添无码一区二区三区| 国模精品一区二区三区| 亚洲性日韩精品国产一区二区| 日韩一区二区三区精品| 国产伦理一区二区三区| 国产一区二区福利久久| 国产亚洲福利一区二区免费看| 亚州AV综合色区无码一区| 国产日韩一区二区三区在线播放| 97精品国产一区二区三区| 亚洲熟妇无码一区二区三区导航 | 亚洲影视一区二区| 无码国产精品一区二区免费式芒果| 国产美女精品一区二区三区| 日本不卡一区二区三区| 亚洲AV日韩AV天堂一区二区三区 | 人妻av综合天堂一区| 亚洲Av永久无码精品一区二区| 国产日韩一区二区三区| 成人精品一区二区激情| 国产SUV精品一区二区88L| 国产精品免费大片一区二区| 国模少妇一区二区三区| 精品一区二区三区自拍图片区| 精品一区二区ww| 国产福利电影一区二区三区,亚洲国模精品一区 | 日韩美女在线观看一区| 国产精品成人一区二区三区|