单击事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--事件三要素：
1.事件源：发生事件的对象，比如点击了按钮，按钮就是事件源
2.事件：具体发生的事情，比如单击事件
3.事件驱动程序：当事件发生的时候，要执行的响应函数或代码
-->
<div id="box" style="background-color: yellow;">我是div</div>
<hr>
<div id="box2" style="background-color: yellow;">我是div2</div>
<script>
//1.获取事件源
var box=document.getElementById('box');
//2.添加事件,语法：事件源.事件
box.onclick=function(){
//3.在函数中响应事件，匿名函数就是事件驱动程序
console.log('我被点击了');
}
//给box2添加双击事件
var box2=document.getElementById('box2');
box2.ondblclick=function(){
console.log('我被双击了');
}
</script>
</body>
</html>
焦点事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--焦点事件：
onfocus():元素得到光标(焦点)时触发的事件
onblur():元素失去光标(焦点)时触发的事件
-->
<input type="text" name="uname" />
<script>
//1.获取事件源
var box=document.getElementsByName('uname')[0];
//2.添加事件,语法：事件源.事件
box.onfocus=function(){
//3.在函数中响应事件，匿名函数就是事件驱动程序
//改变边框为红色的
this.style.border="3px solid red";
}
//失去焦点时触发的事件
box.onblur=function(){
//改变边框为原来的样式
this.style.border="";
}
</script>
</body>
</html>
改变事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--改变事件：
onchange():元素的内容发生改变时触发的事件,针对input元素中的文本框，密码框等输入框，
当元素的value改变时就触发onchange事件，针对select，当option的value改变时，触发onchange事件
-->
城市：<select name="city" id="city">
<option value="wuhan">武汉</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
</select>
<script>
//1.获取事件源
var citySelect=document.getElementById('city');
//2.添加事件,语法：事件源.事件
citySelect.onchange=function(){
//3.在函数中响应事件，匿名函数就是事件驱动程序
//输出选中的option的value--this.value
console.log(this.value);
}
</script>
</body>
</html>
