首页 > 代码库 > 实际项目中积累的一些关于事件的简单应用JS代码段(能力有限,不喜轻喷,23333)

实际项目中积累的一些关于事件的简单应用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:点击元素显示内容,在点击该元素隐藏内容
  vartu_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" );
  for(var i = 0 ; i<zizhi.length;i ++){
       zizhi[i].addEventListener( "mouseover",function (){
             this.style.width = "600px";
          this.style .height = "600px" ;
             this.style. position = "absolute" ;
          this. style.top = 0;
       })
    }
 
  for(var i = 0 ; 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){
                         for (var i = 0 ; i < quan_xuan.length; i ++) {
                         if (quan_xuan[i].type == ‘checkbox‘) {
                                quan_xuan[i].checked = true ;
                        }
                  }
                  } else{
                          for (var i = 0 ; i < quan_xuan.length; i ++) {
                         if (quan_xuan[i].type == ‘checkbox‘) {
                                quan_xuan[i].checked = false ;
                              }
                        }
                  }
            }

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