事件简单入门
○ 功能
某些组件被执行了某些操作后触发某些代码
○ 绑定事件
1. 在html标签上指定事件属性,属性值为JS代码
<div style="height: 50px;width: 50px;background-color: gray" onclick="alert('div被点击');"></div>
执行效果
当点击div区域后
可以将事件属性后的代码定义到script标签中,然后在事件属性中调用方法
JavaScript代码
function click() {
alert("被点击");
}
HTML代码
<div style="height: 50px;width: 50px;background-color: gray" onclick="click();"></div>
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
<script>
function click() {
alert("被点击");
}
</script>
</head>
<body>
<div style="height: 50px;width: 50px;background-color: gray" onclick="click();"></div>
</body>
</html>
2. 通过JS获取元素对象,指定事件属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
</head>
<body>
<div id="div1" style="height: 50px;width: 50px;background-color: gray"></div>
<script>
// 设置点击后执行语句
function click() {
alert("div被点击");
}
// 获取元素对象
var div1 = document.getElementById("div1");
// 绑定事件
div1.onclick = click;
</script>
</body>
</html>