示例，4个div，单选变色效果，

方法1：在元素标签中添加事件名用来触发函数，优点是有明确的函数名，可以重复调用在不同的位置，也可以用不同的事件触发，缺点是每一个元素都需要添加事件，比较繁琐，

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.a{
    width:20px;
    height:20px;
    background-color:red;
    float:left;
    margin:5px;
    }
</style>
</head>

<body>
    <div class="a" onClick="show(this)"></div> <!--参数为this，代表传回的参数是元素本身-->
    <div class="a" onClick="show(this)"></div>
    <div class="a" onClick="show(this)"></div>
    <div class="a" onClick="show(this)"></div>
</body>
</html>
<script type="text/javascript">
function show(a)//设置形参接收实参
{
    var b =document.getElementsByClassName("a");//获取元素，得到元素数组
    for(var i=0;i<b.length;i++)
    {
        b[i].style.backgroundColor = "red";//for循环遍历所有元素并改变颜色为初始颜色
    }
    a.style.backgroundColor = "green";//改变当前选中的元素的颜色
}
</script>

 

 

方法2：直接定义匿名函数，优点是不用再往标签内添加点击事件，省掉了繁琐的步骤，而且函数时绑定在事件上的，不用担心出现写错函数名而无法调用的情况，缺点是只能绑定在一种事件、一个元素或一组元素集中，不方便重复调用，

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
.a{
    width:20px;
    height:20px;
    background-color:red;
    float:left;
    margin:5px;
    }
</style>
</head>

<body>
    <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>
</body>
</html>
<script type="text/javascript">
var b = document.getElementsByClassName("a");//获取元素，得到的也是元素数组
for(var i=0;i<b.length;i++)//这个循环的作用是给每一个元素加上onclick事件
{
    b[i].onclick = function()//循环遍历加事件
    {
        for(var i=0;i<b.length;i++)//这个循环用来让所有元素恢复初始色
        {
            b[i].style.backgroundColor = "red";//循环遍历恢复初始色
        }
        this.style.backgroundColor = "green";//this代表元素本身，点击谁谁就是this
    }
}
</script>

 

　　两种方法的效果一样

javaFX 给标签添加点击事件_i++