事件：就是一件事。
事件源：事件发生的组件。
监听器：一个对象。当事件源上发生了事件，就执行对象中的某些方法
注册监听：将监听器绑定到事件源上，监听事件的发生
绑定事件的方式：
1.直接在标签上绑定：eg：<button type="button" onclick="show('hello')">一个按钮</button>
2.先获取元素对象，再添加事件：
eg：
var myDiv = document.getElementById("d1");
var hehe=function() {
alert("hehe")
}
//把处理函数，设置为 null 就可以解绑事件
//hehe=null;
myDiv.onclick = hehe;
如果hehe方法只是此元素点击才触发，可以如下定义：
var myDiv = document.getElementById("d1");
myDiv.onclick=function() {
alert("hehe")
}
//解绑事件就将匿名函数内容写为空
3.通过addEventListener()方法添加事件：
eg：
var btn = document.getElementById("btn");
var test = function() {
alert("点击了");
};
btn.addEventListener("click", test)
//解绑事件
btn.removeEventListener('click',test);
方式1比较少用，如果函数比较复杂，就会使格式混乱，不易于阅读
方式2和方式3较为常用，两者也有一些区别。方式2一个元素只能绑定一个事件，要是绑定多个事件，后面的事件会覆盖之前的事件。方式3一个元素可以同时绑定多个事件，根据事件绑定顺序依次执行。
焦点事件：
onfocus 元素获得焦点。
onblur 元素失去焦点
oninput 事件 当你往表单中输入内容时就触发
点击事件：
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
键盘事件：
onkeydown 某个键盘按键被按下。
onkeyup 某个键盘按键被松开。
onkeypress 某个键盘按键被按下并松开。
e.keyCode 通过事件对象event中的keyCode属性，可以获取键盘某个键的键码 其实就是ASCII码表中对按键的编码
鼠标事件：
onmousedown 鼠标按钮被按下。
onmouseup 鼠标按键被松开。
onmouseover 鼠标移到某元素之上。
onmouseout 鼠标从某元素移开。
onmousemove 鼠标被移动。
e.button 事件对象中的 button属性可以获取鼠标按键的编号：0 左键，1滚轮，2右键
表单事件：
onsubmit 确认按钮被点击。
onreset 重置按钮被点击。
加载与卸载事件:
onload 一张页面或一幅图像完成加载。 注意绑在 window对象上
onunload 用户退出页面。其他浏览器不支持IE支持
其他事件：
针对表单onchange 域的内容被改变。 比如下拉框
onselect 文本被选中。
这些知识点有点干巴巴的，下面写一个三级联动案例，用一下上面罗列的知识点
注：省市区只写了一部分，旨在说明问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<select name="province" id="province" onchange="selectProvince()">
<option value="">--请选择省份--</option>
<option value="1">陕西</option>
<option value="2">河南</option>
</select>
<select name="city" id="city" onchange="selectCity()">
<option value="">--请选择城市--</option>
</select>
<select name="area" id="area">
<option value="">--请选择区(县)--</option>
</select>
</body>
<script>
var province = document.getElementById("province");
var city = document.getElementById("city");
var area = document.getElementById("area");
//大体思路：用2维数组表示城市，省份的值是从1开始的，省份中0是“--请选择省份--”，所以在二维数组中，先放一个空数组，让省份序号和城市序号相对应
var cities = [
[],
["铜川", "渭南", "宝鸡", "安康"],
["开封", "南阳", "郑州"]
];
//城市已经是二维数组了，区县按理来说写三维数组，可没有这种定义。干脆定义两个数组，和城市对应上即可，最后根据省份的数字写一个if语句就好了
//和城市一样，前面写个空数组，用来和城市一一对应
area1 = [
[],
["王益区", "印台区", "耀州区"],
["临渭区", "华州区"],
["渭滨区", "陈仓区", "金台区", "凤翔区"],
["汉滨区", "石泉县", "紫阳县", "岚皋县"]
];
area2 = [
[],
["龙亭区", "鼓楼区", "禹王台区", "祥符区"],
["宛城区", "卧龙区"],
["中原区", "二七区", "金水区", "上街区"]
];
function selectProvince() {
// 获取省的value值
var s = province.value;
var arr = cities[s];
city.innerHTML = "<option value=''>--请选择城市--</option>";
for (let i = 0; i < cities[s].length; i++) {
city.innerHTML += "<option value=''>" + cities[s][i] + "</option>";
}
}
function selectCity() {
// 获取省的value值
var s = province.value;
// 获取市的value值
var c = city.selectedIndex;//这个属性算是本程序的核心了，用来获取选择的是第几个市
// 选的是陕西省
var i = city.selectedIndex;
// 获取市的value值
area.innerHTML = "<option value=''>--请选择区(县)--</option>";
//如果选择陕西省，就要遍历陕西中的城市
if (s == 1) {
var a = area1[i];
for (let j = 0; j < area1[c].length; j++) {
area.innerHTML += "<option value=''>" + area1[c][j] + "</option>";
}
} else {//如果选择河南省，就要遍历河南中的城市
var b = area2[i];
for (let m = 0; m < area2[c].length; m++) {
area.innerHTML += "<option value=''>" + area2[c][m] + "</option>";
}
}
}
</script>
</html>
就不做解释了，代码中注释写的很清楚，测试没什么问题。有兴趣的朋友可以去测试一下。
2214
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
