JS事件類型+綁定+冒泡、捕獲分析

時間 2019-12-07

原文原文鏈接

JS事件綁定固然是爲了實現與用戶之間的交互效果，小編這邊本身作筆記的同時也跟你們一塊兒分享一下。javascript

事件綁定

.對象.on+事件=function(event){...} //這種方法兼容性好但只能爲對象綁定單個事件。
對象.addEventListener(事件,處理函數,false) //該方法經常使用，能夠爲對象綁定多個事件

這邊小編爲第二個方法要補充的一點是，當調用函數放在其中時事件同樣則至關於綁定了一個事件（緣由：函數地址相同），但在個裏面寫上相同的代碼沒法實現至關於綁定了兩個同樣的事件都會執行。html

封裝綁定事件函數

//參數爲 對象、事件類型、事件函數
function addEvent(elem,type,handle){
          if(elem.addEventListener){
              elem.addEventListener(type,handle,false);
          }
          else if(elem.addEvent){
              //IE9如下專用
              elem.addEvent('on'+type,function(){
                  handle.call(elem);  //以elem爲對象調用handle方法
              })
          }
          else{
              //兼容性最好
              elem['on'+type]=handle;
          }
  }  
複製代碼

事件冒泡、捕獲

冒泡
當標籤結構上有嵌套關係是時綁定事件會產生冒泡現象舉個簡單的例子咱們寫三個有嵌套關係的盒子，附上點擊事件。

<body>
    <div style="width: 100px;height:100px; background-color: red; ">
        <div style="width: 50px;height:50px; background-color: green; ">
            <div style="width: 30px;height:30px; background-color: yellowgreen; "></div>
        </div>
    </div>
  <script> var div=document.getElementsByTagName('div'); var div=document.getElementsByTagName('div'); div[0].addEventListener('click',function(){ console.log("a"); },false); div[1].addEventListener('click',function(){ console.log("b"); },false); div[2].addEventListener('click',function(){ console.log("c"); },false); </script>    
</body>
複製代碼

點擊淺綠色區域會產生冒泡（事件由子元素冒到父元素），注意只要結構上有嵌套關係就會，哪怕定位出去。java

捕獲
當咱們定義事件時addEventListener最後一個參數爲true時綁定的改事件爲捕獲事件，與冒泡相反
捕獲冒泡同時存在
捕獲優先

常見事件類型

鼠標事件
- click：點擊
- mouseup、mousedown：按下、擡起
- mouseover：懸停
- mouseout：離開
鍵盤事件
- keypress：按鍵
- keydown、keyup：按下、擡起
keydown監聽全部鍵位，keypress監聽ascii碼鍵位函數
文本事件
- input：內容有變就發生（主要是value值隨時變化）
- change：獲取焦點時和失去焦點時內容有變就發生
- focus：聚焦時發生
- blur：失去焦點發生

ending...ui

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。