HTML之JavaScript DOM（document）编程处理事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
事件：本质是行为，用户的行为或者浏览器的行为；事件发生指的是处罚js函数执行
事件的三要素：事件源、事件、事件处理程序
事件的绑定：
1.通过元素的属性绑定 on***
2.通过DOM编程动态绑定
注：
1.一个事件可以绑定多个函数；eg：onclick="show(),show1()
2.一个元素可以绑定多个事件 eg：onclick="show()" ondblclick="show2()"
常见的事件：
1.鼠标事件
2.键盘事件
3.表单事件
4.页面加载事件onload ：页面加载完毕事件
事件的触发
1.行为触发
2.DOM编程触发
*/
</script>
<!-- 代码顺序影响浏览器执行代码的时间
解决方案：等页面加载完毕之后再加载js脚本
-->
<script>
// 方法一：
// function ready() {
// // 通过DOM获得要操作的元素
// var btn = document.getElementById("btn1"); //返回一个对象
// // 绑定一个单击事件
// btn.onclick = function () { //隐函数
// alert("11");
// }
// }
// 方法二：此方法无需在body标签中再加onload
window.onload = function () {
// 通过DOM获得要操作的元素
var btn = document.getElementById("btn1"); //返回一个对象
// 绑定一个单击事件
btn.onclick = function () { //隐函数
alert("11");
}
// 为div1绑定事件
var d1 = document.getElementById("div1");
d1.onclick = function () {
console.log("已点击")
div1.style.backgroundColor = "red"
}
// 通过按钮触发div事件
btn.onclick = function () { //隐函数
alert("变色")
//通过dom编程触发事件，相当于触发了某些事件发生了
d1.onclick()
}
}
</script>
<style>
.div1 {
width: 100px;
height: 100px;
background-color: yellow;
border: 1px;
}
</style>
</head>
<!-- <body onload="ready()"> 跟方法一搭配-->
<body>
<input type="button" id="btn1" value="按钮">
<div class="div1" id="div1">
</div>
</body>
</html>
