• Html第5集：DOM 事件 、JavaScript 事件

    转载请标明出处：http://blog.csdn.net/zhaoyanjun6/article/details/126508434
    本文出自【赵彦军的博客】

    文章目录

    HTML 事件是发生在 HTML 元素上的事情。

    当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

    点击事件, 改变其他控件内容

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>

    <script>


    </script>

</head>
<body>

<button onclick="getElementById('demo').innerHTML= Date()">点击吧</button>
<p id="demo">初始值</p>

</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    效果如下：

    在这里插入图片描述

    点击事件, 改变自己控件内容

    代码将修改自身元素的内容 (使用 this.innerHTML)

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>

    <script>


    </script>

</head>
<body>

<button onclick="innerHTML= Date()">点击吧</button>

</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    效果如下：

    在这里插入图片描述

    函数修改控件内容

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>

</head>
<body>

<button id="btn" onclick="changeBtn()">点击吧</button>

<script>

    function changeBtn() {
        document.getElementById('btn').innerHTML = Date()
    }

</script>

</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    效果如下：

    在这里插入图片描述

    鼠标事件

    • onclick 当用户点击某个对象时调用的事件句柄。
    • oncontextmenu 在用户点击鼠标右键打开上下文菜单时触发
    • ondblclick 当用户双击某个对象时调用的事件句柄。
    • onmousedown 鼠标按钮被按下。
    • onmouseenter 当鼠标指针移动到元素上时触发
    • onmouseleave 当鼠标指针移出元素时触发
    • onmousemove 鼠标被移动
    • onmouseover 鼠标移到某元素之上
    • onmouseout 鼠标从某元素移开
    • onmouseup 鼠标按键被松开

    举例：鼠标移动到控件上

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>

</head>
<body>

<!--鼠标移动到 button-->
<button id="btn" onmouseenter="changeBtn()">点击吧</button>

<script>

    function changeBtn() {
        document.getElementById('btn').innerHTML = Date()
    }

</script>

</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    举例：打开上下文菜单时触发

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>

</head>
<body>

<!--打开上下文菜单-->
<button id="btn" oncontextmenu="changeBtn()">点击吧</button>

<script>

    function changeBtn() {
        document.getElementById('btn').innerHTML = Date()
    }

</script>

</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    函数获取控件属性值

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>

</head>
<body>

<script>

    function changeBtn() {
        //获取button属性值
        const v = document.getElementById('input').value
        //获取input属性值
        const c = document.getElementById('btn').textContent
        
        console.info("获取控件属性 button： " + v + " input: " + c)
    }

</script>


<button id="btn" onclick="changeBtn()">点击吧</button>

<input id="input" value="默认值"/>


</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    效果图如下：
    在这里插入图片描述

  • 相关阅读:
    WeMos Mini ESP32-S2FN4R2介绍
    【音视频】Linux | FFmpeg源码搭建
    自动化测试 — selenium + Java
    Python 毕设精品实战案例——快速索引目录Part2
    linux centos7虚拟机安装mysql5.7详细教程（tar包安装）
    【BOOST C++ 12 函数式编程】（2） Boost.Function库
    Promise知识点拾遗
    【数据结构】堆及堆排序详解
    【正点原子I.MX6U-MINI应用篇】5、嵌入式Linux在LCD上显示BMP、JPG、PNG图片
    Vue 源码解读（12）—— patch
  • 原文地址：https://blog.csdn.net/zhaoyanjun6/article/details/126508434