js初实DOM以及关于事件冒泡、事件捕获的知识（了解）

最新推荐文章于 2024-10-16 16:26:58 发布

zhoujingx

最新推荐文章于 2024-10-16 16:26:58 发布

阅读量122

点赞数

文章标签： js javascript 前端

本文链接：https://blog.csdn.net/zhoujingx/article/details/104813470

版权

            **初实DOM**（文档 对象 模型）
                    （document object model）
             JS中听过DOM来对HTML文档进行操作，只要理解DOM就可以随心所欲的操作WEB界面上的任意元素
             文档
                - 表示的就是整个HTML网页文档
              对象
                - 对象表示网页中的每一个部分读转换为一个对象（标签 属性 文本 ）
              模型
                - 使用模型来表示对象之间的关系，这样方便我们获取对象（对象多了就不好管了，方便获取对象，类似树状图）
                    体现节点与节点之间的关系。

               节点：
                节点node，是构成我们网页的最基本的组成部分，网页中的每一个部分都可以称为是一个节点
                比如：html标签、属性、文本、注释、整个文档都是一个节点
                虽然都是节点啊，但是实际上他们的具体类型是不同的
                比如：
                    - 标签我们称为元素节点
                    - 属性称为属性节点
                    - 文本称为文本节点
                    - 文档称为文档节点
                节点的类型不同，属性和方法也不尽相同

        浏览器已经为我们提供文档节点对象，是window属性
        可以在页面中使用，文档节点 代表整个网页

        事件（用户和浏览器之间的交互行为）
            事件就是文档或者浏览器窗口中发生的一些特定的交互瞬间
            js与hmtl之间的交互是通过事件实现的
            对于web应用来说，在下面这些代表性的使劲啊：点击某个元素、将鼠标移动至某个元素上方、按下键盘等等
            处理事件：
            我们可以在事件对应的属性中设置一些js代码
                这样当事件触发时，这些代码会执行
                    js代码不写在标签里面 这样子会让结构和行为耦合，不方便维护 不推荐写行内js代码
                    写在script标签里
             浏览器加载一个页面时，是按照自上向下的顺序加载的
             如果在头部使用script标签内写代码
                读取到一行就运行一行
                在代码执行的时候，页面还没有加载
                    onload这个事件回在整个页面加载完成之后运行



            获取元素节点
                - getElementById()
                    通过id属性获取 一个 元素节点对象
                - getElementByTagName()
                    通过标签名获取 一组 元素节点对象
                - getElementByName
                    通过name属性获取 一组 元素节点对象
           获取节点的子节点
             通过具体的元素节点调用
              1、getElementByTagName()
                - 方法，返回当前节点的所有子节点   节点包括空白节点 和文本节点
              2、childeNodes
                 - 属性，表示当前节点的所有子节点  节点包括空白节点 和文本节点
              3、firstChild
                -属性，表示当前节点的第一个子节点  节点包括空白节点 和文本节点
              4、lastChild
                - 属性，表示当前节点的最后一个子节点 节点包括空白节点 和文本节点

                children  说的是子元素  元素就是标签 不包括子节点



                document . querySelector() 这是可以通过css的方式获取节点
                  document.querySelectorAll()  返回一个数组
                  - 兼容IE8 及以上
                - 需要一个选择器的字符串作为参数，可以根据一个css选择器来查询
                - 该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么他只会返回第一个


                **事件的冒泡（bubble）**

            *       所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时候，其祖先元素的 相同事件 也会被触发
                        大部分情况下 冒泡是有意义的



                 **事件委派**
                    -指将事件同意绑定给元素的共同祖先元素，这样当后代元素上的事件触发时
                        会一直冒泡到祖先元素，从而通过祖先怨怒是的响应函数来处理事件
                     -事件委派其实是利用了冒泡，通过委派可以减少事件的绑定参数，提高程序的性能


                 事件绑定 addEventListener("click", function(){},false)
                 这个方法不支持IE8及以下的浏览器 attachEvent()
                 通过这方法可以为元素绑定响应函数
                  参数
                    第一个参数 ： 事件的字符串，不要on
                    第二个参数：  响应的函数（回调函数，当事件触发时，函数会被调用）
                    第三个参数：  是否在捕获阶段触发事件，需要一个布尔值，一般为false
                使用addEventListener（）可以同时为一个元素的相同事件同时绑定多个响应函数
                这样事件被触发时，响应函数将会按函数的绑定顺序执行
                总结：

```
                 (1)
```

                 btn.onclick=function（）{

```
                       alert(1)
```
```
                  }
```

                  btn.onclick=function（）{

```
                       alert(2)
```
```
                  }
```
```
                   (2)
```

                  .addEventListener('click',function () {

```
                       alert(1)
```
```
                        })
```

                  btn.addEventListener('click',function () {

                       alert(2)
                   })
                   第一种方法只执行alert（2） 因为alert（2）函数会覆盖alert（1）
                   第二种方法两个alert都执行，先执行alert（1）后执行alert（2）

                 支持IE8及以下的浏览器
                  attachEvent()
                  参数：
                      1、事件的字符串需要on
                      2、回调函数
                     -这个方法也可以同时为一个事件绑定多个处理函数
                     不同的时它是后绑定，先执行，执行顺序和addEventListener()相反



             事件传播（了解）
              - 关于事件传播网景公司和微软公司有不同的理解
              -   微软公司人为事件应该是由内向外从波，也就是当事件触发时，应该先触发当前元素上的事件
                  然后再向当前的祖先元素上从波，也就是说事件应该再冒泡阶段执行
              - 网景公司认为事件应该是有外向内传播，也就是当前事件触发的时候，应该先触发当前元素的最外层的祖先元素的事件
                  然后再向内传播给后代元素

                      <div id="outer">
                        <div id="inner"></div>
                      </div>
                      微软公司的事件执行顺序  先执行inner的事件 再执行outer相同的事件（冒泡）
                      网景公司的事件执行顺序  先执行outer的事件，再执行inner相同的事件

              W3C综合了两个公司的方案，将事件的传播分成三个阶段
              1、捕获阶段 outer -> inner
                  在捕获阶段按照从外层的祖先元素，向目标元素惊醒事件的捕获，但是默认此时不会触发事件（从document开始W3C）
              2、在目标阶段 inner
                 事件捕获到目标元素，捕获结束开始在目标元素上触发事件
              3、冒泡阶段  inner -> outer
                  事件从目标元素向他的祖先元素传递，分别以此触发祖先元素上的事件


               * 如果希望在捕获阶段触发事件事件，可以将addEventListener（）第三个参数设置为true（一般情况下，我们不会在捕获阶段触发事件）
                  IE8及以下浏览器没有捕获阶段