在<script></script>中
1.定义函数然后在标签中onclick="函数名"进行绑定
2.通过js给标签绑定事件
var b2Ele = doucment.getElementById("b2")
b2Ele.onclick=function(){}
常用事件：
1.onclick
2.onfocus：元素获得焦点（典型例子：输入框默认是某一个数据，当光标移动单击到输入框中的时候，做出相应的事件，比如说默认值清空）
onblur：与onfocus相反，（典型例子：当光标移出输入框的时候，做出相应的动作，比如输入框默认值的恢复）
简单的例子：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
</head>
<body>
<input type="text" id="i1" value="对子哈特">
<script>
// 找到要绑定事件的标签
var i1Ele = document.getElementById("i1");
// 1. 先绑定获取焦点的事件
i1Ele.onfocus = function (ev) {
// 当输入框获取焦点之后要做的事儿
this.value = "";
};
// 2. 绑定失去焦点的事件
i1Ele.onblur = function (ev) {
this.value = "对子哈特";
}
</script>
</body>
</html>
3.onchange：当某标签的值发生变化时所要进行的行为
简单示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
</head>
<body>
<label for="s1">省</label>
<select id="s1">
<option value="">-请选择省-</option>
</select>
<label for="s2">市</label>
<select id="s2">
</select>
<script>
var data = {
"北京": ["昌平区", "海淀区", "朝阳区"],
"上海": ["浦东区", "徐汇区", "浦东新区"],
"山东": ["烟台", "青岛", "威海"]
};
var s1Ele = document.getElementById("s1");
var s2Ele = document.getElementById("s2");
// 1. 拿到所有的省，在s1中生成对应的option选项
for (var i in data){
console.log(i);
// 1.1 创建option标签
var tmp = document.createElement("option");
// 1.2 把省信息添加到option标签中
tmp.innerText = i;
// 1.3 把创建好的option标签插入到第一个select标签中
s1Ele.appendChild(tmp);
}
// 当用户选中某个省之后才做的事儿
// 当第一个select框的值发生变化的时候触发的动作
s1Ele.onchange = function (ev) {
// 0. 先清空第二个select框的option
s2Ele.innerHTML = "";
// 1. 获取用户选中的省
console.log(this.value);
var p = this.value;
// 2. 根据用户选择的省，去data中找省对应的城市数据
var cityArray = data[p];
// 3. 遍历所有的城市数据，给第二个select框添加option选项
for (var j in cityArray){
console.log(cityArray[j]);
// 3.1 生成空的option
var tmp = document.createElement("option");
// 3.2 给option添加文本
tmp.innerText = cityArray[j];
// 3.3 把生成的option追加到第二个select标签中
s2Ele.appendChild(tmp);
}
}
</script>
</body>
</html>
