Web API （節點操做）、（事件高級）、（鼠標事件對象）

1、節點操做   

(1)刪除節點 ：parent.removeChild（child）注意：只能是父親刪除兒子 ；

 

 

(2)克隆節點 ：element.cloneNode（false | true）注意 ：false表明的是淺克隆 ，只會去克隆標籤 ； |   true表明的是深克隆，既克隆標籤又會克隆內容；

(3)建立節點的三種方式 ：document .write  (  )  ；特色 ：若是當頁面已經渲染完畢 ，再次觸發這個方法的的話 ，會覆蓋原來頁面的全部內容 ；

　　　　　　　　　　　  element . innerHTML (  ) ；特色 ：效率高 ，結構不方便查看 ，也不方便進行事件註冊 ；

　　　　　　　　　　　  document . createElement (  ) ；特色 ：效率比innerHTML低一些 ，可是結構比較清晰 ，方便去進行事件註冊 ；

 

 

 

二 、事件高級   

一、註冊事件的方式 ：

(1)傳統方式註冊 ：btn.onclick = function( ){  }   ；

(2)添加監聽 ：btn.addEventListener（'click'，fn）；注意 ：flag ：false表明的是事件冒泡 。 |    flag ：true表明的是事件捕獲 ；

(3)瞭解 :btn . attachEvent('onclick' , fn)  ;  

 

二、註銷事件的方式 ：

(1)傳統方式 ：btn . onclick = null  ；

(2)監聽方式 ：btn . removeEventListener（'click' ， fn）；

 

 

 

(3)瞭解 ：btn . detachEvent（'onclick' ， fn） ；

 

(4)刪除事件兼容性解決方案 ：

 

 

 

三、事件流的三個階段 ：

(1)捕獲階段 ：從外到內一層一層進行傳遞 ，直到咱們的目標對象 ；

(2)目標階段   ；

(3)冒泡階段 : 從內到外 ，從目標對象向外一層一層進行冒泡  ；

 

 

 

 

 

四、事件對象 ：

(1)什麼是事件對象 ：描述這一次事件的對象 ，裏面封裝了此次事件相關的數據信息  ；

(2)屬性 ： e .target   獲取觸發事件的對象 ；   　　　　

　　　　   e . type    獲取事件類型 ；

　　　　   e . pageX |  pageY  獲取鼠標在頁面中的位置 ；

　　　　   e . clientX | clientY  獲取鼠標在可視區域的位置 ；

　　　　   e . screenX | screenY 獲取鼠標在屏幕中的位置 ；

(3)方法 ：阻止冒泡   e . stopPropagation（）

　　　　  阻止默認行爲  e . preventDefault（）； 注意 ：在傳統方式註冊的 ，咱們能夠直接return false  ；

（4）事件對象的屬性和方法 ；

 

 

 

五、事件委託 ：

(1)原理 ：用的是事件冒泡  ；

(2) 注意 ：本應該給子元素綁定的事件 ，我給父元素去設置 ，這樣咱們一旦點擊了子元素 ，就會經過事件冒泡給父元素的事件 ，而後咱們經過事件對象 . target 就可以獲取到目標元素 ；

 

 

6、經常使用鼠標事件 ：

 

7、鼠標事件對象 ：