DOM事件
事件是DOM对象里面的一个特殊属性,它需要经过一定的条件触发,普通的属性后面接的是属性值,而事件后面接的是一个特殊的属性值(它接收的是一个function)
<input type="button" onclick="console.log('hello world')" />
<!--
type是一个属性,onclick也是一个属性
-->
<input type="button" onclick="sayHello()" value="按钮" />
用户触发事件,事件调用方法
按照目前W3C的标准,DOM事件可以划分成两个级别
0级DOM事件
0级DOM事件是DOM对象里面最基本的事件,提供了事件的最基本用法
在0级DOM事件里面,所有的DOM事件都有一个特点,它通过"on"开头
常用的鼠标事件
-
onclick代表鼠标单击事件
-
ondblclick代表鼠标双击事件
-
onmousemove代表鼠标移动事件
-
onmousedown代表鼠标按下去
-
onmouseup代表鼠标松开
当鼠标按下去再松开,这个时候,就会形成一个点击事件click,它们的触发顺序是
onmousedown
-------onmouseup
---------onclick
-
onmouseenter代表鼠标进入的事件
-
onmouseleave代表鼠标离开的事件
👿 上面的两个事件都不支持事件冒泡,是很早以前的事件
-
onmouseover代表鼠标进入的事件
-
onmouseout代表鼠标离开的事件
这两个事件是新的事件,用于替换上面的旧的鼠标进入与离开事件
-
onmousewheel代表鼠标中间的滚轮事件
键盘事件
- onkeydown代表键盘按下去事件
- onkeyup代表键盘松开事件
- onkeypress代表键盘敲击事件
注意 :onkeypress事件不能够被键盘上面的的功能键触发,而onkeydown可以被键盘上面所有的键触发
onkeydown
------onkeypress
------onkeyup
键盘按下去肯定会触发一个
onkeydown
,触发这个事件以后系统判断是不是功能键,如果不是功能键,那么就触发onkeypress
,最后再触发onkeyup
其它事件
- onfocus聚焦事件
- onblur失焦事件
- onload加载事件
- onerror加载出错以后
- oninput事件,输入框的输入事件
- onchange事件,输入框的内容改变以后的事件
- onsubmit当form表单提交以后所触发的事件
- oncontextmenu鼠标右键菜单事件
JS事件对方法的调用
第一种方式
这一种方式最简单,直接把JS代码写在事件的后面
<button type="button" onclick="console.log('你好啊')">按钮</button>
<button type="button" onclick="console.log(this)">按钮</button>
这种方式有一个很大的弊端,代码如果写多了,就不好用了(它的缺点和CSS差不多)
**注意事项:**直接写在事件后面的JS代码,它的this指向当前元素(指向当前DOM对象)
第二种方式
这一种方式把JS代码封装成一个方法,然后再事件后面调用这个方法
<button type="button" onclick="sayHello()">按钮</button>
<script>
function sayHello(){
console.log("sayHello");
console.log(this); //全局window
}
</script>
上面这各方式是不能够直接通过this获取当前元素(DOM对象的),因为这个方法是做为普通方法调用的
如果我们希望在下面的方法里面获取到上面的DOM对象,可以通过以下方法
<button type="button" onclick="sayHello(this)">按钮</button>
<script>
function sayHello(obj){
console.log("sayHello");
console.log(obj);
}
</script>
这个obj就是传递过来的this(当前对象)
还有一种方式也可以拿到这个this(当前对象)
<button type="button" onclick="sayHello.call(this)">按钮</button>
<script>
function sayHello(){
console.log("sayHello");
console.log(this); //因为在调用方法的时候,使用的是call改变了this的指向,所以,这里的this还是指当前的DOM对象
}
</script>
第三种方式DOM对象的动态赋值方式
首先要弄清楚,DOM里在的事件本身也是一个属性,它只是一个特殊的属性而已,普通的属性接收的是一个属性值,而它接收的是一个方法
<button id="btn1" type="button">
按钮
</button>
<script>
function sayHello(){
console.log("sayHello");
}
var btn1=document.querySelector("#btn1"); //拿到btn1
btn1.type="reset";
btn1.onclick = sayHello; //这里就不要加括号了,它只接一个方法
</script>
这一种方式有几个优点
- 适合于批量绑定多个元素
- this在方法里面可以指向当前对象
具体可以看下面代码
<body>
<button type="button">按钮1</button>
<button type="button">按钮2</button>
<button type="button">按钮3</button>
<button type="button">按钮4</button>
<button type="button">按钮5</button>
<button type="button">按钮6</button>
<button type="button">按钮7</button>
</body>
<script>
function sayHello(){
console.log("sayHello");
console.log(this); //按照正常情况下,这个this应该是指向全局window,
//但是如果通过下面的动态赋值,这个时候,this指向当前DOM对象
}
// 我要把所有的按钮都绑定上面的方法
var btns = document.querySelectorAll("button");
for(var i=0;i<btns.length;i++){
btns[i].onclick=sayHello; //动态赋值的方式赋值进去的
//btns[0].onclick(); onclick()方法里面this指向了btns[0] onclick就是sayHello
}
</script>
0级DOM事件不能多次赋值
请看下面代码
<body> <!-- 这是第一次赋值-->
<button type="button" id="btn1" onclick="console.log('你好')">按钮1</button>
</body>
<script>
function sayHello(){
console.log("sayHello");
}
var btn1=document.querySelector("#btn1");
btn1.onclick=sayHello; //这是第二次赋值
</script>
上面的代码我们可以看出,我们在同一个事情上面进行了2次赋值,这个时候,会出现什么情况呢
后面出现的赋值会把前面出现的赋值给覆盖掉,所以上面以sayHello
这个方法为主,触发以后调用的是 sayHello
的方法,打印的是 sayHello
基础事件对象
用于描述这个所触发的事件的相关信息的对象,我们叫事件对象,它的类型是Event
怎么样获取当前的事件对象呢?
获取事件对象
第一种方式:可以直接在方法里面获取
<body>
<button type="button" id="btn1" onclick="a()">按钮</button>
</body>
<script>
/*
*这个a的方法是被事件onclick在进行调用,所以在这个方法的内部 JS会自动的注入一对象event
*/
function a(){
//怎么样拿事件对象呢
console.log("hello");
console.log(event); //这个地方表面上看起来是注入的一个变量,其实不是
}
</script>
上面的代码,我们可以看到在方法a里面,我们调用了一个属性event
,它是通过JS注入到方法里面去的???
上面的a的方法其实本质上面是下面的代码
function a(){
//怎么样拿事件对象呢
console.log("hello");
console.log(window.event); //这是从window对象上面获取了event属性
}
所以上面的一句话应该改为事件对象event并没有注入到方法里面去,而是在调用方法的时候,直接赋值给了window.event
所以我们在内部才可以使用到event
第二种方式: 通过参数传递进去
<body>
<button type="button" id="btn1" onclick="a(event)">按钮</button>
</body>
<script>
/*
*这一种情况,是通过参数传递进来的
*/
function a(event){
//怎么样拿事件对象呢
console.log("hello");
console.log(event);
}
</script>
现在我们就可以看到,获取事件对象,我们有两个方法,但是这两个方式有什么区别吗?
这两种方式本质上面没有任何区别,只是对不同的浏览器,有不同的兼容性,所以我们一般在获取事件对象的时候都是这么获取
<body>
<button type="button" id="btn1" onclick="a(event)">按钮</button>
</body>
<script>
/*
*这一种情况,是通过参数传递进来的
*/
function a(event){
//怎么样拿事件对象呢
console.log("hello");
var e = event||window.event;
}
</script>
通过上面的方式var e = event||window.event;
我们可以把兼容性解决掉
事件对象分类
每个事件对象都有不同的事件属性
- 鼠标事件
MouseEvent
- 键盘事件
KeyboardEvent
无论是什么事件,最终都会继承到事件对象Event
<body>
<div class="div1" style="left: 0px;top: 0px"></div>
</body>
<script>
var div1=document.querySelector(".div1");
document.onkeydown=function(event){
var e=event||window.event;
// a65 d68 w87 s83
switch(event.keyCode){
case 65:
div1.style.left=parseInt(div1.style.left)-10+"px"
break;
case 68:
div1.style.left=parseInt(div1.style.left)+10+"px"
break;
case 87:
div1.style.top=parseInt(div1.style.top)-10+"px"
break;
case 83:
div1.style.top=parseInt(div1.style.top)+10+"px"
break;
}
}
</script>
在上面的代码里在,事件对象可以用于获取当前事件的描述信息
在整个事件里面,我们有两个特殊对象,一个是this,一个是event
2级DOM事件
所谓的2级DOM事件是在原来的0级DOM事件上面添加了一些新的特性与新的事件,它新增了事件的绑定方式与事件流(因为2级比0级出来的晚,所以功能要更全一点,同时兼容性有待考虑)
只要在非IE8的浏览器下面,我们都可以使用正常的二级DOM事件,如果是IE8以下的,我们要使用兼容性处理
在0级DOM事件里面,我们可以把事件看成是一个特殊的属性,这个属性接收一个方法做为属性值,所以它不能够多次赋值,后面的赋值会把前面的覆盖掉
在2级DOM事件里面,它的事件绑定也叫事件监听,语法格式如下
DOM对象.addEventListener("事件名",function(){
},false/true); //第三个参数false/true可以不写,默认是false
第三个参数代表的是当前事情是事件冒泡还是事件捕获
2级DOM事件的前面是没有
on
的
0级DOM事件与2级DOM事件的区别
- 0级DOM事件使用
onclick
等这样的属性进行赋值,而2级DOM事件使用事件监听 - 0级DOM事件只能进行一次 赋值,而2级DOM事件可以进行多次监听绑定(方法的执行顺序就是它事件的绑定顺序)
- 0级事件以on开头,如
onclick
,onkeydown
,而2级DOM事件去掉了前面的on
- 0级事件可以通过
return false
来阻止事件的默认行为,面2级DOM事件不能通过这个方式,它要通过preventDefault()
这个方法来阻止事件的默认行为
相同点
- 都可以使用匿名函数
- 0级事件与2级事件方法内部的this都指向了当前的DOM对象
- 它们的事件对象是一样的,都是通过之前讲的方式来获取evnet,如
var e=event||window.event
;
最大的注意事项:0级事件与2级事件互不干
<body>
<button type="button" id="btn1">按钮</button>
</body>
<script>
var btn1=document.querySelector("#btn1");
//0级事件绑定
btn1.onclick=function(){
console.log("我是0级事件");
}
//2级事件监听
btn1.addEventListener("click",function(){
console.log("我是二级事件1");
});
//二级事件监听
btn1.addEventListener("click",function(){
console.log("我是二级事件2");
});
</script>
这一个时候控制台的输出结果是什么?
- 0级与2级可以同时存在
- 事件调用方法的顺序是根据代码绑定的顺序来进行的
2级DOM事件的应用点
- 它可以形成
事件链
,可以在一个事件上面绑定多个方法,防止后期开发过来当中事件方法被覆盖 - 它会形成
事件流
,后期会有一个事件冒泡与事件捕获
移除2级DOM事件
2级DOM事件可以通过addEventListener()
添加一个事件监听 ,同时,还可以使用removeEventListener()
去删除一个事件监听
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>移除事件监听</title>
</head>
<body>
<button type="button" id="btn1">抽奖</button>
</body>
<script>
function choujiang(){
console.log("恭喜你中奖了");
btn1.removeEventListener("click",choujiang);
}
var btn1=document.querySelector("#btn1");
btn1.addEventListener("click",choujiang);
</script>
</html>
removeEventListener
是移除某一个事件监听 ,那么上面的代码可不可以换成匿名函数完成
var btn1 = document.querySelector("#btn1");
btn1.addEventListener("click",function(){
console.log("恭喜你中奖了");
//移除这个事件
this.removeEventListener("click",arguments.callee);
})
arguments.callee
指向当前的方法,所以可以直接写成上面的情况
高级事件对象Event
事件冒泡与捕获
事件冒泡与事件捕获指的就是事件的传递行为
事件冒泡:事件由内向外进行传播的情况,我们叫事件冒泡,0级事件与2级事件都有事件冒泡
事后捕获:事件由外向内进行传播情况,我们叫事件捕获
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件冒泡</title>
<style>
.div1{
width: 200px;
height: 200px;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
}
.div2{
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
<script>
var div1=document.querySelector(".div1");
var div2=document.querySelector(".div2");
/*
div1.addEventListener("click",function(event){
var e=event||window.event;
console.log("我是外边的盒子div1");
});
div2.addEventListener("click",function(event){
var e=event||window.event;
console.log("我是里边的盒子div2");
});
*/
div1.onclick=function(){
console.log("我是外边的盒子div1");
}
div2.onclick=function(){
console.log("我是里边的盒子div2");
}
//当我们在div2上面点击以后会触发div2的事件,同时也会触 发div1的事件,这是因为事件有一个传递(传播)行为
</script>
</html>
上面的代码就是一个事件冒泡的代码,它有事件传播行为,这个事件到底是怎么传播的,取决于addEventListener
的第三个参数,如果是true
则代表事件捕获,如果是false
则代表事件冒泡,默认情况下是false
事件冒泡与事件捕获在正常的开发过程当中,肯定会对我们有一些影响
阻止事件的传播
当一个事件冒泡不停止传播的时候,最终会冒到document
对象下面去
有某些情况之下,我们不需要事件进行传播,这个时候我们需要一些特定方式让这个事件停止传播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件冒泡</title>
<style>
.div1{
width: 200px;
height: 200px;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
}
.div2{
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
<script>
var div1=document.querySelector(".div1");
var div2=document.querySelector(".div2");
div1.addEventListener("click",function(event){
var e=event||window.event;
console.log("我是外边的盒子div1");
});
div2.addEventListener("click",function(event){
var e=event||window.event;
console.log("我是里边的盒子div2");
console.log(e);
e.stopPropagation(); // 停止事件传播
e.cancelBubble=true; // 取消事件冒泡
});
//div2-----div1
//当我们在div2上面点击以后会触发div2的事件,同时也会触 发div1的事件,这是因为事件有一个传递(传播)行为
document.addEventListener("click",function(){
console.log("我是document");
})
</script>
</html>
停止事件的传播主要使用的是cancelBubble
这个属性与stopPropagation()
这个方法
//平常在工作当中,我们怎么样去处理这个事件停止传播
Event.prototype.stopBP=function(){
this.cancelBubble=true;
this.stopPropagation();
}
事件委托
把本应该绑定在自身的事件现在绑定在了其外层元素,这样做就可以让后面里面添加的元素也能够触发这个事件,它的原理就是利用了事件冒泡
-
事件的触发者
event.target
-
事件的绑定者
event.currentTarget
正常情况下,this是指向了事件的绑定者
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件传播的好处</title>
<style>
#ul1 {
border: 1px solid black;
}
#ul1>li {
border: 1px solid red;
}
</style>
</head>
<body>
<div id="div1">
<ul id="ul1">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
</div>
</body>
<script src="./js/biaogege.js"></script>
<script>
//现在,我们可以偿试着对ul1做事件绑定,因为里面的元素经过事件冒泡 以后最终还是会冒到ul1里面去
$("#ul1")[0].addEventListener("click", function (event) {
//console.log(this);
var e = event || window.event;
/*
console.log(e.currentTarget); //事件的绑定者
console.log(e.target); //事件的触发者
console.log(e.currentTarget==this); //true
*/
//先要判断一下这个触发者是不是li
if(event.target.tagName=="LI"){
console.log(event.target.innerHTML);
}
});
var newLi = document.createElement("li");
newLi.innerText = "插入项";
$("#ul1")[0].appendChild(newLi);
</script>
</html>
它主要应用于当页面的元素不固定,后期可能会添加的时候,我们就可以使用事件委托这种试,来完成事件的绑定
事件触发者的判断我们还是应该通过它的选择器来进行判断matches
这个方法
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件</title>
</head>
<body>
<div class="box">
<p>这是第一句</p>
<h2>第二句</h2>
<div class="div2">
<p class="p1">第三句</p>
<p class="p1">第三句22222</p>
</div>
<p>第四句</p>
<div class="p1">第五句</div>
</div>
</body>
<script src="./js/biaogege.js" type="text/javascript"></script>
<script>
/*
1.把class="box"下面的所有class为p1并且是 div元素class=div2下在面的最后一个元素的 的绑定一个单击事件,打印时面的innerText
2.如果后期添加了新的元素,也希望去实现点击效果
涉及到动态添加的,我们的事件就做到委托
*/
$(".box")[0].addEventListener("click", function (event) {
//判断事件的触发者
var e = event || window.event;
if(e.target.matches(".div2>.p1:last-child")){
console.log(e.target.innerText);
}
});
</script>
</html>
阻止事件默认行为
JS里面,某一些事件会存在一些特定的行为,例如oncontextmenu是鼠标的右键菜单事件,onreset是表单的重置事件,这些事件是有一个默认行为的,如果我们在开发的过程当中,想要阻止这些事件的默认行为怎么办呢
preventDefault()
该方法就是阻止事件的默认行为
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>阻止事件默认行为</title>
<style>
.div1{
width: 200px;
height: 200px;
border: 1px solid black;
}
.menu{
width: 140px;
list-style-type: none;
padding: 0px;
margin: 0px;
border: 1px solid black;
transform-origin: top;
transform: scaleY(0);
position: fixed;
left: 0px;
top: 0px;
}
.menu>li{
height: 35px;
line-height: 35px;
text-align: center;
cursor: pointer;
}
.menu>li:nth-child(even){
background-color: lightgray;
}
.menu>li:hover{
background-color: bisque;
}
</style>
</head>
<body>
<div class="div1"></div>
<ul class="menu">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
</body>
<script src="./js/biaogege.js"></script>
<script>
$(".div1")[0].addEventListener("contextmenu",function(event){
console.log("鼠标右键菜单弹出");
var e=event||window.event;
e.preventDefault(); //阻止了事件了默认行为
//下面是让自己的自定义菜单弹出来
$(".menu")[0].style.left=e.clientX+"px";
$(".menu")[0].style.top=e.clientY+"px";
$(".menu")[0].style.transform="scaleY(1)";
});
</script>
</html>
上面的代码要注意,如果是通过0级DOM事件进行绑定的,还可以使用return false
来阻止事件的默认行为,在2级DOM事件里面没有效果
//这是里0级DOM事件绑定,可以使用return false来阻止事件的默认行为
$(".div1")[0].oncontextmenu=function(){
console.log("鼠标右键菜单弹出");
var e=event||window.event;
//e.preventDefault(); //阻止了事件了默认行为
//下面是让自己的自定义菜单弹出来
$(".menu")[0].style.left=e.clientX+"px";
$(".menu")[0].style.top=e.clientY+"px";
$(".menu")[0].style.transform="scaleY(1)";
return false; //目的:就是阻止事件的默认行为
}
**事件先于响应 **
所谓的事件先于响应指的是JS的事件应该在这个元素的默认响应式前,下面有一个例子
<a href="http://www.baidu.com" onclick="alert('hello world');return false">百度一下</a>
如果这个事件的后面跟了一个return false
那么这个标签的响应行为就不会执行了
<body>
<form id="form1" onreset="r();return false;">
<input type="text" placeholder="请输入用户名">
<hr>
<input type="password" placeholder="请输入密码">
<hr>
<input type="reset">
</form>
</body>
<script>
function r(){
console.log("我要重置了");
}
</script>
当我们在onreset
的后面加上一个return false
以后,这个表单在点击重置按钮以后就举清空了
注意: 二级DOM事件的绑定方式,它有一定要求就是不能在小于或等于IE8里面去使用,如果非要使用,则请使用0级事件或attactEvent
<!--[if lte IE 8]>
<script src="./js/ie.js" type="text/javascript"></script>
<![endif]-->
移动端常用事件
在移动端主要的事件是触摸,它所有的事件都围绕着触摸在进行
-
touchstart触摸开始
这个事件只能在移动端触发,相当于PC端的
onclick
,它比单击事件onclick
执行快200ms到300ms左右我们可以使用
event.preventDefault();
阻止后面即将发生的click
事件移动端事件对象里面有一个重要的属性
changedTouches
反返回了个集合,里面包含的是你所触摸的所有的点(它会告诉你一共有几个点被触摸了) -
touchend触摸结束
当触摸结束的时候会触发
-
touchcancel触摸取消
当触摸被中断的时候,会触发取消的事件
-
touchmove触摸滑动
它在滑动的过程当中不停的去触发,与PC端的
mousemove
非常相像
现在我们通过上面的四个事件案完成下面的案例
通过四个事件完成上面的效果布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>app</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div id="app">
<div class="item">
<div class="delDiv">删除</div>
<div class="div_content" data-startx="">
这是里边的内容
</div>
</div>
</div>
</body>
<script>
//找到要滑动的元素
var div_content = document.querySelector(".div_content");
//**注意**:它不能滑过删除按钮的宽度
var delDiv = document.querySelector(".delDiv");
//--------------------触摸开始---------------------------
//绑定哪几个事件
div_content.addEventListener("touchstart", function (event) {
var e = event || window.event;
//要判断一下,它是不是一根手指在滑动
if (e.changedTouches.length == 1) {
//就是一根手指
this.dataset.startx = e.changedTouches[0].clientX; //鼠标触摸的开始横坐标
}
});
//--------------------------触摸滑动----------------------------
div_content.addEventListener("touchmove", function (event) {
var e = event || window.event;
if (e.changedTouches.length == 1) {
//记录鼠标滑动的时候的坐标值
var currentX = e.changedTouches[0].clientX;
//用手指当前的坐标-手指触摸开始的时候的坐标
var _length = currentX - parseFloat(this.dataset.startx);
// console.log(_length);
if (_length < 0) {
//从右向左滑,值是负的
if (Math.abs(_length) > delDiv.clientWidth) {
_length = delDiv.clientWidth * (-1);
}
this.style.left = _length + "px";
} else {
//从左向右滑,值是正的
this.style.left = "0px";
}
}
})
//------------------------触摸结束-------------------------
div_content.addEventListener("touchend", function (event) {
//为了防止没有滑完,所以我们在这里要在结束的时候判断一下
var e = event || window.event;
if (e.changedTouches.length == 1) {
var currentX = e.changedTouches[0].clientX;
var _length = currentX - parseFloat(this.dataset.startx);
if (_length < 0) {
//从右向左滑
if (Math.abs(_length) < delDiv.clientWidth / 2) {
this.style.left = "0px";
} else {
//大于一半
this.style.left=delDiv.clientWidth*(-1)+"px";
}
}
else{
//从左向右移
this.style.left="0px";
}
} else {
this.style.left = "0px";
}
})
</script>
</html>
css部分
@charset "utf-8";
*{
margin: 0px;
padding: 0px;
list-style-type: none;
}
#app{
width: 100vw;
height: 100vh;
}
.item{
height: 45px;
border: 1px solid black;
position: relative;
}
.delDiv{
height: inherit;
width: 80px;
background-color: tomato;
color: white;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
right: 0px;
top: 0px;
}
.div_content{
display: flex;
align-items: center;
height: inherit;
background-color: #b6b5ce;
width: 100%;
position: absolute;
left: 0px;
top: 0px;
transition: all 0.1s linear;
}
评论区