JavaScript基础学习事件

最新推荐文章于 2024-11-02 19:19:35 发布

柠檬味小发糕

最新推荐文章于 2024-11-02 19:19:35 发布

阅读量895

点赞数

分类专栏： JavaScript 文章标签： javascript html

本文链接：https://blog.csdn.net/qq_43537319/article/details/122016566

版权

JavaScript 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

JavaScript基础学习事件

注册事件
删除事件
事件对象
e.target与this的区别
阻止默认行为(事件)
阻止事件冒泡
事件委托

注册事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=devcie-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>


</head>

<body>
    <button>传统注册事件</button>
    <button>方法监听注册事件</button>
    <script>
        //  使用传统方法注册事件  后面的事件会覆盖前面的事件
        var btn = document.querySelectorAll('button');
        btn[0].onclick = function() {
            alert('hi~');
        }
        btn[0].onclick = function() {
            alert('hello~');
        }

        // 使方法监听注册事件   addEventListener()
        //  里面的事件类型是字符串  需要加引号，而且不带on
        //  同一个元素 同一个事件可以添加多个监听器(事件处理程序)
        btn[1].addEventListener('click', function() {
            alert(22);
        })
        btn[1].addEventListener('click', function() {
            alert(33);
        })
    </script>

</body>

</html>

删除事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=devcie-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <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.querySelectorAll('div');
        divs[0].onclick = function() {
            alert(1111);
            // 传统方法移除事件
            divs[0].onclick = null;
        }


        divs[1].addEventListener('click', fn);

        function fn() {
            alert(2222);
            //  removeEventListener  删除事件
            divs[1].removeEventListener('click', fn);
        }
    </script>
</body>

</html>

事件对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=devcie-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

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

<body>
    <div>123</div>
    <script>
        var div = document.querySelector('div');
        // div.onclick = function(event) {
        //     console.log(event);
        // }


        //官方解释: event对象代表事件的状态,比如键盘按键的状态鼠标的位置、鼠标按钮的状态。
        // 事件发生后, 跟事件相关的一系列信息数据的集合都放到这个对象里面, 这个对象就是事件对象 event, 它有很多属性和方法。

        div.addEventListener('click', function(e) {
            console.log(e);
        });
    </script>

</body>

</html>

e.target与this的区别

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=devcie-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

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

<body>

    <div>
        123
    </div>


    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <script>
        // e.target 返回的是触发事件的对象   this返回的是绑定事件的对象
        // e.target 点击哪个就返回哪个    this 哪个元素绑定了事件就返回谁

        var div = document.querySelector('div');
        div.addEventListener('click', function(e) {
            console.log(e.target); //<div> 123</div>
            console.log(this); //<div> 123</div>
        })


        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            console.log(e.target); //<li></li>
            console.log(this); //<ul></ul>
        })
    </script>

</body>

</html>

阻止默认行为(事件)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=devcie-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            background-color: pink;
            width: 100px;
            height: 100px;
        }
    </style>


</head>

<body>

    <div>123</div>
    <a href="https://www.baidu.com/">百度</a>
    <script>
        // e.type返回事件的类型
        var div = document.querySelector('div');
        div.addEventListener('click', function(e) {
            console.log(e.type);
        })
        div.addEventListener('mouseover', function(e) {
            console.log(e.type);
        })
        div.addEventListener('mouseout', function(e) {
            console.log(e.type);
        })

        // e.preventDefault();  阻止默认事件(例如下图的跳转事件)  或者让提交按钮不提交
        var a = document.querySelector('a');
        a.addEventListener('click', function(e) {
            e.preventDefault();
        })
    </script>

</body>

</html>

阻止事件冒泡

<!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>Document</title>
    <style>
        .father {
            overflow: hidden;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: pink;
            text-align: center;
        }
        
        .son {
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color: purple;
            line-height: 200px;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">son儿子</div>
    </div>
    <script>
        // 常见事件对象的属性和方法
        // 阻止冒泡  dom 推荐的标准 stopPropagation() 
        var son = document.querySelector('.son');
        son.addEventListener('click', function(e) {
            alert('son');
            //  这里有停止冒泡的方法，就不会弹出father和document的对话框
            e.stopPropagation(); // stop 停止  Propagation 传播
            e.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡
        }, false);

        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        document.addEventListener('click', function() {
            alert('document');
        })
    </script>
</body>

</html>

事件委托

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=devcie-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>


</head>

<body>
    <ul>
        <li>JavaScript学习中</li>
        <li>JavaScript学习中</li>
        <li>JavaScript学习中</li>
        <li>JavaScript学习中</li>
        <li>JavaScript学习中</li>
    </ul>
    <script>
        // 之前学习如果想要完成点击每个li都能进行弹出对话框，是需要for循环给每个li绑定事件

        //  但我们通过事件委托给父节点就可以完成要求的功能

        //事件委托的核心原理:给父节点添加侦听器，利用事件冒泡影响每一个子节点
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            alert(2233);
            e.target.style.backgroundColor = 'pink';
        })
    </script>

</body>

</html>