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

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

相关阅读:
Java Double longValue()方法具有什么功能呢？
【915程序设计】16西交大软件专硕915程序设计真题讲解
 理德外汇：美长债收益率再次向5%迈进提振美元同时压制股市
 车企内部文件传输数据效率太慢？那是没找到合适的文件传输工具
 ssm基于WEB的房屋出租管理系统的设计与实现161620
ansible常用模块
 进阶C语言-指针的进阶（中）
react hook---钩子函数的使用，useState，useReducer，useEffect，useRef,useContext，自定义hook
【LeetCode-73】矩阵置零
 Fmoc-PEG4-NHS酯,1314378-14-7 含有Fmoc保护胺和NHS酯
原文地址：https://blog.csdn.net/zhaoyanjun6/article/details/126508434

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

文章目录

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

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

函数修改控件内容

鼠标事件

举例：鼠标移动到控件上

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

函数获取控件属性值

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