js事件

最新推荐文章于 2024-06-10 17:00:16 发布

YRZ-James

最新推荐文章于 2024-06-10 17:00:16 发布

阅读量57

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_41998938/article/details/97135395

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.事件的定义
事件是可以被JavaScript侦测到的行为，通俗的讲就是当用户与web页面进行交互时，解释器就会创建响应的event对象以描述事件信息。

2.js的事件一般分为三种

第一种：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>事件定义</title>
</head>
<body>
    <button onclick="alertWindow()"></button>
    <script>
        function alertWindow(){
            alert("我被点击了");
        }
    </script>
</body>
</html>

这种方式来写事件只适合于初学者，因为在html中写js代码，强耦合，不利于复用代码。所以这种方法一般不提倡使用。

**第二种：**DOM0级事件

代码如下：

<!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 id="btn">DOM0级事件绑定方式</button>
    <script>
        var Dom0 = function(){
            alert("DOM级事件绑定方式");
        }

        var btn = document.getElementById("btn");
        btn.onclick = Dom0;
    </script>
</body>
</html>

DOM0级事件使得js的代码和html的代码完全分离了，所以解决了强耦合的问题，但是却仍然存在缺点，他的缺点就是就是有且只能绑定一个事件类型。比如说我写两次onclick，最终最后一次会覆盖前面的那次，所以DOM0级事件也不推荐使用。

第三种：DOM2级事件

代码如下：

<!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 id="btn2">DOM2级事件绑定方式</button>
    <script>
        var btn2 = document.getElementById("btn2");
        btn2.addEventListener('click',function(){
            alert('DOM2级事件绑定方式');
        },false);
        btn2.addEventListener('click',function(){
            alert('DOM2-1级事件绑定方式');
        },false);
    </script>
</body>
</html>

DOM2级事件，通过addEventListener函数绑定事件
优点：松耦合，绑定多个事件，事件捕获和事件冒泡。
我们一般使用这种方法。

总结：
js事件的创建一般包含三个步骤：
1.事件对象 button
2.事件对象绑定一个事件类型
3.事件句柄

YRZ-James

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js事件

1.事件的定义事件是可以被JavaScript侦测到的行为，通俗的讲就是当用户与web页面进行交互时，解释器就会创建响应的event对象以描述事件信息。2.js的事件一般分为三种第一种：html中定义代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...
复制链接

扫一扫