JS事件
在JS中，事件指的是达到某个条件，自动触发的功能，比如：单击输入框实现某些功能。
常用事件
| 事件 | 描述 |
|---|---|
| 鼠标事件 | |
| onclick | 用户单击对象 |
| ondblclick | 用户双击对象 |
| onmousedown | 鼠标按钮被按下 |
| onmousemove | 鼠标被移动 |
| onmouseout | 用户从对象上移开鼠标 |
| onmouseover | 鼠标移到对象上 |
| 焦点事件 | |
| onfocus | 对象获得焦点，如：输入框在输入时 |
| onblur | 对象失去焦点，如：离开正在进行输入的输入框 |
| onselect | 在文本框中的文本被选中时发生 |
| 键盘事件 | |
| onkeydown | 用户按下键盘按键 |
| onkeyup | 用户松开键盘按键 |
| onkeypress | 用户按下键盘按键并松开 |
| 其他事件 | |
| onchange | 对象内容被改变 |
| onsubmit | 确认按钮被点击，使用的对象是form |
| onload | 浏览器已完成页面的加载 |
事件绑定
方式一：html属性直接绑定
<div id="d1" onclick="changeColor(this);">点我</div>
<script>
function changeColor(ths) {
ths.style.backgroundColor = "green";
}
</script>
如果需要对对象本身进行一些操作就需要传入this，this表示触发事件的当前对象。
函数定义里的形参不能用this，需要用其他名称。
方式二：JS中获取标签对象绑定
<div id="d1">点我</div>
<script>
var d1Ele = document.getElementById("d1")
d1Ele.onclick = function changeColor() {
this.style.backgroundColor = "green";
}
</script>
事件案例
搜索框的聚焦与失焦
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<input type="text" id="d1" value="默认搜索的内容">
<script>
// 1.查找input标签对象
var inputEle = document.getElementById('d1');
// 2.绑定一个聚焦事件
inputEle.onfocus = function () {
// 3.清空value值
this.value = ''
}
// 4.绑定一个失焦事件
inputEle.onblur = function () {
// 5.添加一个全新的value值
this.value = '小霸王游戏机'
}
</script>
</body>
</html>
根据省份选城市
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<p>省市:
<select name="" id="pro">
</select>
</p>
<p>市区:
<select name="" id="city">
</select>
</p>
<script>
let proEle = document.getElementById('pro');
let cityEle = document.getElementById('city');
// 1.自定义数据(以后有现成的组件实现)
let data = {
"河北": ["廊坊", "邯郸"],
"北京": ["朝阳区", "海淀区"],
"山东": ["威海市", "烟台市"],
"安徽": ["合肥市", "芜湖市"],
"上海": ["静安", "黄埔"],
"深圳": ["龙湖", "罗湖"]
};
// 2.获取自定义对象中所有的key并添加到省市下拉框中
for (let proVal in data) {
// 2.1.创建option标签
opEle = document.createElement('option');
opEle.innerText = proVal;
opEle.value = proVal
// 2.2.添加到第一个下拉框中
proEle.append(opEle)
}
// 3.文本域变化事件
proEle.onchange = function () {
// 3.0.先清空市区下拉框中的内容
cityEle.innerHTML = '';
let currentPro = this.value;
let currentCityList = data[currentPro];
// 3.1.循环获取市区数据
for (let i = 0; i < currentCityList.length; i++) {
// 3.2.创建option标签
opEle = document.createElement('option');
opEle.innerText = currentCityList[i];
opEle.value = currentCityList[i]
// 2.2.添加到第一个下拉框中
cityEle.append(opEle)
}
}
</script>
</body>
</html>
