（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>