事件三要素
事件源
事件类型
事件处理程序
1.鼠标事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 300px;
height: 300px;
background: skyblue;
overflow: auto;
}
.box1 {
width: 100px;
height: 600px;
background: pink;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
<script>
// 事件三要素
// 事件源
// 事件类型
// 事件处理程序
//获取元素
var box = document.getElementsByTagName('div')[0];
// onmouseover 鼠标刚进入元素时触发
// box.onmouseover = function () {
// console.log('鼠标刚进入');
// }
// onmouseenter 鼠标完全进入时触发
// box.onmouseenter = function () {
// console.log('鼠标完全进入元素');
// }
// onmouseover 和 onmouseenter 的区别:是否触发冒泡事件
// onmousemove 鼠标在元素上移动时触发
// box.onmousemove = function () {
// console.log('鼠标移动触发');
// }
// onmouseout 鼠标刚要离开元素时触发
// box.onmouseout = function () {
// console.log('我走了');
// }
// onmouseleave 鼠标完全离开元素时触发
// box.onmouseleave = function () {
// console.log('我真走了');
// }
// onmouseout 和 onmouseleave 区别:是否触发冒泡事件
// onmousedown 鼠标按下时触发
// box.onmousedown = function () {
// console.log('鼠标按下');
// }
// onmouseup 鼠标弹起时触发
// box.onmouseup = function () {
// console.log('鼠标弹起');
// }
// onclick 鼠标单击事件
// box.onclick = function () {
// console.log('单击事件');
// }
// ondblclick 鼠标双击事件
// box.ondblclick = function () {
// console.log('双击66');
// }
// onmousewheel 鼠标滚轮滚动时触发
// box.onmousewheel = function () {
// console.log('车轮滚滚');
// }
// onscroll 当元素滚动条被滚动时触发
// box.onscroll = function () {
// console.log('滚动条动了');
// }
// oncontextmenu 当用户点击鼠标右键打开菜单时触发
box.oncontextmenu = function () {
console.log('你想干啥?');
}
</script>
</body>
</html>
2.事件对象 event
event.target 获取事件源
event.stopPropagation() 阻止事件传播(阻止事件冒泡);
event.preventDefault() 阻止触发默认事件
........
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 500px;
height: 500px;
border: 1px solid orange;
}
.son {
width: 200px;
height: 200px;
background: pink;
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
<a href="https://www.baidu.com">点击跳转</a>
<script>
// 事件对象
var box = document.getElementsByClassName('box')[0];
var son = document.getElementsByClassName('son')[0];
box.onclick = function (event) {
event.stopPropagation();
console.log(box);
console.log(event);
//target 事件的触发者
console.log(event.target);
}
son.onclick = function (event) {
// 阻止事件传播(阻止事件冒泡)
event.stopPropagation();
console.log(son);
}
var oa = document.getElementsByTagName('a')[0];
oa.onclick = function (event) {
// 阻止默认事件
event.preventDefault();
}
</script>
</body>
</html>
3.事件冒泡
当为多个嵌套元素设置了相同的事件处理程序,它们将触发事件冒泡机制,在事件冒泡中,最内部的元素首先触发冒泡,然后是栈内的下一个元素触发该事件,以此类推,直到到达最外面的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 300px;
height: 300px;
border: 1px solid orange;
}
.son {
width: 100px;
height: 100px;
background: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
<script>
// 事件冒泡
// 当为多个嵌套的元素设置了相同的事件处理程序,它们将触发事件冒泡机制
// 在事件冒泡中,最内部的元素将首先触发其事件,然后是栈内的下一个元素
// 触发该事件,以此类推,直到到达最外面的元素。
var box = document.getElementsByClassName('box')[0];
var son = document.getElementsByClassName('son')[0];
// 绑定相同的事件处理程序
// box.onclick = function () {
// console.log('爸爸');
// }
// son.onclick = function () {
// console.log('儿子');
// }
// box.onmouseover = function () {
// console.log('爸爸');
// }
// son.onmouseover = function () {
// console.log('儿子');
// }
// box.onmouseenter = function () {
// console.log('爸爸');
// }
// son.onmouseenter = function () {
// console.log('儿子');
// }
//onmouseover(onmouseout) 会触发冒泡事件,onmouseenter(onmouseleave) 不会触发冒泡事件
//鼠标刚进入(离开)会触发冒泡事件,鼠标完全进入(离开)不会触发冒泡事件
box.onmouseleave = function () {
console.log('爸爸');
}
son.onmouseleave = function () {
console.log('儿子');
}
</script>
</body>
</html>
4.事件中的this指向
事件中的this指向事件源
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 300px;
height: 300px;
border: 1px solid orange;
}
.son {
width: 100px;
height: 100px;
background: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div class="son"></div>
</div>
<script>
var box = document.getElementsByClassName('box')[0];
var son = document.getElementsByClassName('son')[0];
// this指向问题
// 1.普通函数 this 默认指向 window
// 2.构造函数 this 指向实例化对象
// 3.对象方法中的 this,指向该方法所属对象
// 4.事件中的 this 指向事件源
box.onclick = function () {
console.log(box);
console.log(this);
}
</script>
</body>
</html>
5.循环绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
li {
width: 100px;
height: 50px;
border: 2px solid yellow;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
var oli = document.getElementsByTagName('li');
// 循环绑定事件
for (var i = 0; i < oli.length; i++) {
oli[i].onclick = function () {
console.log(this);
}
}
</script>
</body>
</html>
6.表单事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<input type="text">
<!-- 提交 -->
<input type="submit">
<!-- 重置 -->
<input type="reset">
</form>
<script>
// 获取节点
var inp = document.getElementsByTagName('input')[0];
var oform = document.getElementsByTagName('form')[0];
// 1.onchange 内容改变事件(当输入框失焦,才代表输入结束,才会触发)
inp.onchange = function () {
console.log('内容改变了');
}
// 2.onfocus 获取焦点时触发
inp.onfocus = function () {
console.log('获取焦点');
}
// 3.onblur 失去焦点时触发
inp.onblur = function () {
console.log('失去焦点');
}
// 4.oninput 输入事件(正在输入)
inp.oninput = function () {
console.log('正在输入');
}
// 5.onsubmit 表单提交事件
oform.onsubmit = function () {
console.log('提交');
}
// 6.onreset 表单重置事件
oform.onreset = function () {
console.log('重置');
}
</script>
</body>
</html>
7.表单事件应用场景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 233px;
height: 150px;
position: relative;
}
span {
position: absolute;
right: 0px;
bottom: 0px;
}
</style>
</head>
<body>
<input type="text">
<div>
<textarea name="" id="" cols="30" rows="10" maxlength="300"></textarea>
<span>0/300</span>
</div>
<script>
var inp = document.getElementsByTagName('input')[0];
var text = document.getElementsByTagName('textarea')[0];
var osp = document.getElementsByTagName('span')[0];
// 在输入结束之后拿到输入框的值
inp.onchange = function () {
console.log(inp.value);
}
// 在获取焦点之后
inp.onfocus = function () {
console.log('获取焦点');
console.log('展示搜索记录');
console.log('清楚提示信息');
}
// 实时监听用户输入
text.oninput = function () {
console.log(text.value.length);
osp.innerHTML = text.value.length + '/300';
}
</script>
</body>
</html>
8.键盘事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 键盘按下事件
// window.onkeydown = function (e) {
// console.log('键盘按下');
// console.log(e.key);
// // 触发键盘按下事件的键码
// console.log(e.keyCode);
// if (e.keyCode == 13) {
// console.log('按下回车要执行的代码');
// }
// }
// // 键盘弹起事件
// window.onkeyup = function () {
// console.log('键盘弹起');
// }
// 键盘按着不放事件
window.onkeypress = function (e) {
console.log("按着" + e.key + "不松手");
}
</script>
</body>
</html>
9.窗口事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// onload 当文档和资源文件加载完成时触发
window.onload = function () {
console.log('加载完成');
}
// onresize 窗口大小发生变化时触发
window.onresize = function () {
console.log("窗口发生变化");
}
// onunload 关闭网页时触发
window.onunload = function () {
console.log('拜拜');
}
</script>
</body>
</html>
10.注册处理事件绑定程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>灯光下有两个影子,一个是我的,另一个也是我的</div>
<script>
var box = document.getElementsByTagName('div')[0];
// 通过“on” 绑定事件,相同事件只能执行一个
// box.onclick = function () {
// alert('说的真好!');
// }
// box.onclick = function () {
// alert('才怪');
// }
// addEventListener() 可以添加多个相同的事件
box.addEventListener('click', function () {
alert('说的真好!');
})
box.addEventListener('click', function () {
alert('才怪!');
})
</script>
</body>
</html>
11.浏览器兼容性绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>点击</div>
<script>
function addMyEvent(ele, type, fun) {
// 标准浏览器
if (ele.addEventListener) {
ele.addEventListener(type, fun);
} else if (ele.attachEvent) { //如果有attachEvent 方法,代表是 IE浏览器
ele.attachEvent('on' + type, fun);
} else {
ele['on' + type] = fun;
}
}
// 获取节点
var box = document.getElementsByTagName('div')[0];
addMyEvent(box, 'click', function () {
console.log(this);
})
</script>
</body>
</html>
12.事件的传递过程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 事件的传递过程 事件流
// 三个阶段 1.事件捕获 2.目标阶段 3.事件冒泡
// 1.‘捕获阶段’:事件从根节点流向目标节点,途中流经各个DOM节点,在各个节点上触发捕获事
件,直到达到目标节点
// 2.‘目标(target)阶段’:在此阶段中,事件传导到目标节点。浏览器在查找到已经指定给目
标事件的监听器后,就会运行该监听器
// 3.‘事件冒泡’:当为多个嵌套元素设置了相同的事件处理程序,它们将触发冒泡机制。在冒泡
事件中,最内部的元素将首先触发其事件,然后栈内下一个元素触发该事件,以此类推,直
到达到最外面的元素。如果把事件处理程序指定 给所有的元素,那么这些事件将依次触发
</script>
</body>
</html>
13.阻止默认事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="https://www.baidu.com">点击跳转百度</a>
<script>
var oa = document.getElementsByTagName('a')[0];
oa.onclick = function (e) {
// 阻止默认事件
// e.preventDefault();
return false;
}
</script>
</body>
</html>
14.事件委托
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
width: 100px;
height: 1000px;
}
li {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
border: 1px solid orange;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<script>
// 事件委托 :将原本绑定在子元素身上的事件,绑定在父元素身上,利用事件冒泡传递的过程来触发当前的事件,
// 这样的作法叫做事件委托,也叫事件代理
var oul = document.getElementsByTagName('ul')[0];
oul.onmouseover = function (e) {
console.log(e.target);
e.target.style.backgroundColor = 'pink';
}
oul.onmouseout = function (e) {
console.log(e.target);
e.target.style.backgroundColor = 'transparent';
}
</script>
</body>
</html>