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