JavaScript——事件简单入门

最新推荐文章于 2024-04-25 20:29:33 发布

Melonico

最新推荐文章于 2024-04-25 20:29:33 发布

阅读量152

点赞数

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

本文链接：https://blog.csdn.net/qq_45852430/article/details/106946717

版权

JavaScript 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

事件简单入门

○ 功能

某些组件被执行了某些操作后触发某些代码

○ 绑定事件

1. 在html标签上指定事件属性，属性值为JS代码

<div style="height: 50px;width: 50px;background-color: gray" onclick="alert('div被点击');"></div>

执行效果
在这里插入图片描述
当点击div区域后

可以将事件属性后的代码定义到script标签中，然后在事件属性中调用方法

JavaScript代码

function click() {
    alert("被点击");
}

HTML代码

<div style="height: 50px;width: 50px;background-color: gray" onclick="click();"></div>

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
    <script>
        function click() {
            alert("被点击");
        }
    </script>
</head>
<body>
    <div style="height: 50px;width: 50px;background-color: gray" onclick="click();"></div>
</body>
</html>

2. 通过JS获取元素对象，指定事件属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
</head>
<body>
    <div id="div1" style="height: 50px;width: 50px;background-color: gray"></div>
    <script>
        // 设置点击后执行语句
        function click() {
            alert("div被点击");
        }
        // 获取元素对象
        var div1 = document.getElementById("div1");
        // 绑定事件
        div1.onclick = click;
    </script>
</body>
</html>

Melonico

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript——事件简单入门

事件简单入门○ 功能某些组件被执行了某些操作后触发某些代码○ 绑定事件1. 在html标签上指定事件属性，属性值为JS代码<div style="height: 50px;width: 50px;background-color: gray" onclick="alert('div被点击');"></div>执行效果当点击div区域后可以将事件属性后的代码定义到script标签中，然后在事件属性中调用方法JavaScript代码function click(
复制链接

扫一扫

专栏目录