前端的BOM與DOM知識+事件綁定與事件代理

時間 2019-11-16

標籤前端 bom dom 知識事件綁定代理欄目 HTML 简体版

原文原文鏈接

目錄html

DOM(Document Object Model)文檔對象模型前端

DOM本質node

DOM節點操做瀏覽器

DOM樹結構操做bash

BOM（Browser Object Model）瀏覽器對象模型數據結構

幾個關鍵對象：navigator、screen、location、historyapp

事件綁定dom

事件綁定函數

事件冒泡ui

事件代理

-----------------------------正文---------------------------------

前端使用的（瀏覽器執行的）js通常包含兩部分：

1.JS基礎知識（ECMA262標準）

2.JS-WEB-API（W3C標準）：對應DOM BOM 是各個瀏覽器廠商根據 DOM在各自瀏覽器上的實現;[表現爲不一樣瀏覽器定義有差異,實現方式不一樣]

window 是 BOM 對象，而非 js 對象；

#DOM(Document Object Model)文檔對象模型

幾道題目

1.DOM是哪一種基本的數據結構？

樹型結構

2.DOM節點的attribute和property有何區別？

proterty是指JS對象的屬性；

attribute是指html的屬性

###DOM本質

W3C標準的文檔，可用於被瀏覽器解析並渲染出Web頁面的html文檔

###DOM節點操做

1.獲取DOM節點：getElementById/getElementByTagName/getElementByClassName/querySelectorAll

// 獲取元素
var div1 = document.getElementById("div1")  
// 獲取集合
var divList = document.getElementsByTagName("div")  
var classList = document.getElementsByClassName(".content") 
var pList = document.querySelectorAll("p")
複製代碼

2.property（js對象的屬性）

var pList = document.querySelectorAll("p")
var p = pList[0]
// 獲取元素樣式
console.log(p.style.width)
// 修改樣式
p.style.width = '100px'
// 獲取元素class
console.log(p.className)
// 修改class
p.className = 'p1'
// 獲取nodeName和nodeType
console.log(p.nodeName)
console.log(p.nodeType)
複製代碼

nodeName:div/a/p/span/h1等等

nodeType: 爲數字型，常規的dom節點都是1，text文本是3；這個能夠用來區分節點類型

3.Attribute（html屬性）：getAttribute/setAttribute

var pList = document.querySelectorAll("p")
var p = pList[0]
// 獲取html屬性
p.getAttribute('data-name')
// 設置html屬性
p.setAttribute('data-name', 'imooc')
p.getAttribute('style')
p.setAttribute('style', 'color: red')
複製代碼

###DOM樹結構操做

1.新增節點

2.獲取父節點

3.獲取子節點

4.刪除節點

var div1 = document.getElementById('div1')
// 添加新節點
var p1 = document.createElement('p')
p1.innerHTML = 'this.is p1'
div1.appendChild(p1)

// 移動已有節點(原來節點就沒有了)
var p2 = document.getElementById('p2')
div1.appendChild(p2)

// 獲取父節點
var parent = div1.parentElement
// 獲取子節點   
var child = div1.childNodes
// 刪除子節點
div1.removeChild(child[0])
複製代碼

#BOM（Browser Object Model）瀏覽器對象模型

幾道題目：

1.如何檢測瀏覽器類型

尤爲是移動端安卓與IOS/app嵌入瀏覽器等

2.如何拆解url的各部份內容信息

###幾個關鍵對象：navigator、screen、location、history

var ua = navigator.userAgent
var isChrome = ua.indexOf('Chrome')

screen.width
screen.height

location.href
location.protocol // 協議類型 http https
location.pathname // 路由地址 /learn/99   
location.search // url中的參數
location.hash  

history.back()
history.forward()
複製代碼

#事件綁定

編寫一個通用的事件綁定監聽函數

// 一個通用的事件綁定監聽函數
// 1.未封裝的事件綁定
var btn = document.getElementById('btn1')
btn.addEventListener('click', function(){
 alert('clicked')
})
// 2.基本封裝,參數（綁定元素， 事件類型， 回調函數）
function bindEvent(elem, type, fn){
 elem.addEventListener(type, fn))
}
// 使用
var a = document.getElementById('link1')
bindEvent(a, 'click', function(e){
 e.preventDefault()
 alert('a is clicked')
})
複製代碼

IE低版本瀏覽器使用的方法是attachEvent ，不深究

描述事件冒泡流程

對於一個無限滾動下拉加載圖片的頁面，如何給每個圖片綁定事件

###事件綁定

一個通用綁定事件的函數完善：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>    
  <div id="div1">
    div1
    <p id="p1">p1</p>
  </div>
</body>
<script>
  // 通用的事件綁定監聽函數(升級版)
  // 參數（綁定元素， 事件類型，子元素， 回調函數）
  function bindEvent(elem, type, selector, fn){
   if(fn == null){
   fn = selector
   selector = null
   }
   
   elem.addEventListener(type, function(e){
   var target
   if(selector){
    target = e.target
    if(target.matches(selector)){
    fn.call(target, e)
    }
   }else{
    fn(e)
   }
   })
  }

  var p1 = document.getElementById('p1')
  var div1 = document.getElementById('div1')
  bindEvent(div1, 'click', function(e){
   alert('div1')
  })
  bindEvent(p1, 'click', function(e){
   // e.stopPropagation()
   alert('p1')
  })
</script>
</html>
複製代碼

###事件冒泡

父元素綁定了點擊事件，子元素點擊的時候，其點擊事件會不斷冒泡，促使父元素的點擊事件也會發生

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>opacity</title>
<style>
 .circle {
 border-radius: 50%;
 width: 20px;
 height: 20px; 
 background: red;
 /* 寬度和高度須要相等 */
}
</style>

</head>
<body>    
 <div>
  <div id="div1">
   div1
   <p id="p1">p1</p>
  </div>
 </div>
</body>
<script>
 // 通用的事件綁定監聽函數(升級版)
 // 參數（綁定元素， 事件類型， 回調函數）
 function bindEvent(elem, type, selector, fn){
  if(fn == null){
  fn = selector
  selector = null
  }
  
  elem.addEventListener(type, function(e){
  var target
  if(selector){
   target = e.target
   if(target.matches(selector)){
   fn.call(target, e)
   }
  }else{
   fn(e)
  }
  })
 }

 var p1 = document.getElementById('p1')
 var div1 = document.getElementById('div1')
 bindEvent(div1, 'click', function(e){
  alert('div1')
 })
 bindEvent(p1, 'click', function(e){
  // e.stopPropagation()
  alert('p1')
 })
</script>
</html>
複製代碼

當點擊p1的時候，會先alert出p1，再alert出div1；

若是加了e.stopPropatation()，阻止事件冒泡，就不會彈出div1

*阻止冒泡：e.stopPropatation()

###事件代理

經過代理可實現批量對子節點增長點擊事件，點擊哪一個子節點就觸發對應的事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>    
  <div id="div1">
    <a>a1</a>
    <a>a2</a>
    <a>a3</a>
    <a>a4</a>
  </div>
</body>
<script>
  var div1 = document.getElementById('div1')
  div1.addEventListener('click', function(e){
   var target = e.target
   if(target.nodeName === 'A'){ // 此處注意：a標籤的nodeName爲大寫的A
    alert(target.innerHTML)
   }
  })
</script>
</html>
複製代碼

點擊哪一個a標籤就會彈出哪一個a標籤的內容，開發者可在這個基礎上增長針對不一樣a標籤不一樣的處理邏輯

代理的優勢：1.代碼簡潔；2.減小瀏覽器內存佔用