一、鼠标移动事件
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;
} };
结果: