前端js中的onclick点击事件

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 50px;
background-color: skyblue;
margin: 40px;
}
</style>
</head>
<body>
<!--设置点击事件 方式1-->
<div onclick="aaa()">点击这里</div>
<!--方式2 更常用-->
<div>看我看我</div>
</body>
</html>
<script type="text/javascript">
//对应实现点击事件的方法
function aaa(){
console.log("哈哈哈");
var body = document.getElementsByTagName("body")[0];
body.style.backgroundColor = "yellow";
}
//--------
//方式2
var two_div = document.getElementsByTagName("div")[1];
//绑定点击事件 一旦单击div 立马执行function
two_div.onclick = function(){
console.log("你好!");
}


</script>

<script type="text/javascript">


</script>

运行结果:

点击事件触发1:

点击事件触发2:注意看控制台

点击:


前端js中的onclick点击事件
http://ultracode.cn/2020/11/04/JS/前端js中的onclick点击事件/
作者
Win
发布于
2020年11月4日
许可协议