（1）在html上綁定onclick事件
<div class="test" id="main">
這是測試區域的內容
</div>
<input type="button" value="變紅" onclick="fun1()" id="change">
<script>
function fun1(){
var getId=document.getElementById("main");
getId.style.backgroundColor="red";
}
</script>
（2）jquery綁定事件
<script>
$("#change").click(function(){
$("#main").css("background","red");
})
//方法二
$("#change").on("click",function(){
$("#main").css("background","red");
})
</script>
使用on()方法添加的事件處理程序適用於當前以及未來的元素
(1) 使用js獲取元素並添加綁定事件
第一種方法，為目標id綁定onclick事件。這種指定的事件處理程序方法我們可以稱為DOM0級方法，會在事件流的冒泡階段就被處理。且不能添加多個事件處理程序。
<div class="test" id="main">
這是測試區域的內容
</div>
<input type="button" value="變紅" id="change">
<script>
var getId=document.getElementById("main");
var getChange=document.getElementById("change");
getChange.onclick=function(){
getId.style.background="red";
}
getChange.onclick=function(){
getId.style.color="blue";
}
//顏色變綠，但背景顏色無改變
</script>
我們使用第二種方式，通過DOM2級事件添加方法，為目標id添加事件監聽方法，這種方法默認會在事件流的捕獲階段被處理，且可以同時添加多個處理程序，這些事件按順序執行。
兼容性：ie9+
<script>
getChange.addEventListener("click",function(){
getId.style.background="red";
})
getChange.addEventListener("click",function(){
getId.style.color="blue";
})
//顏色變綠，背景變紅
</script>
由於ie8及以下版本只支持事件冒泡，所以我們可以用第三種方法為ie指定事件處理程序。
<script>
getChange.attachEvent("onclick",function(){
getId.style.background="red";
})
getChange.attachEvent("onclick",function(){
getId.style.color="blue";
})
//顏色變綠，背景變紅
</script>