前端的BOM与DOM知识+事件绑定与事件代理

Love The Way You Lie 2022-03-16 15:26 108阅读 0赞

**目录**

DOM(Document Object Model)文档对象模型

DOM本质

DOM节点操作

DOM树结构操作

BOM（Browser Object Model）浏览器对象模型

几个关键对象：navigator、screen、location、history

事件绑定

事件冒泡

事件代理

\-----------------------------正文---------------------------------

前端使用的（浏览器执行的）js一般包含两部分：

1.JS基础知识（ECMA262标准）

2.JS-WEB-API（W3C标准）：对应DOM BOM 是 各个浏览器厂商根据 DOM在各自浏览器上的实现;\[表现为不同浏览器定义有差别,实现方式不同\]

1.  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.减少浏览器内存占用