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;
    	}

    };

结果: