DOM知识3（重点）

最新推荐文章于 2024-03-28 23:55:28 发布

wwaitings

最新推荐文章于 2024-03-28 23:55:28 发布

阅读量48

点赞数

分类专栏： es6

本文链接：https://blog.csdn.net/m0_48219937/article/details/119760774

版权

es6 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript中三种事件绑定方式：传统方式、removeEventListener和attachEvent/detachEvent，并探讨了DOM事件流、冒泡和捕获机制，以及事件委托的实际应用，包括键盘事件和模拟京东搜索按键输入案例。

摘要由CSDN通过智能技术生成

在这里插入图片描述

第三种封装的绑定事件方式了解即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>

    <div>1</div>
    <div>2</div>
    <div>3</div>

    <script>
        var divs = document.querySelector('div');
        divs[0].onclick = function() {
            alert(11);
            //1.传统方式删除事件
            divs[0].onclick = null;
        }
        //2.removeEventListener  删除事件
        divs[1].addEventListener('click',fn);//此处的fn不需要加小括号调用
        function fn() {
            alert(22);
            divs[1].removeEventListener('click',fn);
        }
        //3.
        divs[2].attachEvent('onclick',fn1);
        function fn1() {
            alert(22);
            divs[2].detachEvent('onclick',fn1);
        }

    </script>

</body>

</html>

DOM事件流

在这里插入图片描述

捕获：
在这里插入图片描述
冒泡：

事件对象

在这里插入图片描述

在这里插入图片描述

也可以给father阻止冒泡

事件冒泡的应用：事件委托

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        img {
            position: absolute;
        }
    </style>
</head>
<body>
    
    <img src="../images/天使.jpg" alt="" width="80px" height="80px">
    <script>
        var pic = document.querySelector('img');
        document.addEventListener('mousemove',function(e){
            //1.mousemove 只要我们鼠标移动1px，就会触发这个事件
            //2.核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把获得的x和y坐标作为图片的top值和left值
            //就可以移动图片
            var x = e.pageX;
            var y = e.pageY;

            //3.千万不要忘记给left和top添加px单位
            pic.style.left = x - 40 + 'px'; //减去图片长度的一半是保证鼠标位置在图片的中间，让图片往左移
            pic.style.top = y - 40 + 'px'; //网上移 
            
        })
    </script>


</body>
</html>

常用的键盘事件

8.1 常用键盘事件

事件除了使用鼠标触发，还可以使用键盘触发。
键盘事件============触发条件
onkeyup : 某个键盘按键松开时触发
onkeydown: 某个键盘按键被按下时触发
onkeypress: 某个键盘按键被按下时触发但是它不识别功能键比如ctrl shift 箭头等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script>
        //常用的键盘事件
        //传统的绑定方式需要加on即onkeyup
        document.onkeyup = function() {
            console.log('我弹起了');
        }
        //1.keyup 按键弹起时触发
        document.addEventListener('keyup',function() {
            console.log('我又弹起了');
        })
        //2.keydown 按键按下时触发
        document.addEventListener('keydown',function() {
            console.log('我按下了down');
        })
        //3.keypress 按键按下时触发
        document.addEventListener('keypress',function() {
            console.log('我按下了press');
        })
        //4.三个事件的执行顺序：keydown--keypress-keyup
    </script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //键盘事件对象中的keyCode属性可以得到相应的ASCII码值
        //1. 我们的keyup和keydown事件不区分字母大小写 a和 A得到的都是65
        //2. 我们的keypress事件区分字母大小写 a得到的是97 A得到的是65
        document.addEventListener('keyup',function(e) {
            console.log('up:' + e.keyCode)
            if (e.keyCode === 65) {
                alert('您按下的是a键');
            }else {
                alert('您按下的不是a键');
            }
        })
        document.addEventListener('keypress',function() {
            console.log('press:' + e.keyCode)
        })
    </script>
</body>
</html>

模拟京东按键输入内容案例（按s键自动聚焦在搜索框）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <script>
        //核心思路：检测用户是否按下s键 如果按下了s键，就把光标定位到搜索框
        //使用键盘事件对象里面的keyCode属性，判断用户是否按下了s键
        //搜索框获得焦点：使用js里面的focus()方法聚焦
        var search = document.querySelector('input');
        //如果使用keydown,那么触发事件时会把按键s输入到输入框，为了避免这种情况，
        //就选择了keyup,在松开按键时事件发生，就不会输入键盘s
        document.addEventListener('keyup',function(e) {
            if (e.keyCode === 83) {
                search.focus();
            }
        })
    </script>
</body>
</html>