关于js_事件处理的三种方式

最新推荐文章于 2023-01-14 17:30:21 发布

NewBurlaSKing

最新推荐文章于 2023-01-14 17:30:21 发布

阅读量587

点赞数

分类专栏： javascript 文章标签： javascript html 前端

本文链接：https://blog.csdn.net/qq_55961861/article/details/126312251

版权

javascript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

一.事件处理分类

1 HTML事件处理

2 DOM0级事件处理

3 DOM2级事件处理

HTML事件处理

缺点：js与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>
    <button οnclick="deal()">我是一个按钮！</button>
    <script>
        function deal() {
            console.log('有人点击了按钮！');
        }
    </script>
</body>
</html>

DOM0级事件

优点：html与js分开处理了！

缺点：不能处理多个事件！

<!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>
    <button id="btn">我是一个按钮！</button>
    <script>
        var s = document.getElementById('btn');
        s.onclick = function () {
            console.log('有人点击了按钮1');
        }
        s.onclick = function () {
            console.log('有人点击了按钮2');
        }
    </script>
</body>
</html>

DOM2级事件

优点：html与js分开处理，可以处理多个事件；

缺点：写起来比较麻烦！

<!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>
    <button id="btn">我是一个按钮！</button>
    <script>
        var s = document.getElementById('btn');
        function deal() {
            console.log('有人点击了按钮1');
        }
        function demo() {
            console.log('有人点击了按钮2');
        }
        s.addEventListener('click',deal);
        s.addEventListener('click',demo);

    </script>
</body>
</html>