哪有时间学JavaScript78~107
三. DOM
DOM(Document Object Model)
: 文档对象模型- 其实就是操作
html
中的标签的一些能力 - 我们可以操作哪些内容
- 获取一个元素
- 移除一个元素
- 创建一个元素
- 向页面里面添加一个元素
- 给元素绑定一些事件
- 获取元素的属性
- 给元素添加一些
css
样式 - …
DOM
的核心对象就是docuemnt
对象document
对象是浏览器内置的一个对象,里面存储着专门用来操作元素的各种方法DOM
: 页面中的标签,我们通过js
获取到以后,就把这个对象叫做 DOM 对象
1. 获取一个元素
- 通过
js
代码来获取页面中的标签 - 获取到以后我们就可以操作这些标签了
1-1 getElementById
-
getElementById
是通过标签的id
名称来获取标签的 -
因为在一个页面中
id
是唯一的,所以获取到的就是一个元素<body> <div id="box"></div> <script> var box = document.getElementById('box') console.log(box) // <div></div> </script> </body>
- 获取到的就是页面中的那个 id 为 box 的 div 标签
1-2 getElementsByClassName
-
getElementsByClassName
是用过标签的class
名称来获取标签的 -
因为页面中可能有多个元素的
class
名称一样,所以获取到的是一组元素 -
哪怕你获取的
class
只有一个,那也是获取一组元素,只不过这一组中只有一个 DOM 元素而已<body> <div calss="box"></div> <script> var box = document.getElementsByClassName('box') console.log(box) // [<div></div>] console.log(box[0]) // <div></div> </script> </body>
- 获取到的是一组元素,是一个长得和数组一样的数据结构,但是不是数组,是 伪数组
- 这个一组数据也是按照索引排列的,所以我们想要准确的拿到这个
div
,需要用索引来获取
1-3 getElementsByTagName
-
getElementsByTagName
是用过标签的 标签 名称来获取标签的 -
因为页面中可能有多个元素的 标签 名称一样,所以获取到的是一组元素
-
哪怕真的只有一个这个标签名,那么也是获取一组元素,只不过这一组中只有一个 DOM 元素而已
<body> <div></div> <script> var box = document.getElementsByTagName('div') console.log(box) // [<div></div>] console.log(box[0]) // <div></div> </script> </body>
- 和
getElementsByClassName
一样,获取到的是一个长得很像数组的元素 - 必须要用索引才能得到准确的
DOM
元素
- 和
1-4 querySelector
-
querySelector
是按照选择器的方式来获取元素 -
也就是说,按照我们写
css
的时候的选择器来获取 -
这个方法只能获取到一个元素,并且是页面中第一个满足条件的元素
console.log(document.querySelector('div')) // 获取页面中的第一个 div 元素 console.log(docuemnt.querySelector('.box')) // 获取页面中第一个有 box 类名的元素 console.log(document.querySelector('#box')) // 获取页面中第一个 id 名为 box 的元素
1-5 querySelectorAll
-
querySelectorAll
是按照选择器的方式来获取元素 -
这个方法能获取到所有满足条件的元素,以一个伪数组的形式返回
console.log(document.querySelectorAll('div')) // 获取页面中的所有的 div 元素 console.log(docuemnt.querySelectorAll('.box')) // 获取页面中所有有 box 类名的元素
- 获取到的是一组数据,也是需要用索引来获取到准确的每一个
DOM
元素
- 获取到的是一组数据,也是需要用索引来获取到准确的每一个
2. 操作属性
- 通过我们各种获取元素的方式获取到页面中的标签以后
- 我们可以直接操作
DOM
元素的属性,就能直接把效果展示在页面上
2-1 innerHTML
-
获取元素内部的
HTML
结构<body> <div> <p> <span>hello</span> </p> </div> <script> var div = document.querySelector('div') console.log(div.innerHTML) /* <p> <span>hello</span> </p> */ </script> </body>
-
设置元素的内容
<body> <div></div> <script> var div = document.querySelector('div') div.innerHTML = '<p>hello</p>' </script> </body>
- 设置完以后,页面中的
div
元素里面就会嵌套一个p
元素
- 设置完以后,页面中的
2-2 innerText
-
获取元素内部的文本(只能获取到文本内容,获取不到
html
标签)<body> <div> <p> <span>hello</span> </p> </div> <script> var div = document.querySelector('div') console.log(div.innerText) // hello </script> </body>
-
可以设置元素内部的文本
<body> <div></div> <script> var div = document.querySelector('div') div.innerText = '<p>hello</p>' </script> </body>
- 设置完毕以后,会把
<p>hello</p>
当作一个文本出现在div
元素里面,而不会把p
解析成标签
- 设置完毕以后,会把
2-3 getAttribute
-
获取元素的某个属性(包括自定义属性)
<body> <div a="100" class="box"></div> <script> var div = document.querySelector('div') console.log(div.getAttribute('a')) // 100 console.log(div.getAttribute('class')) // box </script> </body>
2-4 setAttribute
-
给元素设置一个属性(包括自定义属性)
<body> <div></div> <script> var div = document.querySelector('div') div.setAttribute('a', 100) div.setAttribute('class', 'box') console.log(div) // <div a="100" class="box"></div> </script> </body>
2-5 removeAttribute
-
直接移除元素的某个属性
<body> <div a="100" class="box"></div> <script> var div = document.querySelector('div') div.removeAttribute('class') console.log(div) // <div a="100"></div> </script> </body>
2-6 style
-
专门用来给元素添加
css
样式的 -
添加的都是行内样式
<body> <div></div> <script> var div = document.querySelector('div') div.style.width = "100px" div.style.height = "100px" div.style.backgroundColor = "pink" console.log(div) // <div style="width: 100px; height: 100px; background-color: pink;"></div> </script> </body>
- 页面中的
div
就会变成一个宽高都是100
,背景颜色是粉色
- 页面中的
2-7 获取元素的非行间样式
-
我们在操作
DOM
的时候,很重要的一点就是要操作元素的css
样式 -
那么在操作
css
样式的时候,我们避免不了就要获取元素的样式 -
之前我们说过可以用
元素.style.xxx
来获取 -
但是这个方法只能获取到元素 行间样式,也就是写在行内的样式
<style> div { width: 100px; } </style> <body> <div style="height: 100px;"> <p>我是一个 p 标签</p> </div> <script> var oDiv = document.querySelector('div') console.log(oDiv.style.height) // 100px console.log(oDIv.style.width) // '' </script> </body>
-
不管是外链式还是内嵌式,我们都获取不到该元素的样式
-
这里我们就要使用方法来获取了
getComputedStyle
和currentStyle
-
这两个方法的作用是一样的,只不过一个在 非 IE 浏览器,一个在 IE 浏览器
getComputedStyle(非IE使用)
-
语法:
window.getComputedStyle(元素, null).要获取的属性
<style> div { width: 100px; } </style> <body> <div style="height: 100px;"> <p>我是一个 p 标签</p> </div> <script> var oDiv = document.querySelector('div') console.log(window.getComputedStyle(oDiv).width) // 100px console.log(window.getComputedStyle(oDiv).height) // 100px </script> </body>
- 这个方法获取行间样式和非行间样式都可以
currentStyle(IE使用)
-
语法:
元素.currentStyle.要获取的属性
<style> div { width: 100px; } </style> <body> <div style="height: 100px;"> <p>我是一个 p 标签</p> </div> <script> var oDiv = document.querySelector('div') console.log(oDiv.currentStyle.width) // 100px console.log(oDiv.currentStyle.height) // 100px </script> </body>
2-8 className
-
专门用来操作元素的 类名的
<body> <div class="box"></div> <script> var div = document.querySelector('div') console.log(div.className) // box </script> </body>
-
也可以设置元素的类名,不过是全覆盖式的操作
<body> <div class="box"></div> <script> var div = document.querySelector('div') div.className = 'test' console.log(div) // <div class="test"></div> </script> </body>
- 在设置的时候,不管之前有没有类名,都会全部被设置的值覆盖
3. DOM节点
DOM
的节点我们一般分为常用的三大类 元素节点 / 文本节点 / 属性节点- 什么是分类,比如我们在获取元素的时候,通过各种方法获取到的我们叫做元素节点(标签节点)
- 比如我们标签里面写的文字,那么就是文本节点
- 写在每一个标签上的属性,就是属性节点
3-1 元素节点
- 我们通过
getElementBy...
获取到的都是元素节点
3-2 属性节点
- 我们通过
getAttribute
获取的就是元素的属性节点
3-3 文本节点
- 我们通过
innerText
获取到的就是元素的文本节点
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q6KT1mjf-1673443550635)(%E7%AC%94%E8%AE%B0.assets/image-20220529093256532.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fOZZqNET-1673443550641)(%E7%AC%94%E8%AE%B0.assets/image-20220529093305827.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HwAKHNdA-1673443550645)(%E7%AC%94%E8%AE%B0.assets/image-20220529093325381.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LvQ9hpr0-1673443550646)(%E7%AC%94%E8%AE%B0.assets/image-20220529093334602.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pzd7TG6x-1673443550647)(%E7%AC%94%E8%AE%B0.assets/image-20220529093346903.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6BfyJhNa-1673443550648)(%E7%AC%94%E8%AE%B0.assets/image-20220529093416413.png)]
3-4 获取节点
-
childNodes
:获取某一个节点下 所有的子一级节点<body> <div> <p>hello</p> </div> <script> // 这个 oDiv 获取的是页面中的 div 元素,就是一个元素节点 var oDiv = document.querySelector('div') console.log(oDiv.childNodes) /* NodeList(3) [text, p, text] 0: text 1: p 2: text length: 3 __proto__: NodeList */ </script> </body>
- 我们会发现,拿到以后是一个伪数组,里面有三个节点
- 一个
text
:从<div> 一直到 <p>
中间有一个换行和一堆空格,这个是第一个节点,是一个文本节点 - 一个
p
:这个p
标签就是第二个节点,这个是一个元素节点 - 一个
text
:从</p> 一直到 </div>
中间有一个换行和一堆空格,这个是第三个节点,是一个文本节点 - 这个时候就能看到我们有不同的节点类型了
-
children
:获取某一节点下所有的子一级 元素节点<body> <div> <p>hello</p> </div> <script> // 这个 oDiv 获取的是页面中的 div 元素,就是一个元素节点 var oDiv = document.querySelector('div') console.log(oDiv.children) /* HTMLCollection [p] 0: p length: 1 __proto__: HTMLCollection */ </script> </body>
- 我们发现只有一个节点了,因为
children
只要元素节点 - div 下面又只有一个元素节点,就是
p
- 所以就只有一个,虽然只有一个,但是也是一个 伪数组
- 我们发现只有一个节点了,因为
-
firstChild
:获取某一节点下子一级的 第一个节点<body> <div> <p>hello</p> </div> <script> // 这个 oDiv 获取的是页面中的 div 元素,就是一个元素节点 var oDiv = document.querySelector('div') console.log(oDiv.firstChild) // #text </script> </body>
- 这个是只获取一个节点,不再是伪数组了
- 获取的是第一个
- 第一个就是
<div> 一直到 <p>
的那个换行和空格,是个文本节点
-
lastChild
:获取某一节点下子一级的 最后一个节点<body> <div> <p>hello</p> </div> <script> // 这个 oDiv 获取的是页面中的 div 元素,就是一个元素节点 var oDiv = document.querySelector('div') console.log(oDiv.lastChild) // #text </script> </body>
- 只获取一个节点,不再是伪数组
- 获取的是最后一个
- 最后一个就是
</p> 一直到 </div>
之间的换行和空格,是个文本节点
-
firstElementChild
:获取某一节点下子一级 第一个元素节点<body> <div> <p>hello</p> </div> <script> // 这个 oDiv 获取的是页面中的 div 元素,就是一个元素节点 var oDiv = document.querySelector('div') console.log(oDiv.firstElementChild) // <p>hello</p> </script> </body>
- 只获取一个节点,不在是伪数组
- 获取的是第一个 元素节点
- 第一个元素节点就是
p
标签,是一个元素节点
-
lastElementChild
:获取某一节点下子一级 最后一个元素节点<body> <div> <p>hello</p> <p>world</p> </div> <script> // 这个 oDiv 获取的是页面中的 div 元素,就是一个元素节点 var oDiv = document.querySelector('div') console.log(oDiv.lastElementChild) // <p>world</p> </script> </body>
- 只获取一个节点,不在是伪数组
- 获取的是最后一个 元素节点
- 最后一个元素节点是
<p>world</p>
,是一个元素节点
-
nextSibling
:获取某一个节点的 下一个兄弟节点<body> <ul> <li id="a">hello</li> <li id="b">world</li> <li id="c">!!!</li> </ul> <script> // 这个 oLi 获取的是页面中的 li 元素,就是一个元素节点 var oLi = document.querySelector('#b') console.log(oLi.nextSibling) // #text </script> </body>
- 只获取一个节点,不在是伪数组
- 获取的是
id="b"
这个li
的下一个兄弟节点 - 因为
id="b"
的下一个节点,是两个li
标签之间的换行和空格,所以是一个文本节点
-
previousSibling
:获取某一个节点的 上一个兄弟节点<body> <ul> <li id="a">hello</li> <li id="b">world</li> <li id="c">!!!</li> </ul> <script> // 这个 oLi 获取的是页面中的 li 元素,就是一个元素节点 var oLi = document.querySelector('#b') console.log(oLi.previousSibling) // #text </script> </body>
- 只获取一个节点,不在是伪数组
- 获取的是
id="b"
这个li
的上一个兄弟节点 - 因为
id="b"
的上一个节点,是两个li
标签之间的换行和空格,所以是一个文本节点
-
nextElementSibling
:获取某一个节点的 下一个元素节点<body> <ul> <li id="a">hello</li> <li id="b">world</li> <li id="c">!!!</li> </ul> <script> // 这个 oLi 获取的是页面中的 li 元素,就是一个元素节点 var oLi = document.querySelector('#b') console.log(oLi.nextElementSibling) // <li id="c">!!!</li> </script> </body>
- 只获取一个节点,不在是伪数组
- 获取的是
id="b"
这个li
的下一个兄弟元素节点 - 因为
id="b"
的下一个兄弟元素节点就是id="c"
的li
,是一个元素节点
-
previousElementSibling
:获取某一个节点的 上一个元素节点<body> <ul> <li id="a">hello</li> <li id="b">world</li> <li id="c">!!!</li> </ul> <script> // 这个 oLi 获取的是页面中的 li 元素,就是一个元素节点 var oLi = document.querySelector('#b') console.log(oLi.previousElementSibling) // <li id="a">hello</li> </script> </body>
- 只获取一个节点,不在是伪数组
- 获取的是
id="b"
这个li
的上一个兄弟元素节点 - 因为
id="b"
的上一个兄弟元素节点就是id="a"
的li
,是一个元素节点
-
parentNode
:获取某一个节点的 父节点<body> <ul> <li id="a">hello</li> <li id="b">world</li> <li id="c">!!!</li> </ul> <script> // 这个 oLi 获取的是页面中的 li 元素,就是一个元素节点 var oLi = document.querySelector('#b') console.log(oLi.parentNode) // <ul>...</ul> </script> </body>
- 只获取一个节点,不在是伪数组
- 获取的是当前这个
li
的父元素节点 - 因为这个
li
的父亲就是ul
,所以获取到的就是ul
,是一个元素节点
-
attributes
:获取某一个 元素节点 的所有 属性节点<body> <ul> <li id="a" a="100" test="test">hello</li> </ul> <script> // 这个 oLi 获取的是页面中的 li 元素,就是一个元素节点 var oLi = document.querySelector('#a') console.log(oLi.attributes) /* NamedNodeMap {0: id, 1: a, 2: test, id: id, a: a, test: test, length: 3} 0: id 1: a 2: test length: 3 a: a id: id test: test __proto__: NamedNodeMap */ </script> </body>
- 获取的是一组数据,是该元素的所有属性,也是一个伪数组
- 这个
li
有三个属性,id
/a
/test
三个,所以就获取到了这三个
4. 节点属性
-
我们已经知道节点会分成很多种,而且我们也能获取到各种不同的节点
-
接下来我们就来聊一些各种节点之间属性的区别
-
我们先准备一段代码
<body> <ul test="我是 ul 的一个属性"> <li>hello</li> </ul> <script> // 先获取 ul var oUl = document.querySelector('ul') // 获取到 ul 下的第一个子元素节点,是一个元素节点 var eleNode = oUl.firstElementChild // 获取到 ul 的属性节点组合,因为是个组合,我们要拿到节点的话要用索引 var attrNode = oUl.attributes[0] // 获取到 ul 下的第一个子节点,是一个文本节点 var textNode = oUl.firstChild </script> </body>
nodeType
-
nodeType
:获取节点的节点类型,用数字表示console.log(eleNode.nodeType) // 1 console.log(attrNode.nodeType) // 2 console.log(textNode.nodeType) // 3
nodeType === 1
就表示该节点是一个 元素节点nodeType === 2
就表示该节点是一个 属性节点nodeType === 3
就表示该节点是一个 注释节点
nodeName
-
nodeName
:获取节点的节点名称console.log(eleNode.nodeName) // LI console.log(attrNode.nodeName) // test console.log(textNode.nodeName) // #text
- 元素节点的
nodeName
就是 大写标签名 - 属性节点的
nodeName
就是 属性名 - 文本节点的
nodeName
都是 #text
- 元素节点的
nodeValue
-
nodeValue
: 获取节点的值console.log(eleNode.nodeValue) // null console.log(attrNode.nodeValue) // 我是 ul 的一个属性 console.log(textNode.nodeValue) // 换行 + 空格
- 元素节点没有
nodeValue
- 属性节点的
nodeValue
就是 属性值 - 文本节点的
nodeValue
就是 文本内容
- 元素节点没有
汇总
- | nodeType | nodeName | nodeValue |
---|---|---|---|
元素节点 | 1 | 大写标签名 | null |
属性节点 | 2 | 属性名 | 属性值 |
文本节点 | 3 | #text | 文本内容 |
5. 操作 DOM 节点
- 我们所说的操作无非就是 增删改查(CRUD)
- 创建一个节点(因为向页面中增加之前,我们需要先创建一个节点出来)
- 向页面中增加一个节点
- 删除页面中的某一个节点
- 修改页面中的某一个节点
- 获取页面中的某一个节点
创建一个节点
-
createElement
:用于创建一个元素节点// 创建一个 div 元素节点 var oDiv = document.createElement('div') console.log(oDiv) // <div></div>
- 创建出来的就是一个可以使用的 div 元素
-
createTextNode
:用于创建一个文本节点// 创建一个文本节点 var oText = document.createTextNode('我是一个文本') console.log(oText) // "我是一个文本"
向页面中加入一个节点
-
appendChild
:是向一个元素节点的末尾追加一个节点 -
语法:
父节点.appendChild(要插入的子节点)
// 创建一个 div 元素节点 var oDiv = document.createElement('div') var oText = document.createTextNode('我是一个文本') // 向 div 中追加一个文本节点 oDiv.appendChild(oText) console.log(oDiv) // <div>我是一个文本</div>
-
insertBefore
:向某一个节点前插入一个节点 -
语法:
父节点.insertBefore(要插入的节点,插入在哪一个节点的前面)
<body> <div> <p>我是一个 p 标签</p> </div> <script> var oDiv = document.querySelector('div') var oP = oDiv.querySelector('p') // 创建一个元素节点 var oSpan = document.createElement('span') // 将这个元素节点添加到 div 下的 p 的前面 oDiv.insertBefore(oSpan, oP) console.log(oDiv) /* <div> <span></span> <p>我是一个 p 标签</p> </div> */ </script> </body>
删除页面中的某一个节点
-
removeChild
:移除某一节点下的某一个节点 -
语法:
父节点.removeChild(要移除的字节点)
<body> <div> <p>我是一个 p 标签</p> </div> <script> var oDiv = document.querySelector('div') var oP = oDiv.querySelector('p') // 移除 div 下面的 p 标签 oDiv.removeChild(oP) console.log(oDiv) // <div></div> </script> </body>
修改页面中的某一个节点
-
replaceChild
:将页面中的某一个节点替换掉 -
语法:
父节点.replaceChild(新节点,旧节点)
<body> <div> <p>我是一个 p 标签</p> </div> <script> var oDiv = document.querySelector('div') var oP = oDiv.querySelector('p') // 创建一个 span 节点 var oSpan = document.createElement('span') // 向 span 元素中加点文字 oSpan.innerHTML = '我是新创建的 span 标签' // 用创建的 span 标签替换原先 div 下的 p 标签 oDiv.replaceChild(oSpan, oP) console.log(oDiv) /* <div> <span>我是新创建的 span 标签</span> </div> */ </script> </body>
6. 获取元素的偏移量
- 就是元素在页面上相对于参考父级的左边和上边的距离
offsetParent
- 获取元素的偏移量参考父级
- 其实就是假设你要给一个元素 绝对定位 的时候
- 它是根据谁来进行定位的
- 那么这个元素的偏移量参考父级就是谁
offsetLeft 和 offsetTop
- 获取的是元左边的偏移量和上边的偏移量
offsetLeft
: 该元素相对于参考父级的左侧偏移量offsetTop
: 该元素相对于参考父级的上侧偏移量
7. 获取元素尺寸
- 就是获取元素的 “占地面积”
offsetWith 和 offsetHeight
offsetWidth
: 获取的是元素 内容 + padding + border 的宽度offsetHeight
: 获取的是元素 内容 + padding + border 的高度
clientWidth 和 clientHeight
-
clientWidth
: 获取的是元素 内容 + padding 的宽度 -
clientHeight
: 获取的是元素 内容 + padding 的高度
注意:
- 获取到的尺寸是没有单位的数字
- 当元素在页面中不占位置的时候, 获取到的是 0
display: none;
元素在页面不占位visibility: hidden;
元素在页面占位
8. 获取浏览器窗口尺寸
-
我们之前学过一个
innerWidth
和innerHeight
-
他们获取到的是窗口包含滚动条的尺寸
-
下面我们学习两个不包含滚动条的尺寸获取方式
-
document.documentElement.clientWidth
: 可视窗口的宽度 -
document.documentElement.clientHeight
: 可视窗口的高度
9. 事件
-
一个事件由什么东西组成
- 触发谁的事件:事件源
- 触发什么事件:事件类型
- 触发以后做什么:事件处理函数
var oDiv = document.querySelector('div') oDiv.onclick = function () {} // 谁来触发事件 => oDiv => 这个事件的事件源就是 oDiv // 触发什么事件 => onclick => 这个事件类型就是 click // 触发之后做什么 => function () {} => 这个事件的处理函数
- 我们想要在点击 div 以后做什么事情,就把我们要做的事情写在事件处理函数里面
var oDiv = document.querySelector('div') oDiv.onclick = function () { console.log('你点击了 div') }
- 当我们点击
div
的时候,就会执行事件处理函数内部的代码 - 每点击一次,就会执行一次事件处理函数
10 事件的绑定方式
-
我们现在给一个注册事件都是使用
onxxx
的方式 -
但是这个方式不是很好,只能给一个元素注册一个事件
-
一旦写了第二个事件,那么第一个就被覆盖了
oDiv.onclick = function () { console.log('我是第一个事件') } oDiv.onclick = function () { console.log('我是第二个事件') }
- 当你点击的时候,只会执行第二个,第一个就没有了
-
我们还有一种事件监听的方式去给元素绑定事件
-
使用
addEventListener
的方式添加- 这个方法不兼容,在 IE 里面要使用
attachEvent
- 这个方法不兼容,在 IE 里面要使用
-
addEventListener
: 非 IE 7 8 下使用 -
语法:
元素.addEventListener('事件类型', 事件处理函数, 冒泡还是捕获)
oDiv.addEventListener('click', function () { console.log('我是第一个事件') }, false) oDiv.addEventListener('click', function () { console.log('我是第二个事件') }, false)
- 当你点击 div 的时候,两个函数都会执行,并且会按照你注册的顺序执行
- 先打印
我是第一个事件
再打印我是第二个事件
- 注意: 事件类型的时候不要写 on,点击事件就是 click,不是 onclick
-
attachEvent
:IE 7 8 下使用 -
语法:
元素.attachEvent('事件类型', 事件处理函数)
oDiv.attachEvent('onclick', function () { console.log('我是第一个事件') }) oDiv.attachEvent('onclick', function () { console.log('我是第二个事件') })
- 当你点击 div 的时候,两个函数都会执行,并且会按照你注册的顺序倒叙执行
- 先打印
我是第二个事件
再打印我是第一个事件
- 注意: 事件类型的时候要写 on,点击事件就行 onclick
两个方式的区别
- 注册事件的时候事件类型参数的书写
addEventListener
: 不用写 onattachEvent
: 要写 on
- 参数个数
addEventListener
: 一般是三个常用参数attachEvent
: 两个参数
- 执行顺序
addEventListener
: 顺序注册,顺序执行attachEvent
: 顺序注册,倒叙执行
- 适用浏览器
addEventListener
: 非 IE 7 8 的浏览器attachEvent
: IE 7 8 浏览器
11. 常见的事件
- 我们在写页面的时候经常用到的一些事件
- 大致分为几类,浏览器事件 / 鼠标事件 / 键盘事件 / 表单事件 / 触摸事件
- 不需要都记住,但是大概要知道
浏览器事件
load
: 页面全部资源加载完毕scroll
: 浏览器滚动的时候触发- …
鼠标事件
click
:点击事件dblclick
:双击事件contextmenu
: 右键单击事件mousedown
:鼠标左键按下事件mouseup
:鼠标左键抬起事件mousemove
:鼠标移动mouseover
:鼠标移入事件mouseout
:鼠标移出事件mouseenter
:鼠标移入事件mouseleave
:鼠标移出事件- …
键盘事件
keyup
: 键盘抬起事件keydown
: 键盘按下事件keypress
: 键盘按下再抬起事件- …
表单事件
change
: 表单内容改变事件input
: 表单内容输入事件submit
: 表单提交事件- …
触摸事件
touchstart
: 触摸开始事件touchend
: 触摸结束事件touchmove
: 触摸移动事件- …
12. 事件对象
-
什么是事件对象?
-
就是当你触发了一个事件以后,对该事件的一些描述信息
-
例如:
- 你触发一个点击事件的时候,你点在哪个位置了,坐标是多少
- 你触发一个键盘事件的时候,你按的是哪个按钮
- …
-
每一个事件都会有一个对应的对象来描述这些信息,我们就把这个对象叫做 事件对象
-
浏览器给了我们一个 黑盒子,叫做
window.event
,就是对事件信息的所有描述- 比如点击事件
- 你点在了
0,0
位置,那么你得到的这个事件对象里面对应的就会有这个点位的属性 - 你点在了
10, 10
位置,那么你得到的这个事件对象里面对应的就会有这个点位的属性 - …
oDiv.onclick = function () { console.log(window.event.X轴坐标点信息) console.log(window.event.Y轴坐标点信息) }
-
这个玩意很好用,但是一般来说,好用的东西就会有 兼容性问题
-
在
IE低版本
里面这个东西好用,但是在高版本IE
和Chrome
里面不好使了 -
我们就得用另一种方式来获取 事件对象
-
在每一个事件处理函数的行参位置,默认第一个就是 事件对象
oDiv.onclick = function (e) { // e 就是和 IE 的 window.event 一样的东西 console.log(e.X轴坐标点信息) console.log(e.Y轴坐标点信息) }
-
综上所述,我们以后在每一个事件里面,想获取事件对象的时候,都用兼容写法
oDiv.onclick = function (e) { e = e || window.event console.log(e.X轴坐标点信息) console.log(e.Y轴坐标点信息) }
点击事件的光标坐标点获取
![image-20220530215226855](%E7%AC%94%E8%AE%B0.assets/image-20220530215226855.png)
![image-20220530220140448](%E7%AC%94%E8%AE%B0.assets/image-20220530220140448.png)
![image-20220530220229523](%E7%AC%94%E8%AE%B0.assets/image-20220530220229523.png)
13. 事件的传播
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3cNz0qWh-1673443550650)(%E7%AC%94%E8%AE%B0.assets/image-20220601095555972.png)]
- 当元素触发一个事件的时候,其父元素也会触发相同的事件,父元素的父元素也会触发相同的事件
- 就像上面的图片一样
- 点击在红色盒子上的时候,会触发红色盒子的点击事件
- 也是点击在了粉色的盒子上,也会触发粉色盒子的点击事件
- 也是点击在了 body 上,也会触发 body 的点击事件
- 也是点击在了 html 上,也会触发 html 的点击事件
- 也是点击在了 document 上,也会触发 document 的点击事件
- 也是点击在了 window 上,也会触发 window 的点击事件
- 也就是说,页面上任何一个元素触发事件,都会一层一层最终导致 window 的相同事件触发,前提是各层级元素得有注册相同的事件,不然不会触发
- 在事件传播的过程中,有一些注意的点:
- 只会传播同类事件
- 只会从点击元素开始按照 html 的结构逐层向上元素的事件会被触发
- 内部元素不管有没有该事件,只要上层元素有该事件,那么上层元素的事件就会被触发
- 到现在,我们已经了解了事件的传播,我们再来思考一个问题
- 事件确实会从自己开始,到 window 的所有相同事件都会触发
- 是因为我们点在自己身上,也确实逐层的点在了直至 window 的每一个元素身上
- 但是到底是先点在自己身上,还是先点在了 window 身上呢
- 先点在自己身上,就是先执行自己的事件处理函数,逐层向上最后执行 window 的事件处理函数
- 反之,则是先执行 window 的事件处理函数,逐层向下最后执行自己身上的事件处理函数
冒泡、捕获、目标
- 我们刚才聊过了,每一个事件,都是有可能从自己到 window ,有可能要执行多个同类型事件
- 那么这个执行的顺序就有一些说法了
目标
- 你是点击在哪个元素身上了,那么这个事件的 目标 就是什么
冒泡
- 就是从事件 目标 的事件处理函数开始,依次向外,直到 window 的事件处理函数触发
- 也就是从下向上的执行事件处理函数
捕获
- 就是从 window 的事件处理函数开始,依次向内,只要事件 目标 的事件处理函数执行
- 也就是从上向下的执行事件处理函数
冒泡和捕获的区别
- 就是在事件的传播中,多个同类型事件处理函数的执行顺序不同
14. 事件委托
- 就是把我要做的事情委托给别人来做
- 因为我们的冒泡机制,点击子元素的时候,也会同步触发父元素的相同事件
- 所以我们就可以把子元素的事件委托给父元素来做