在<script></script>中
1.定义函数然后在标签中onclick="函数名"进行绑定
2.通过js给标签绑定事件
var b2Ele = doucment.getElementById("b2")
b2Ele.onclick=function(){}
常用事件:
1.onclick
2.onfocus:元素获得焦点(典型例子:输入框默认是某一个数据,当光标移动单击到输入框中的时候,做出相应的事件,比如说默认值清空)
onblur:与onfocus相反,(典型例子:当光标移出输入框的时候,做出相应的动作,比如输入框默认值的恢复)
简单的例子:
<!DOCTYPE html>
<html >
<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" 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 >
<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 >
<option value="">-请选择省-</option>
</select>
<label for="s2">市</label>
<select >
</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>