1 事件的三要素 事件源：有監聽的HTML標簽，能響應時間的HTML標簽，就是事件源。 事件名：用戶的特定行為，比如onclick（單擊） 事件的響應：就是一個個function 事件的響應，就是function，那麼編程就是編寫事件的響應。響應中，最重要的就是想清楚被操作的對象。 下麵給大家看一個 ...
1 事件的三要素
事件源：有監聽的HTML標簽，能響應時間的HTML標簽，就是事件源。
事件名：用戶的特定行為，比如onclick（單擊）
事件的響應：就是一個個function
事件的響應，就是function，那麼編程就是編寫事件的響應。響應中，最重要的就是想清楚被操作的對象。
下麵給大家看一個小例子：單擊第一個紅色盒子，第二個會變為藍色。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>JS入門</title>
<style>
div{
width: 100px;
height: 100px;
margin: 100px;
}
</style>
<script>
function bianse(){
document.getElementById("box2").style.backgroundColor ="blue"
}
</script>
</head>
<body>
<div onclick="bianse()"></div>
<div id="box2"></div>
</body>
</html>
通過這個例子，可以看出頁面上的兩個盒子，點擊第一個盒子讓第二個盒子變藍，第一個盒子就是事件源，第二個盒子就是被操作的對象。
其中：
getElementById→通過Id來找到此元素。
現在要讓盒子2變藍，所以要讓JavaScript得到盒子2這個元素，得到元素的辦法，就需要通過ID來得到它。
註意：
document.getElementById（""）
這種命名法稱為駝峰命名法，長的一個單詞，是由多個單片語成的，第一個單詞的首字母是小寫，之後的每一個
單詞的首字母都是大寫。
綜上，點擊一個盒子讓另外一個盒子變色，點擊誰，誰的身上就有onclick；你要操作誰，誰就必須要有id，
通過書寫document.getElementByld（""）得到它。
2 語句按行執行。
上述的例子，讓我們瞭解了，事件的三元素以及駝峰命名法。我們可以點擊第一個盒子讓第二個盒子變藍。那麼，除了讓第二個盒子變藍，它會不會實現讓盒子二的高寬產生變化甚至讓盒子自身產生變化呢。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>JS入門</title>
<style>
div{
width: 100px;
height: 100px;
margin: 100px;
}
</style>
<script>
function bianse(){
document.getElementById("box2").style.backgroundColor ="blue";
document.getElementById("box2").style.width="300px";
document.getElementById("box1").style.backgroundColor ="green"
}
</script>
</head>
<body>
<div id="box1" onclick="bianse()"></div>
<div id="box2"></div>
</body>
</html>
可以看到，我們不僅可以對盒子二進行多樣式改變，盒子一的屬性也會變化。這裡，這些語句的執行就是按行執行，
找準事件源，用戶點擊哪個盒子，會有事情發生，這個盒子就是事件源，它身上就有onclick屬性。
找準誰是被操作的對象，被操作的對象可能不止一個，並且事件源自己也有可能就是被操作的對象。被操作
的對象身上一定要有Id，這樣才能讓 document.getElementById("")通過ID來得到這個元素。
