原创
JavaScript——事件简单入门
事件简单入门
○ 功能
某些组件被执行了某些操作后触发某些代码
○ 绑定事件
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>
JavaScript
赞
- 作者：Melonico
- 发表时间：2021-03-15 15:37
- 更新时间：2021-03-15 15:37
评论