JavaScript基础学习(八)—事件

一、鼠标移动事件

     onmouseover: 鼠标移到了上面。

     onmousemove: 鼠标移动了。

     onmouseout: 鼠标移走了。

    window.onload = function(){
    	var div_1 = document.getElementById("div_test");
    
    	div_1.onmouseover = function(){
    		console.log("鼠标移到上面了");
   		};	
    	
   		div_1.onmousemove = function(){
   			console.log("鼠标移动了");
   		};	
    	
   		div_1.onmouseout = function(){
   			console.log("鼠标移走了");
   		};	
    	
    };

结果:

      

 

二、鼠标点击事件

     onmousedown: 鼠标按键被按下。

     onmouseup: 鼠标按键被松开。

     onclick: 鼠标点击事件。

     ondblclick: 鼠标双击事件。

    window.onload = function(){
    	
    	var button = document.getElementById("test");
    	
    	button.onmouseup = function(){
    		this.value = "鼠标被松开";
    	};
    	
    	button.onmousedown = function(){
    		this.value = "鼠标被按下";
    	};
    	
    	button.onclick = function(){
    		console.log("你点了鼠标");
    	};
    	
    	button.ondblclick = function(){
    		console.log("你点了两次鼠标");
    	};
    	
    };

 

 

三、聚焦与离焦事件

     onfocus: 元素获取焦点。

     onblur: 元素失去焦点。

 

	   window.onload = function(){
	   	
		   var username = document.getElementById("username");
		   var password = document.getElementById("password");
		   
		   username.onfocus = function(){
			  this.style.backgroundColor = "#C0FF3E";  
		   };
		   
		   username.onblur = function(){
			   this.style.backgroundColor = "white";  
		   };
		   
		   password.onfocus = function(){
			  this.style.backgroundColor = "#B452CD";  
		   };
		   
		   password.onblur = function(){
			   this.style.backgroundColor = "white";  
		   };
	   };

结果:

        

 

 

四、键盘事件

     onkeydown: 键盘按键被按下。

     onkeypress: 键盘按键被按下并松开。

     onkeyup: 键盘按键被松开。

	    function noNumbers(e)
	    {
	   		var keynum;
	    	var keychar;
	    	var numcheck;
	
	    if(window.event){
	     	 keynum = e.keyCode;
	    }
	    else if(e.which){
	      	keynum = e.which;
	    }
	   	 keychar = String.fromCharCode(keynum);
	    	numcheck = /\d/;
	    	return !numcheck.test(keychar);
	    }

       在本例中，用户无法在输入框中输入数字。

 

五、选择事件

     onchange: 域的内容被改变。

     onselect: 文本被选中。

 

Select Text: <input type="text" value="1234567890" onselect="alert('你选中了文本')"/>

结果:

    

省市的联动

省份:
    <select id="province" name="province">
        <option value="0">---请选择---</option>
        <option value="1">北京</option>
        <option value="2">山东</option>
        <option value="3">河南</option>
    </select>
      
      城市:
      <select id="city" name="city">
          <option value="">---请选择---</option>
      </select>

    window.onload = function(){
    	
    	//初始化数据
    	var citys = initData();
    	
    	var province = document.getElementById("province");
    	var city = document.getElementById("city");
    	
    	//根据省的变化改变城市的值
    	province.onchange = function(){
    		
   			var provinceValue = this.value;
   			//取citys数组中对应索引位置的元素
   			var cs = citys[provinceValue];
    		
   			//添加前:初始化请选择
   			city.options.length = 0;
   			var please = new Option("---请选择---","");
   			city.add(please);
   			
    		for(var i = 0; i < cs.length; i++){
    			var op = new Option(cs[i],cs[i]);
    			city.add(op);
    		}	
    	};
    	
    	function initData(){
			var citys = [];
			citys[1] = ["朝阳区","海淀区","丰台区","昌平区","东城区","西城区"];
			citys[2] = ["济南","青岛","淄博","烟台","东营","泰安"];
			citys[3] = ["郑州","洛阳","焦作","南阳","信阳","许昌"];
			return citys;
    	}
    	
    };

结果: