事件三要素包含
事件源
是指那个元素引发的事件。比如当你点击cdsn图标的时候,会跳转到cdsn首页。那么这个cdsn图标就是事件源。
再或者,可以这样理解, 当你对某个元素执行动作的时候,会触发一系列效果(动画,跳转....),那么这个元素就是事件源
事件
事件是指执行的动作。
例如,点击,鼠标划过,按下键盘,获得焦点。
事件驱动程序
事件驱动程序即执行的结果。
例如,当你点击cdsn图标的时候,会跳转到cdsn首页。那么跳转到cdsn首页就是事件的处理结果。
执行事件的步骤
- 获取元素
- 绑定事件
- 书写事件驱动程序
例如
全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>点击我有惊喜</button>
<div id="box"></div>
<script>
var btn = document.getElementsByTagName("button")[0];
var box = document.getElementById("box");
btn.onclick =function () {
box.innerHTML = "<img src=\"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516692944212&di=38c2e662673923e26603efe1da3d935d&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dpixel_huitu%252C0%252C0%252C294%252C40%2Fsign%3Decfe83b9042442a7ba03f5e5b83bc827%2F728da9773912b31bc2fe74138d18367adab4e17e.jpg\" alt=\"\">";
}
</script>
</body>
</html>
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>点击我有惊喜</button>
<div id="box"></div>
</body>
</html>
就不写css样式了
JavaScript代码
<script>
var btn = document.getElementsByTagName("button")[0];
var box = document.getElementById("box");
btn.onclick =function () {
box.innerHTML = "<img src=\"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1516692944212&di=38c2e662673923e26603efe1da3d935d&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dpixel_huitu%252C0%252C0%252C294%252C40%2Fsign%3Decfe83b9042442a7ba03f5e5b83bc827%2F728da9773912b31bc2fe74138d18367adab4e17e.jpg\" alt=\"\">";
}
</script>
DOM是document object model的缩写, 是文档对象模型。
BOM是browser object model的缩写,是浏览器对象模型。