DOM-01體驗事件
阿新 • • 發佈：2017-07-28
屬性 byname 匿名 獲取 程序 操作 pin clas lan
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
cursor: pointer;
}
.aaa {
background-color: red;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
//JS是以事件驅動為核心的一門語言
//事件3要素：事件源、事件、事件處理(驅動)程序
//1,事件源：引發後續事件的標簽
//2,事件：（js定義好的）
//3,事件驅動程序：對樣式和html的操作（DOM操作)
//體驗事件
//需求：點擊盒子 alert("1");
//步驟1：獲取事件源
// var arr = document.getElementsByClassName("");
// var arr1 = document.getElementsByName("");
// var div = document.getElementById("");
//步驟2：綁定事件 匿名綁定（事件源.事件 = function(){事件驅動程序} )
//也可以帶函數名綁定 div.onclick = fn;不要帶括號
//還有行內綁定 <div id = "box",onclick = fn()> 寫括號
//3：書寫事件驅動程序 也可以操作標簽屬性和樣式
var div = document.getElementById("box");
div.onclick = function (){
// alert("1");
// div.className = "aaa";
div.style.width = "200px";
div.style.height = "200px";
div.style.backgroundColor = "red";
}
</script>
DOM-01體驗事件