JavaScript---DOM事件

最新推荐文章于 2024-10-12 21:00:00 发布

杨旭华　

最新推荐文章于 2024-10-12 21:00:00 发布

阅读量289

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/yxh666/article/details/103227200

版权

JavaScript 专栏收录该内容

17 篇文章 13 订阅

订阅专栏

事件基础：

1、事件概述
JavaScript 使用我有能力创建动态页面，而事件是可以被JavaScript侦测到的行为

简单理解：触发—响应机制。

网页中的每个元素都有可以产生某些可以触发JavaScript的事件，例如，我们可以在用户点击按钮时产生一个事件，然后去执行某些操作

我们接下来，先看看事件的三要素，通过案例我们来慢慢讲解：

<!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>
</head>
<body>
    <button id="btn">李白</button>
    <script>
        var  btn = document.getElementById('btn')
        btn.onclick = function(){
            alert('点秋香')
        }
    </script>
</body>
</html>

我们看这段代码大概的讲解一下，下面我们再详细讲解，我有一个按钮叫李白，注意啊，这个李白就相当于一个按钮，是可以点击的，我一点击它，他就得给我弹出一个对话框，我就让它点秋香吧，这个是随便写啊，这时候就需要一个 触发事件 帮我们完成
这时候就有一个重要的东西了——事件
事件是由三部分组成：
事件源、事件类型、事件处理程序，我们也称为 事件三要素

事件源： 事件被触发的对象就是谁被触发其实就是按钮

那么现在要获得这个按钮，怎么获得呢，是不是可以给按钮起名字啊，(就是添加一个id)起一个**id=“btn”**吧，如下：

<button id="btn">李白</button>

那我们现在获得事件源，就是：

	<script>
        var  btn = document.getElementById('btn')
    </script>

现在事件源有了，接下来是不是就是要事件里的第二个了，就是 事件类型 了：

事件类型： 如何触发什么事件比如鼠标点击(onclick) 还是鼠标经过还是键盘按下

这里我们先说鼠标点击的吧，点击就是onclick

行，我发现这里没法说，那我们直接把第三个要素也说一些把就是：事件处理程序

事件处理程序： 通过一个函数赋值的方式完成

我们看怎么写的格式：

	btn.onclick

btn 是事件源，onclick 是事件类型

接着我们看 事件处理程序 ，就是通过函数赋值来完成：

        btn.onclick = function(){
            alert('点秋香')
        }

整合代码，我在上面已经写出了，我们看效果：
在这里插入图片描述

我们点击它看效果：
在这里插入图片描述
就可以看到事件被触发了，是可以看到的，我们点击它，才会被触发，我不点击是不会触发的

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>Document</title>
</head>
<body>
    <div>1234</div>
    <script>
        // 执行事件步骤
        // 点击div 控制台输出 我被选中了
        var div = document.querySelector('div')
        // 2.绑定事件（注册事件）
        div.onclick
        // 3.添加事件处理程序  (采用函数赋值形式)
        div.onclick = function() {
            console.log('我被选中了');
            
        }
    </script>
</body>
</html>