键盘事件: document.onkeydown
document.onkeydown = function (e) {
if (e.keyCode == 27) { // 按 Esc
//要做的事情
alert("esc按键")
}
if (e.keyCode == 13) { // enter 键
//要做的事情
alert("enter按键")
}
if (e.keyCode == 8) { // enter 键
//要做的事情
alert("backspace按键")
}
};
鼠标事件:document.onkeydown = function
element.addEventListener('mousedown', function(event) {
// 处理鼠标按下事件
console.log('Mouse button pressed down!');
})
<!-- click - 用户单击鼠标按钮(通常是左键)。
dblclick - 用户双击鼠标按钮。
mousedown - 用户按下鼠标按钮。
mouseup - 用户释放鼠标按钮。
mousemove - 用户移动鼠标。
mouseenter - 鼠标进入元素。
mouseleave - 鼠标离开元素。
mouseover - 鼠标经过元素或其子元素。
mouseout - 鼠标离开元素或其子元素。 -->
浏览器滚动事件: window.onscroll
加:滚动事件性能优化(防抖,最后一次才触发)
<!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>获取窗口滚动距离</title>
</head>
<body>
<div style="height:1400px;width:30px;background:Red;"></div>
<p>我在这</p>
<p>我在这</p>
<p>我在这</p>
<p>我在这</p>
<p>我在这</p>
<p>我在这</p>
<script>
// 防抖
function debounce(func, wait) {
if (typeof func !== 'function') {
throw new TypeError('need a function arguments')
}
let timeid = null;
let result;
return function () {
let context = this;
let args = arguments;
if (timeid) {
clearTimeout(timeid);
}
timeid = setTimeout(function () {
result = func.apply(context, args);
}, wait);
return result;
}
}
// 滚动事件
window.onscroll = debounce(function () {
console.log('scrollY', window.scrollY)
},500)
</script>
</body>
</html>
网页资源加载完事件: window.onload
html标签加载完事件(图片,css,js资源没有加载完):function load()
<html>
<head>
<meta charset="utf-8">
<title>网页加载完成</title>
<script>
function load() {
alert("页面已经载入!");
}
</script>
</head>
<body onload="load()">
<h1>Hello World!</h1>
</body>
</html>
======
事件扩散两者方式
冒泡,捕获
冒泡:之所以称之为事件冒泡是指事件的响应会像水泡一样上升至最顶级对象,当父div与子div共同加入了onclick事件时,当触发了子div的onclick事件后,子div进行相应的js操作。但是父div的onclick事件同样会被触发。这就造成了事件的多层并发,导致了页面混乱。这就是冒泡事件。
<!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>
<style>
.big{
padding:50px;
background-color: pink;
}
.small{
width: 50px;
height: 50px;
background-color: green;
}
</style>
<body>
<p>冒泡事件:点击小的div会触发大的div的事件</p>
<div class="big ">
<div class="small"></div>
</div>
<script>
window.onload=function(){
var big = document.querySelector('.big')
var small = document.querySelector('.small')
big.onclick=function(){
alert('big')
}
small.onclick=function(){
alert('small')
}
}
</script>
</body>
</html>
捕获:事件捕获与冒泡恰恰相反,事件冒泡我们从字面意思理解就是当用户行为触发我们页面的定义好的事件后,会有一个由内到外的一个冒泡过程,当鼠标点击或者触发dom事件时,浏览器会从根节点开始由外到内进行事件传播,即点击了子元素,如果父元素通过事件捕获方式注册了对应的事件的话,会先触发父元素绑定的事件
<!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>
<style>
.big{
padding:50px;
background-color: pink;
}
.small{
width: 50px;
height: 50px;
background-color: green;
}
</style>
<body>
<p>阻止冒泡事件:点击小的div不会触发大的div的事件</p>
<div class="big ">
<div class="small"></div>
</div>
<script>
//第三个参数默认是false,也就是默认冒泡的方式来扩散事件
//如果是true就是捕获
//冒泡:是子div的事件先执行
//捕获:是父div事件先执行
//onclick 绑定事件的方式,默认采用的是【冒泡】
//onclick 绑定的方式可不可以修改事件扩散触发的方式呢?【不可以】
window.onload=function(){
var big = document.querySelector('.big');
var small = document.querySelector('.small');
big.addEventListener("click",function(e){
alert('big')
},true)
small.addEventListener("click",function(e){
alert('small')
},true)
}
</script>
</body>
</html>
=======
阻止事件
阻止默认事件:e.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=a, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="https://www.baidu.com/" id="alink">百度</a>
<script>
window.onload=function(){
var alink=document.querySelector("#alink");
alink.onclick=function(e){
e.preventDefault()
}
}
</script>
</body>
</html>
阻止冒泡事件:e.stopPropagation()
<!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>
<style>
.big{
padding:50px;
background-color: pink;
}
.small{
width: 50px;
height: 50px;
background-color: green;
}
</style>
<body>
<p>阻止冒泡事件:点击小的div不会触发大的div的事件</p>
<div class="big ">
<div class="small"></div>
</div>
<script>
window.onload=function(){
var big = document.querySelector('.big');
var small = document.querySelector('.small');
big.onclick=function(){
alert('big');
}
small.onclick=function(e){
console.log('e',e)
if(e.shiftKey){
alert('small按下了shift键');
}else{
alert('small没有按下了shift键');
}
e.stopPropagation();
}
}
</script>
</body>
</html>
添加事件绑定和移除事件绑定
<!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>
<style>
.big{
padding:50px;
background-color: pink;
}
.small{
width: 50px;
height: 50px;
background-color: green;
}
*{
user-select:none;
}
</style>
<body>
<p>事件 添加和移除(可以多次添加)</p>
<div>
<button id="add">给绿色块加点击事件</button>
<button id="remove">移除点击事件</button>
</div>
<div class="big ">
<div class="small"></div>
</div>
<script>
window.onload=function(){
/***
* handlerFunArr,index 都是演示目的,不在学习范围内
*
**/
var handlerFunArr=[];
var index=0;
//因为addeventListenr add 同一个事件同一个函数只能添加一次
//所以这里动态生成100个匿名函数,并存到数组里面
for(let i=0;i<100;i++){
handlerFunArr.push(function (){
console.warn("我应该执行很多次的::"+i)
});
}
console.log("生成了100个不同的函数",handlerFunArr)
var small = document.querySelector('.small');
//新增一个【点击事件】 点阅
function add(){
console.log("已经添加了一个事件")
index++;
small.addEventListener("click",handlerFunArr[index])
}
//移除一个 【点击事件】 订阅
function remove(){
small.removeEventListener("click",handlerFunArr[index])
if(index>0){
index--;
}
}
document.querySelector("#add").onclick=add;
document.querySelector("#remove").onclick=remove;
}
</script>
</body>
</html>