DOM使用流程:
1.事件源(引发后续事件的标签)(获取事件源一共五种)
2.事件(js已经定义好,直接使用)
3.事件驱动程序(对样式和html的操作)(DOM操作)
使用方式:
1.匿名绑定:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
cursor: pointer;
}
.box {
background-color: red;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
//1.获取事件源(document.getElementById("box"))
var div = document.getElementById("box");
//2.绑定事件(事件源.事件 = function(){ 事件驱动程序 })
div.onclick = function(){
//3.书写事件驱动程序
//可以操作标签的属性和样式。
//例子:
div.style.width = "200px";
div.className = "box";
alert("匿名绑定");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
//1.获取事件源
var div = document.getElementById("box");
//2.绑定事件
//不能写括号,否则成为了返回值
div.onclick = fn;
function fn(){
//3.书写事件驱动程序
alert("函数名绑定");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box" οnclick="fn()"></div>
<script>
function fn(){
alert("行内绑定");
}
</script>
</body>
</html>