实际项目中积累的一些关于事件的简单应用JS代码段（能力有限，不喜轻喷，23333）

1：鼠标移入移出显示另一张图片　　

　　var yuanquan_1 = document.getElementById("yuanquan_1" ); 

　　yuanquan_1. onmouseover = function () {

                     yuanquan_1.src = "img/youhuigoujiu-2.png";

                }

                yuanquan_1. onmouseout = function () {

                     yuanquan_1.src = "img/youhuigoujiu.png";

                }

 

2：点击元素显示内容，在点击该元素隐藏内容

　　var tu_add_icon=document.getElementById("tu-add-icon");

　　var tu_ul = document.getElementById("tu-ul" );

            tu_add_icon.addEventListener( "click",function () {

                   if (tu_ul.style .display=='none' ) {

                        tu_ul. style.display = 'block';

                  } else{

                        tu_ul. style.display = 'none';

                  }

            })

 

3：单选框radio切换

　 var man = document .getElementById("man");

   var woman = document .getElementById("woman");

              man. onclick = function () {

                        man.checked = true;

                        woman.checked = false;

              }

              

              woman. onclick = function () {

                        woman.checked = true;

                        man.checked = false;

              }

 

 注：把input的type和name属性都设置为radio的时候可以直接有切换的效果

 

4：循环添加移入移出事件　

　　var zizhi = document.getElementsByClassName("zizhi" );

; i<zizhi.length;i ++){

     　　zizhi[i].addEventListener( "mouseover",function (){

            　this.style.width = "600px";

     　　　　 this.style .height = "600px" ;

            　this.style. position = "absolute" ;

;

     　　})

  　　}

 

; i<zizhi.length;i ++){

    　　 zizhi[i].addEventListener( "mouseout",function (){

            　this.style.width = "200px";

     　　　　 this.style .height = "200px" ;

            　this.style. position = "static" ;

     　　})

 　　}

 

5：点击选框全选　　

function quanXuan() {

          var tu_li_quanxuan = document.getElementById("checkAll" );

          var duo_xuan = document.getElementsByClassName("tu-input" );

          var type = tu_li_quanxuan.checked;

                 if(type==true) {

; i < duo_xuan.length; i ++) {

                            if(duo_xuan[i].type == 'checkbox') {

                                duo_xuan[i].checked = true;

                           }

                     }

                } else {

; i < duo_xuan.length; i ++) {

                            if(duo_xuan[i].type == 'checkbox') {

                                duo_xuan[i].checked = false;

                           }

                     }

                }

           }

            

 

全选也可以这样写

　　　　function quanXuan() {

        　　　var tu_li_quanxuan = document.getElementById("checkAll" );

              var duo_xuan = document.getElementsByClassName("tu-input" );

              var type = tu_li_quanxuan.checked;

; i < duo_xuan.length; i ++) {

                           duo_xuan[i].checked = type;

                }

           }

 

有一个单选框没有选中，全选也不选中

　　　　var tu_li_quanxuan = document.getElementById("checkAll" );

        var duo_xuan = document.getElementsByClassName("tu-input" );

; i < duo_xuan.length; i ++) {

                     duo_xuan[i].addEventListener( "click",function (){

                            if (this.checked== false) {

                                tu_li_quanxuan.checked =false;

                           }

                     })

                }