前端的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.减小浏览器内存占用