js绑定点击事件的几种方式

（1）在html上绑定onclick事件

<div class="test" id="main">

这是测试区域的内容

</div>

<input type="button" value="变红" οnclick="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.οnclick=function(){

　　　　getId.style.background="red";

　　}

　　getChange.οnclick=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>

转载于:https://www.cnblogs.com/weiyemo/p/7010287.html