JavaScript 学习笔记（第四天）
JavaScript 学习笔记（第四天）
- 一、DOM
-
- 1.1、什么是DOM
- 1.2、获取一个元素
-
- 1.2.1、getElementById
- 1.2.2、getElementsByClassName
- 1.2.3、getElementsByTagName
- 1.2.4、getElementByName
- 1.2.5、querySelector
- 1.2.6、querySelectorAll
- 1.3、操作元素属性
- 1.4、案例-密码可视
- 1.5、购物车全选
- 1.6、操作元素文本的内容
- 1.7、渲染页面
- 1.8、操作元素样式
- 1.9、操作元素类名
- 1.10、案例-简易选项卡
- 1.11、案例-选项卡
- 1.12、DOM节点
-
- 1.12.1、元素节点
- 1.12.2、属性节点
- 1.12.3、文本节点
- 1.13、获取节点的方式
- 1.14、节点操作
- 1.15、案例-动态删除
- 1.16、节点属性
- 1.17、获取元素尺寸
- 1.17、获取元素偏移量
- 1.18、获取可视窗口的尺寸
- 1.19、案例-懒加载
- 二、事件
-
- 2.1、初始事件
- 2.2、事件解绑
- 2.3、事件类型
-
- 2.3.1、浏览器事件
- 2.3.2、鼠标事件
- 2.3.3、键盘事件
- 2.3.4、表单事件
- 2.3.5、触摸事件（主要用于移动端）
- 2.4、事件对象
- 2.5、事件对象-鼠标事件
- 2.6、案例-鼠标跟随
- 2.6、案例-鼠标拖拽
- 2.7、DOM事件流
- 2.7、阻止事件传播
- 2.8、阻止默认行为
- 2.9、案例-自定义右键菜单
- 2.10、事件委托
一、DOM
1.1、什么是DOM
- DOM (Document object Mode1):文档对象模型
- 其实就是操作html中的标签的一些能力
- 我们可以操作哪些内容
- 获取一个元素
- 移除一个元素
- 创建一个元素
- 向页面里面添加一个元素
- 给元素绑定一些事件
- 获取元素的属性
- 给元素添加一些css样式
- …
- DOM的核心对象就是docuemnt对象
- document对象是浏览器内置的一个对象，里面存储着专门用来操作元素的各种方法
- DOM:页面中的标签，我们通过js 获取到以后，就把这个对象叫做DOM对象
1.2、获取一个元素
- 通过js代码来获取页面中的标签
- 获取到以后我们就可以操作这些标签了
- html,body,head是非常规标签，获取节点比较特殊直接用名字即可
- 常规标签需要加上id，class
例：
console.log(document.documentElement)
console.log(document.head)
console.log(document.body)
1.2.1、getElementById
- getElementById是通过标签的id名称来获取标签的
- 因为在一个页面中id是唯一的，所以获取到的就是一个元素
<body>
<div id="box"></div>
<script>
var box = document.getElementById('box')
console.log(box) //
</script>
</body>
- 获取到的就是页面中的那个id为box的div标签
1.2.2、getElementsByClassName
- getElementByClassName是通过标签的Class名称来获取标签的
- 因为在一个页面中Class不是唯一的，所以获取到的就是一个或者多个元素
<body>
<div class="box"></div>
<script>
var box = document.getElementByClassName('box')
console.log(box) //
</script>
</body>
- 获取到的就是页面中的那个ClassName为box的div标签
- 用一个变量获取多个class通过document.getElementByClassName组成的集合叫做伪数组（不具备数组的一些性质，但是存在下标）
// item [0].innerHTML = "news-1"
for (var i=0;i<items.length;i++)
item[i].innerHTML = "news-"+i
}
//Set →Array.from将伪数组转化为真数组
var newitems = Array.from(items)
console,log(newitems.filter)
1.2.3、getElementsByTagName
- getElementsByTagName是通过标签名称来获取标签的
<body>
<div></div>
<script>
var box = document.getElementByTagName("div")
console.log(box) //
//得到的也是一个伪数组
</script>
</body>
1.2.4、getElementByName
- 通过name来找到标签
- 一般用于input标签
<body>
<input name="username" type="test"/>
<script>
var box = document.getElementByName("username")
console.log(box[0]) //
</script>
</body>
1.2.5、querySelector
- 有一些兼容性问题
- 与css找对象的方法相似：
- id选择器通过在前面加
#查找 - class选择器通过在前面加
.查找 - 标签可以直接写名字
- id选择器通过在前面加
- 不过这个方法只能查找一个对象
var item = document.querySelector("ul li")
- 上例相当于查找ul标签下的第一个li标签
1.2.6、querySelectorAll
- 有一些兼容性问题
- 与css找对象的方法相似：
- id选择器通过在前面加
#查找 - class选择器通过在前面加
.查找 - 标签可以直接写名字
- id选择器通过在前面加
- 这个方法能查到多个对象
var item = document.querySelectorAll("ul li")
1.3、操作元素属性
- 元素自带（原生）属性
- 这些属性可以通过id加属性的方式改变
例：
- 这些属性可以通过id加属性的方式改变
<input type="text" id = "username">
<input type ="checkbox" checked id = "rember">
username.type = "password"//可以使输入框变成密码框
rember.checked= false//可以使复选框不被选择
- 自定义属性
- 自定义属性值的操作方法有三个：
- setAttribute (增加)
- getAttribute （获取）
- removeAttribute （删除）
- 自定义属性值的操作方法有三个：
<div id ="asd" shuxin="" ></div>
asd.setAttribute("shuxin","123456")
console.log(asd.getAttribute("shuxin"))
asd.removeAttribute("shuxin")
- 在写自定义属性之前，在其前面加上
data- - 新加进去自定义属性值也会自动添加一个
data-
1.4、案例-密码可视
<input type ="password" id ="password">
<button id ="eyebtn">eye</button>
<script>
var passInput = document.getElementById("password")
var eyebtn = document.querySelector("#eyebtn")
eyebtn.onclick=function(){
console.log(passInput.type)
if(passInput==="password")
passInput.type="text"
}else{
passInput.type="password"
}
}
</script>
1.5、购物车全选
<input type="checkbox" id ="all">全选/全不选
<hr>
<ul>
<li>
<input type="checkbox">1
<li>
<li>
<input type="checkbox">2
<li>
<li>
<input type="checkbox">3
<li>
<li>
<input type="checkbox">4
<li>
</ul>
<script>
var oAll = document.querySelector("#all")
var oitems=documnet.querySelectorAll(".shop input")
//全选按钮的设置
oAll.onclick=function(){
for(var i=0;i<oitems.length;i++){
oitem[i].checked=oAll.checked
}
}
//单选按钮的设置
for(var i=0;i<oitems.length;i++){
oitems[i].onclick=handler
}
function handler(){
var count =0
//for判断每一项如果是checked acount++
for(var i=0;i<oitems.length;i++){
if(oitems[i].check) conut++
}
if(count==oitem.length){
oAll.checked=true
}else{
oAll.check=false
}
}
</script>
1.6、操作元素文本的内容
- innerHTML
- 提取出对象文本内部全部的内容
- 可以赋值文本内容，会对标签进行解析
<div id="box">
111
</div>
box.innerHTML="222
"//会发生解析
- innerText
- 也可以提取对象文本的内容
- 可以赋值文本内容，但不会对标签进行解析
<div id="box">
111
</div>
box.innerText="222
"//不会发生解析
- value
- 既可以赋值，也可以读取
- 只对表单，下拉列表有作用
<select name ="" id="select">
<option value="1">111</option>
<option value="2">222</option>
<option value="3">333</option>
<select>
select.vable="3"//将下拉框里的项目默认选为第三个
1.7、渲染页面
- 前端提供模板
- 后端将数据提供过来的时候，可以直接转进去
<ul>
<ul>
var filmlist = {
{
url:,
title:,
grade:
}
{
url:,
title:,
grade:
}
{
url:,
title:,
grade:
}
}
var filmItems=filmList.map(function(item){
return `<li>
<img src="${item.url}" alt="">
<h3>${item.title}</h3>
<p>观众评分${item.grade}</p>
</li>
})
console.log(filmItems.join(""))
var oul=document.querySelector("ul")
oul.innerHTML=filmItems.join("")
1.8、操作元素样式
- 行内样式方法
style- 标签编辑的样式可以通过id加style加样式的操作进行选择
- 复合样式（就像background-color）需要通过加
[ ]的方法来表示 - 复合样式也可以采用驼峰写法
<div id = "box" style="width:100px ;color:black;">111</div>
console.log(box.style.width)
console.log(box.style.["background-color"])
//也可以设置
box.style.width="200px"
- 内部样式和外部样式和行内样式可以通过
getComputedStyle获取- 复合样式（就像background-color）需要通过加
[ ]的方法来表示 - 复合样式也可以采用驼峰写法
- 有些兼容性问题
- 复合样式（就像background-color）需要通过加
<div id = "box" style="width:100px ;color:black;">111</div>
var obox = document.getElementById("box")
var res = getComputedStyle(obox)//获取box的全部样式
1.9、操作元素类名
.className- 能读取标签上class的值，也能改变class
- 改变class只需要重新赋值，把不需要的class给去掉即可
- 遇到重复的class也会直接加进去（弊端）
<div id="box" class="item item1 item2"></div>
box.className="item"//此时item1,item2就被去除了
box.className +=" item3"//此时加进去了一个item3
classList- 得到的结果是一个数组
- 遇到重复的class会覆盖掉原先的class
- 删除一次只能删一个class
box.classList.add("item2")//覆盖掉原先的
box.classList.remove("item2")//删除
- 切换
toggle - 如果标签里有相同class就会删除，没有则会添加
1.10、案例-简易选项卡
*{
padding=0;
margin=0
}
ul{
display:flex;
list-style:none;
}
li{
height:50px;
line-height:50px;
text-align:center;
flex:1;
}
.active{
color:red;
border-bottom;1px solid red;
}
<body>
<ul>
<li class="active" id="item1">
正在热映
</li>
<li id="item2">
即将播放
</li>
</ul>
<sricpt>
item1.onlick = function(){
item1.classList.add("active")
item2.classList.remove("active")
}
item2.onlick = function(){
item1.classList.remove("active")
item2.classList.add("active")
}
</script>
</body>
1.11、案例-选项卡
<head>
<style>
*{
margin:0;
padding:0;
}
ul{
list-style: none;
}
.header{
dispLay: flex;
width:500px;
}
.header li {
flex:1;
height: 50px;
line-height: 50px;
text-align: center;
border:1px solid black;
}
.box {
position: relative;
}
.box li {
position: absolute;
left:0;
top:0;
width: 500px;
height: 200px;
background-color:yellow;
display:none;
}
.header .active{
background-color: red;
}
.box .active{
dispLay: block;
}
</style>
</head>
<body>
<ul class=" header">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul class="box">
<li class="active">111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<script>
var oHeaderItems = document.querySelectorAll(".header li")
var oBoxItems = document.querySelectorAl1( ".box li")
for(var i=0; i<oHeaderItems.length; i++){
oHeaderItems[i].dataset.index = i
oHeaderItems[i].onclick = handler
}
function handler(){
// console.log(this.dataset.index)
var index = this.dataset.index
for(var m=0;m<oHeaderitems.length; m++){
oHeaderItems[m].classList.remove("active")
oBoxItems[m].classList.remove( "active")
}
oHeaderItems[index].classList.add( "active")
oBoxItems [index].classList.add ( "active")
}
</script>
</body>
1.12、DOM节点
- DOM的节点我们一般分为常用的三大类元素节点/文本节点/属性节点
- 什么是分类，比如我们在获取元素的时候，通过各种方法获取到的我们叫做元素节点（标签节点)
- 比如我们标签里面写的文字，那么就是文本节点
- 写在每一个标签上的属性，就是属性节点
1.12.1、元素节点
- 我们通过
getElementBy...获得到的节点
1.12.2、属性节点
- 我们通过
getAttibute - id ， class都是属性节点
1.12.3、文本节点
- 我们通过
innerText获取到的就是元素的文本节点
1.13、获取节点的方式
| 属性 | 作用 |
|---|---|
| childNodes | 获取全部节点 |
| children | 获取全部元素节点 |
| firstChild | 获取第一个节点 |
| firstElementChild | 获取第一个元素节点 |
| lastChild | 获取最后一个节点 |
| lastElementChild | 获取最后一个元素节点 |
| previousSibing | 找上一哥哥节点 |
| previousElementSibing | 找上一个哥哥元素节点 |
| nextSibing | 找上一弟弟节点 |
| nextElementSibing | 找上一个弟弟元素节点 |
| parentNode | 找上父节点 |
| parentElement | 找上父元素节点 |
- attributes:可以将元素的属性一次性拿出来
- attributes [ ] 括号内添加数值可以使其返回单独的那个属性
1.14、节点操作
- 我们所说的操作无非就是增删改查(CRUD)
- 创建一个节点(因为向页面中增加之前，我们需要先创建一个节点出来)
- 向页面中增加一个节点
- 删除页面中的某一个节点
- 修改页面中的某一个节点
- 获取页面中的某一个节点
- 创建一个节点
- createElement:用于创建一个元素节点
//创建一个div元素节点
var oDiv = document.createElement(' div ')
console.log(oDiv) //
- 插入一个节点
- 用
父元素ID.appendChild插入一个节点
box.appendChild(odiv)
//将创建的节点加入到ID叫做box的盒子里面
- 在某个标签之前进行加入
父元素ID.insertBefore(要插入的节点，谁的前面)
box.insertBefore(odiv,child)
- 删除节点
父元素ID.removeChild(要删除的对象)- box.remove()会将整个父元素都删除
- 替换元素
父元素ID.replaceChild(新的节点，老的节点)
- 克隆节点
父元素ID.cloneNode()- 无参数时就是不克隆后代
- 括号里是true时全部克隆
1.15、案例-动态删除
<body id="list">
<ul>
</ul>
<script>
var arr =["111","222","333"]
for(var i=0;i<arr.length;i++){
var oli = document.createElement("li")
oli.innerHTML = arr[i]
var obutton = document.createElement( "button")
obutton.innerHTML = "delete"
obutton.onclick = handler
oli.appendchild(obutton)
list.appendChild(oli)
}
function handler(){
console.log(this.parentNode)
this.parentNode.remove()
}
</script>
</body>
1.16、节点属性
- 我们已经知道节点会分成很多种，而且我们也能获取到各种不同的节点
- 接下来我们就来聊一些各种节点之间属性的区别
- 我们先准备一段代码
<body>
<ul test="我是u1 的一个属性"">
<1i>he1lo</1i>
</u1>
<script>
//先获取u1
var oul = document. queryselector('u1 ')
//获取到ul下的第一个子元素节点，是一个元素节点
var eleNode = oul.firstElementchi1d
//获取到ul 的属性节点组合，因为是个组合，我们要拿到节点的话要用索引
var attrNode = oul.attributes[0]
//获取到u1下的第一个子节点，是一个文本节点
var textNode = oul.firstchi1d
</script>
</body>
1.17、获取元素尺寸
- 就是获取元素的"占地面积"
- offsetWidth和offsetHeight
- offsetWidth:获取的是元素内容+ padding + border的宽度
- offsetHeight:获取的是元素内容+ padding + border的高度
- clientWidth和clientHeight
- .clientWidth :获取的是元素内容+ padding 的宽度
- clientHeight:获取的是元素内容+ padding 的高度
注：
- 单位是数字 没有单位
- box-sizing(不影响计算)
- display:none–拿不到值
1.17、获取元素偏移量
- offsetLeft元素的左边偏移量
- offsetTop元素的上边偏移量
注：
- 参考点：距离的值是定位父级，如果父级元素有定位会影响测量值(如果父级都没有定位，则相对于body测量)
- clientLeft距离元素左角的距离
- clientTop距离元素上角的距离
1.18、获取可视窗口的尺寸
- document.documentElement.clientWidth(不计算滚动条的宽度)
- document.documentElement.clientHeight(不计算滚动条的长度)
1.19、案例-懒加载
var arr1 =[{
name:"哆啦A梦"
url:""
},
{
name:"哆啦A梦"
url:""
},
{
name:"哆啦A梦"
url:""
},
{
name:"哆啦A梦"
url:""
},
]
var arr2=[{
name:"哆啦A梦"
url:""
},
{
name:"哆啦A梦"
url:""
},
{
name:"哆啦A梦"
url:""
},
{
name:"哆啦A梦"
url:""
},
]
renderHTML(arr1)
function renderHTML(arr) {
for(var i=0;i<arr.length;i++){
var oli = document.createElement("li")
oli.innerHTML = `
${arr[i].url}" alt="">
${arr[i].name}`
list.appendchild(oli)
}
}
isLoading = false
window.onscroll = function(){
// console.log( "1111")
var listHeight = list.offsetHeight
var listTop = list.offsetTop
// console.log( listHeight+listTop)
var scrollTop = document.documentElement.scrollTop ||document.body.scrollTop
var windowHeight = document.documentElement.clientHeight
if(isLoading) return
if((listHeight+listTop)-Math.round(windowHeight+scrollTop)<50){
console. log("到底了")
isLoading = true
//渲染下一页数据
setTimeout(function(){
renderHTML(arr2)
isLoading = false //下一次到底事件继续触发
},1000)
}
}
二、事件
2.1、初始事件
- 事件的组成
- 一个事件由什么东西组成
- 触发谁的事件:事件源
- 触发什么事件:事件类型
- 触发以后做什么:事件处理函数
var oDiv = document.queryselector('div ')
oDiv.onc1ick = function(){}
//谁来触发事件=>oDiv =>这个事件的事件源就是oDiv
//触发什么事件=> onc1ick =>这个事件类型就是click
//触发之后做什么=> function (){} =>这个事件的处理函数
- 我们想要在点击div以后做什么事情，就把我们要做的事情写在事件处理函数里面
var oDiv = document. queryselector( ' div ')
oDiv.onclick = function () {
console.log('你点击了div')}
- 当我们点击div的时候，就会执行事件处理函数内部的代码
- 每点击一次，就会执行一次事件处理函数
- dom1 一次只能绑定一个函数，后面的函数会覆盖前面的函数
- dom2可以绑定多个函数，可以多次表达
- dom2→addEventListener()第一个参数写事件的形式
2.2、事件解绑
- 事件解绑-dom0
- dom0=>节点.οnclick=null(可以解绑事件)
-事件解绑-dom2
function handler(){
console.log("谢谢惠顾")
this.removeEventListener("click",handler)
}
btn.addEventListener("click",handler)
//此时可以解绑
//有一定兼容性问题
- 另一种写法
function handler(){
console.log("谢谢惠顾")
节点.detachEvent("onclick",handler)
}
btn.addEventListener("onclick",handler)
2.3、事件类型
常见的事件
- 我们在写页面的时候经常用到的一些事件
- 大致分为几类，浏览器事件/鼠标事件/键盘事件/表单事件/触摸事件
- 不需要都记住，但是大概要知道
2.3.1、浏览器事件
- load :页面全部资源加载完毕
- scroll:浏览器滚动的时候触发
- …
2.3.2、鼠标事件
- click :点击事件
- dblclick:双击事件
- contextmenu:右键单击事件
- mousedown:鼠标左键按下事件
- mouseup:鼠标左键抬起事件
- mousemove:鼠标移动
- mouseover:鼠标移入事件(对父元素使用会使子元素有相同效果)
- mouseout:鼠标移出事件(对父元素使用会使子元素有相同效果)
- mouseenter:鼠标移入事件
- mouseleave:鼠标移出事件
- …
2.3.3、键盘事件
- keyup :键盘抬起事件
- keydown :键盘按下事件
- keypress :键盘按下再抬起事件
- …
2.3.4、表单事件
- change : 表单内容改变事件（获取焦点与失去焦点不一样才会触发）
- input :表单内容输入事件（会出现与输入相似的东西）
- submit : 表单提交事件（主要是检验输入内容）
- reset:表单重置事件
- focus:表单获取焦点（相当于点击表单）
- blur:表单失去焦点
- …
2.3.5、触摸事件（主要用于移动端）
- touchstart :触摸开始事件
- touchend : 触摸结束事件
- touchmove :触摸移动事件
- …
2.4、事件对象
- 什么是事件对象?
- 就是当你触发了一个事件以后，对该事件的一些描述信息
- 例如:
- 你触发一个点击事件的时候，你点在哪个位置了，坐标是多少
- 你触发一个键盘事件的时候，你按的是哪个按钮
- …
- 每一个事件都会有一个对应的对象来描述这些信息，我们就把这个对象叫做事件对象
- 浏览器给了我们一个黑盒子，叫做
window.event，就是对事件信息的所有描述- 比如点击事件
- 你点在了0，0位置，那么你得到的这个事件对象里面对应的就会有这个点位的属性
- 你点在了(10，10 位置，那么你得到的这个事件对象里面对应的就会有这个点位的属性
- …
oDiv.onclick = function(){
console.1og(window.event.X轴坐标点信息)
console.1og(window.event.Y轴坐标点信息)
}
- 这个玩意很好用，但是一般来说，好用的东西就会有兼容性问题
- 在IE低版本里面这个东西好用，但是在高版本IE和chrome里面不好使了
- 我们就得用另一种方式来获取事件对象
2.5、事件对象-鼠标事件
2.6、案例-鼠标跟随
<style>
*{
margin:0;
padding:0;
}
box{
width: 200px;
height: 50px;
background:yellow;
position: relative;
margin : 100px;
}
#box p{
width: 300px;
height: 200px;
background-color: red;
position: absolute;Left: 100px;
top:100px;
dispLay: none;
pointer-events: none;
/*穿透*/
z-index: 100;
}
</style>
<body>
<div id="box">
kerwin的头像
<p>
kerwin的介绍
</p>
</div>
<script>
box.onmouseover = function(){
this.firstElementChild.style.display="block"
}
box.onmouseout = function(){
this.firstElementChild.style.display="none"
}
box.onmousemove = function(evt){
// console.log(evt.offset×,evt.offsetY)
this.firstElementchild.style.left = evt.offsetX + "px"
this.firstElementChild.style.top = evt.offsetY + "px"
}
</script>
</body>
2.6、案例-鼠标拖拽
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background-color: aqua;
position: absolute;
}
</style>
</head>
<body>
<div id="box">
</div>
<script>
box.onmousedown = function(){
console.log("down")
document.onmousemove = function(evt){
var x =evt.clientX - box.offsetWidth/2
var y = evt.clientY- box.offsetHeight/2
if(y<=0) y=0
if(x<=0) x=0
if(x>= document.documentElement.clientWidth-box.offsetWidth)
x = document.documentElement.clientWidth-box.offsetWidth
if(y>= document.documentElement.clientWidth-box.offsetHeight)
y = document.documentElement.clientWidth-box.offsetHeight
box.style.left = x + "px"
box.style.top = y + "px"
}
}
box.onmouseup = function(){
console.log("up")
document.onmousemove = null
}
</script>
</body>
2.7、DOM事件流
- 当元素触发一个事件的时候，其父元素也会触发相同的事件，父元素的父元素也会触发相同的事件
- 就像上面的图片一样
- 点击在红色盒子上的时候，会触发红色盒子的点击事件
- 也是点击在了粉色的盒子上，也会触发粉色盒子的点击事件
- 也是点击在了body 上，也会触发body的点击事件
- 也是点击在了html上，也会触发html的点击事件
2.7、阻止事件传播
- 事件流的冒泡机制会导致代码的执行出现问题
节点.stopPropagation()- 改方法可以阻止事件传播
- 有兼容性问题，在IE的老版本中需要使用
节点.cancelBubble=true 来阻止
2.8、阻止默认行为
dom0
return false- 可以通过此代码是系统默认行为被阻止从而添加自己想要添加的格式
dom2
节点.preventDefault()- ie低版本不兼容可以使用
节点.returnValue=false
2.9、案例-自定义右键菜单
<style>
*{
margin:o;
padding:0;
}
ul{
list-styLe: none;
width: 200px;
padding: 10px;
border:1px solid black;
display: none;
position:absolute;
}
ul li:hover{
background:skyblue;
}
</style>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<script>
document.addEventListener( "contextmenu",function(evt){
evt.preventDefault()
list.style.display = "block"
var x = evt.clientx
var y = evt.clientY
if(x >= document.documentElement.clientwidth-list.offsetwidth)
x = document.documentElement.clientwidth-list.offsetwidth
if(y>=document.documentElement.clientHeight-list.offsetHeight)
y = document.documentElement.clientHeight-list.offsetHeight
list.style.left = x +“px"
list.style.top = y + “px"})
document.addEventListener( "click",()=>{
list.style.display="none"
})
</script>
</body>
2.10、事件委托
- 就是把我要做的事情委托给别人来做
- 因为我们的冒泡机制，点击子元素的时候，也会同步触发父元素的相同事件
- 所改我们就可以把子元素的事件委托给父元素来做
事件触发
- 点击子元素的时候，不管子元素有没有点击事件，只要父元素有点击事件，那么就可以触发父元素的点击事件
<body>
<u1>
<li>1</1i>
<1i>2</1i>
<1i>3</1i>
</u1>
<script>
var oul = docuemnt. queryselector( ' u1 ')
ou1 .addEventListener('click', function (e) {console.log('我是u1 的点击事件，我被触发了')})
</script>
</body>