JavaScript-事件

鼠标点击事件：

　　设置宽和高为300px的红色方块，点击变为绿色。

    <div class="a" onclick="huan(this)">1</div>
    <div class="a" onclick="huan(this)">2</div>
    <div class="a" onclick="huan(this)">3</div>
    <div class="a" onclick="huan(this)">4</div>
    <div class="a" onclick="huan(this)">5</div>
    <div class="a" onclick="huan(this)">6</div>
    <div class="a" onclick="huan(this)">7</div>
    <div class="a" onclick="huan(this)">8</div>
    <!--this用来指示点击的为当前元素-->
    <script type="text/javascript">
        function huan(a){
            a.style.backgroundColor = "green";        
        }
    </script>

　　点击后的对应方块变为绿色：

　　如果要使每次点击只有一个方块变色，则需要在点击变色事件之前加上把把所有方块变为原色的事件：

        function huan(a){
            //用一个for循环遍历所有clss名为a的元素，把背景色恢复
            var b = document.getElementsByClassName("a");
            for(var i=0;i<b.length;i++){
                b[i].style.backgroundColor = "red";
            }
            //点击变色
            a.style.backgroundColor = "green";     
        }

鼠标悬浮事件：

　　实际包括了鼠标移上onmouseover和移开onmouseout两个事件

　　具体效果应用于鼠标移上变色，等同css的hover效果

    <div id="menu">
        <div class="item">首页</div>
        <div class="item">产品中心</div>
        <div class="item">技术支持</div>
        <div class="item">联系我们</div>
        <div class="item">关于我们</div>
        <script type="text/javascript">
            //通过class名获取div元素
            var a = document.getElementsByClassName("item");
            //遍历所有找到的div加鼠标移上事件
            for(var i=0;i<a.length;i++){
                //把鼠标移上事件定义为一个函数：鼠标移上变红色，方法同鼠标点击变色
                a[i].onmouseover = function(){
                    for(var i=0;i<a.length;i++){
                        a[i].style.backgroundColor = "#69F"; //想每个导航栏单独变色，同样要先在变色前把所有的导航栏恢复原色    
                    }
                    this.style.backgroundColor = "red";      //this指示鼠标移上当前元素变色    
                } 
            }
            //鼠标移上变色后，再添加鼠标移开恢复原色，方法同上
            for(var i=0;i<a.length;i++){
                a[i].onmouseout = function(){
                    
                    this.style.backgroundColor = "#69F";     //this指示鼠标离开当前元素恢复原色
                } 
            }
        </script>