DOM事件-杨标的博客

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非常相像

现在我们通过上面的四个事件案完成下面的案例

1566724124256

通过四个事件完成上面的效果布局

<!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;
}

目录CONTENT

DOM事件

DOM事件

0级DOM事件

JS事件对方法的调用

0级DOM事件不能多次赋值

基础事件对象

获取事件对象

事件对象分类

2级DOM事件

2级DOM事件的应用点

移除2级DOM事件

高级事件对象Event

事件冒泡与捕获

阻止事件的传播

事件委托

阻止事件默认行为

移动端常用事件

评论区