事件对象event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 400px;
height: 400px;
border: 1px solid #000;
}
.son {
width: 200px;
height: 200px;
background-color: #f00;
margin: 100px auto;
}
</style>
</head>
<body>
<button>点击</button>
<div class="father">
<div class="son"></div>
</div>
<a href="">点击</a>
<script>
// 事件三要素: 1.事件源(给谁绑定事件) 2.事件类型(绑定一个什么事件) 3.事件处理程序(绑定事件后要干嘛)
var btn = document.getElementsByTagName("button")[0];
// 单击事件
// 事件对象 event
btn.onclick = function (e) {
console.log("点击了");
console.log(e);
// 属性
// 事件的触发者
console.log(e.target);
}
var father = document.getElementsByClassName("father")[0];
father.onclick = function (e) {
console.log("点击");
// 事件触发者
console.log(e.target);
console.log(e.type);
// console.log(e.currentTarget);
}
// 获取a标签
var link = document.getElementsByTagName("a")[0];
link.onclick = function (e) {
console.log("点击标签");
// 阻止默认事件
e.preventDefault();
}
// 键盘事件
document.body.onkeydown = function (e) {
// 键码
console.log(e.keyCode);
}
</script>
</body>
</html>
鼠标事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 400px;
height: 400px;
border: 1px solid #000;
overflow: auto;
}
.son {
width: 200px;
height: 800px;
background-color: pink;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
<script>
var box = document.getElementsByClassName("box")[0];
// 进入子元素会再次触发
box.onmouseover = function () {
console.log("鼠标刚进入");
}
box.onmouseenter = function () {
console.log("鼠标完全进入");
}
box.onmouseout = function () {
console.log("鼠标刚要离开");
}
box.onmouseleave = function () {
console.log("鼠标完全离开");
}
box.onmousemove = function () {
console.log("鼠标移动");
}
box.onmousedown = function () {
console.log("鼠标按下");
}
box.onmouseup = function () {
console.log("鼠标弹起");
}
box.ondblclick = function () {
console.log("鼠标双击");
}
box.onmousewheel = function () {
console.log("鼠标滚轮滚动");
}
box.onscroll = function () {
console.log("滚动条滚动");
}
box.oncontextmenu = function () {
console.log("右击菜单");
}
</script>
</body>
</html>
键盘事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
document.body.onkeydown = function (e) {
console.log("键盘按下");
console.log(e);
}
document.body.onkeypress = function () {
console.log("按着不放");
}
document.body.onkeyup = function () {
console.log("键盘弹起");
}
</script>
</body>
</html>
窗口事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function () {
var box = document.getElementsByClassName("box")[0];
console.log(box);
}
</script>
</head>
<body>
<div class="box"></div>
<script>
// onload
window.onload = function () {
console.log("资源加载完成");
}
window.onresize = function () {
console.log("窗口大小改变");
}
window.onunload = function () {
console.log("关闭窗口");
}
</script>
</body>
</html>
表单事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text">
<!-- action 提交后的跳转页面 -->
<form action="./01-DOM事件.html">
<input type="text" name="" id="">
<input type="submit">
<input type="reset">
</form>
<script>
var inp = document.getElementsByTagName("input")[0];
var form = document.getElementsByTagName("form")[0];
// 内容改变事件
inp.onchange = function () {
console.log("内容改变");
}
// 获取焦点
inp.onfocus = function () {
console.log("获取焦点");
}
// 失去焦点
inp.onblur = function () {
console.log("失去焦点");
}
// 输入事件
inp.oninput = function () {
console.log("输入事件");
}
// 提交事件
form.onsubmit = function () {
console.log("提交成功");
}
// 重置事件
form.onreset = function(){
console.log("重置");
}
</script>
</body>
</html>
注册事件处理程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: #f00;
}
</style>
</head>
<body>
<!-- <button onclick="alert('点击')">点击</button> -->
<div class="box"></div>
<script>
var box = document.getElementsByClassName("box")[0];
// 1. on 事件
box.onclick = function () {
console.log("on 事件");
}
box.onclick = function () {
console.log("第二个事件");
}
// 2.addEventListener()
box.addEventListener("click", function () {
console.log("事件1");
});
box.addEventListener("click", function () {
console.log("事件2");
});
</script>
</body>
</html>
事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 400px;
height: 400px;
background-color: #f00;
}
.son1 {
width: 200px;
height: 200px;
background-color: #0f0;
}
.son2 {
width: 100px;
height: 100px;
background-color: #00f;
}
</style>
</head>
<body>
<div class="father">
<div class="son1">
<div class="son2"></div>
</div>
</div>
<script>
var father = document.getElementsByClassName("father")[0];
var son1 = document.getElementsByClassName("son1")[0];
var son2 = document.getElementsByClassName("son2")[0];
father.onmouseover = function (e) {
console.log("进入" + e.target.className);
}
father.onclick = function () {
console.log(this);
}
son1.onclick = function (e) {
console.log(this);
// 阻止事件冒泡
e.stopPropagation();
}
son2.onclick = function (e) {
console.log(this);
// e.stopPropagation();
}
// 事件传递过程
// 事件捕获
// 目标阶段 (事件执行)
// `事件冒泡`: 当为多个嵌套的元素设置了相同的事件处理程序,它们将触发事件冒泡机制。
// 在事件冒泡中,最内部的元素将首先触发其事件,然后是栈内的下一个元素触发该事件,以此类推,
// 直到到达最外面的元素。如果把事件处理程序指定给所有的元素,那么这些事件将依次触发。
// 阻止事件冒泡
</script>
</body>
</html>
事件委托
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.nav {
margin: 0;
padding: 0;
list-style: none;
width: 700px;
height: 30px;
margin: 30px auto;
}
li {
width: 100px;
height: 30px;
text-align: center;
line-height: 30px;
border: 1px solid #ccc;
box-sizing: border-box;
float: left;
}
</style>
</head>
<body>
<ul class="nav">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
// 事件委托:将原本绑定在子元素身上的事件,现在绑定到父元素身上,利用事件冒泡机制和 事件对象,触发当前事件。
var nav = document.getElementsByClassName("nav")[0];
nav.onclick = function (e) {
// 事件的触发者
// console.log(e.target);
e.target.style.backgroundColor = "pink";
}
</script>
</body>
</html>