const 声明
早些时候js声明变量只能使用var,es6(新版本的js)出现之后,只使用let 或者const
区别:
let 声明的变量可以被修改
const声明的变量不可以被修改,const常量,固定不变!!
作用:
在程序设计的时候,如果发现有一些数据永远不会被更改,优先使用const(后期不小心修改了,会报错-去解决错误)
能用const就用const,不能就用let,永远不要用var
判断是不是修改 看它有没有重新写 = 号或者自增自减少 !!!
补充
<script>
// const num = 1;
// num = 2;
// console.log(num);//报错
// 复杂类型的数据 补充
// const 声明的变量不能被修改
// const num = 1;
// num = 2;
// const arr=[];
// // arr.push("呵呵");// 新增一个元素 但是并没有修改过 数组的地址//不会报错
// arr=123;// 修改会报错
// console.log(arr);
/*
const 声明的变量不能被修改
1 普通类型的数据 直接写 = ，表示修改数据 报错
2 复杂类型的数据 直接写 = ， 表示修改 报错,如用数组增加删除下标就不会报错
3 复杂类型的数据 写 = 相当于重新开辟新空间
*/
// const obj = {};
// obj.name = '悟空';
// // console.log(obj);
// obj = 123; // 报错 = 出现=> 开启新的内存空间 报错
const index = 10;
index++; // index = index + 1 //报错
</script>
事件对象
事件对象是什么:也是个对象,这个对象里有事件触发时的相关信息
例如:鼠标点击事中,事件对象就存了鼠标点在哪个位置等信息
如何获取:在事件绑定的回调函数的第一个参数就是事件对象,一般命名为event,ev,e
元素.addEventListener('click',function (event) {
})
部分常用属性
<body>
<div>点击点击</div>
<script>
// 获取按钮
const btn = document.querySelector('div');
//mousemove鼠标移动触发事件
btn.addEventListener('mousemove', function (event) {
// console.log(event.type); // 输出当前的事件类型 少用
// console.log(event.clientX,event.clientY ); // 返回 鼠标的位置-参照物 页面的左上角即可
console.log(event.offsetX,event.offsetY);// 返回鼠标的坐标，参照物 是被点击的元素的左上角
});
</script>
</body>
键盘事件
<body>
<script>
// 给body标签 绑定 键盘按下事件 keydown
document.body.addEventListener('keydown', function (event) {
console.log(event.key);// 当下按下的按键 ！ 输出的是字符串
});
</script>
</body>
事件流动--两个阶段(捕获.冒泡)
事件冒泡
概念:当一个元素的事件被触发时,同样的事件将会在该元素的所以祖先元素中依次被触发.这一过程被称为事件冒泡
简单理解:当一个元素触发后,会依次向上调用所有父级元素的同名事件,事件冒泡是默认存在的
事件捕获
概念:从DOM的根元素开始去执行对应的事件(从外到里)
修改事件流动方向
我们可以修改触发事件 让它选择使用 捕获阶段还是冒泡阶段（默认）
addEventListener 可以选择使用冒泡还是捕获
addEventListener(事件类型，事件处理函数，捕获还是冒泡（默认值 false,可以省略）)
addEventListener("click",function(){}, true )
例案代码
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: 200px;
height: 200px;
padding: 20px;
overflow: hidden;
}
.a {
background-color: red;
}
.b {
background-color: blue;
}
.c {
background-color: green;
}
</style>
</head>
<body>
<div class="a">
爷
<div class="b">
爸
<div class="c">儿</div>
</div>
</div>
<script>
const a = document.querySelector('.a');
a.addEventListener(
'click',
function () {
console.log('a');
},
true
); // 捕获
const b = document.querySelector('.b');
b.addEventListener(
'click',
function () {
console.log('b');
},
true
); // 捕获
const c = document.querySelector('.c');
c.addEventListener(
'click',
function () {
console.log('c');
},
false
);
阻止冒泡
<title>03-阻止冒泡</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: 200px;
height: 200px;
padding: 20px;
overflow: hidden;
}
.a {
background-color: red;
}
.b {
background-color: blue;
}
.c {
background-color: green;
}
p {
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<p>1</p>
<div class="a">
爷
<div class="b">
爸
<div class="c">儿</div>
</div>
</div>
<script>
const p = document.querySelector('p');
const a = document.querySelector('.a');
a.addEventListener(
'click',
function () {
p.style.backgroundColor = 'red';
p.innerText = +p.innerText + 1;
console.log('a');
}
);
const b = document.querySelector('.b');
b.addEventListener(
'click',
function (event) {
console.log('b');
p.innerText = +p.innerText + 10;
p.style.backgroundColor = 'blue';
// 阻止事件冒泡
event.stopPropagation();
}
);
const c = document.querySelector('.c');
c.addEventListener(
'click',
function (event) {
console.log('c');
p.innerText = +p.innerText + 100;
p.style.backgroundColor = 'green';
// 阻止事件冒泡
event.stopPropagation();
}
);
/*
在事件对象中 event 找到一个方法 停止冒泡 event.stopPropagation();
实现点击子元素不会触发父元素
*/
</script>
</body>
补充
阻止默认行为
1阻止a标签默认跳转
2阻止form表单中button点击的刷新行为
form表单中button点击刷新行为
1 阻止默认行为 - form表单 有一个 submit 事件 理解提交表单的触发-点击按钮的时候触发
2 给button按钮绑定点击事件 也去阻止试试
3 给button按钮 添加一个 type="button" 属性
4 换成 input标签 type="button"
5 把button 移出form表单的区域
<body>
<form >
<!-- <button type="button">点击我 就会自动刷新</button> -->
<!-- <input type="button" value="点击我"> -->
<button>刷新</button>
</form>
<script>
const form=document.querySelector("form");
const button=document.querySelector("button");
form.addEventListener("submit",function (event) {
// 1不要让页面再刷新
event.preventDefault();
})
// button.addEventListener("click",function (event) {
// event.preventDefault(); // 2不要让页面再刷新
// })
</script>
</body>
3鼠标右键自定义菜单
<title>05-阻止默认行为.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
}
.menu {
list-style: none;
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
width: 150px;
position: fixed;
display: none;
}
li {
height: 40px;
display: flex;
align-items: center;
padding-left: 10px;
border-bottom: 1px solid #ccc;
}
li:hover {
background-color: skyblue;
color: #fff;
cursor: pointer;
}
li:last-child {
border-bottom: none;
}
</style>
</head>
<body>
<ul class="menu">
<li>添加图标</li>
<li>切换壁纸</li>
<li>下载壁纸</li>
<li>设置</li>
</ul>
<script>
const menu = document.querySelector('.menu');
// 鼠标右键不要弹出 默认的菜单
// 绑定鼠标右键事件 在 阻止默认行为
// contextmenu 鼠标右键
document.body.addEventListener('contextmenu', function (event) {
event.preventDefault();
// 坐标
const left = event.clientX;
const top = event.clientY;
menu.style.display = 'block';
menu.style.left = left + 'px';
menu.style.top = top + 'px';
});
document.body.addEventListener('click', function () {
menu.style.display = 'none';
});
</script>
</body>
事件委托
优点:给父级元素添加事件,子元素也可以触发(可以提高性能)
原理:事件委托其实是利用事件冒泡的特点,给父元素添加事件子元素可以触发
例案
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul{
width: 500px;
background-color: aqua;
padding: 50px;
}
li{
background-color: yellow;
height: 50px;
}
a{
background-color: sandybrown;
}
</style>
</head>
<body>
<ul>
<li><a href="#">1</a></li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
// 事件委托
// 本来想要给li标签绑定事件实现业务
// 把事件绑定写在 父元素上 把li标签应该要做的事情 委托给父元素来做！
const ul=document.querySelector("ul");
ul.addEventListener("click",function (event) {
// event.target 有可能是ul标签，有可能是li标签，还有可能是 a标签
// 一会再来解决这个问题。
event.target.style.backgroundColor="red";// 不够完美的
// event.target 你当前点击的是哪个标签（点击最深最底层的那个标签即可）
// console.log(event.target);// 获取到被点击的li标签
})
</script>
</body>
优化:实现只点击父元素中的某一个子元素实现需求
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
width: 500px;
background-color: aqua;
padding: 50px;
}
li {
background-color: yellow;
height: 50px;
}
a {
background-color: sandybrown;
}
</style>
</head>
<body>
<ul>
<li><a href="#">1</a></li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
const ul = document.querySelector('ul');
ul.addEventListener('click', function (event) {
// event.target.style.backgroundColor="red";
// console.log(event.target);
// 只有点击了li标签才触发
// console.log(event.target.nodeName);// 当前点击的元素的标签名 大写
if (event.target.nodeName === 'LI') {
console.log('改变颜色');
event.target.style.backgroundColor = 'red';
}
});
</script>
</body>
滚动事件
当页面进行滚动时触发的事件
应用:很多网页需要检测用户把页面滚动到某个区域后做一些处理,比如固定导航栏,返回顶部
事件名:scroll
1监听整个页面滚动
<script>
window.addEventListener("scroll",function () {
console.log("滚动啦 ");
})
</script>
2监听某个元素滚动
<style>
div{
width: 200px;
height: 400px;
overflow: auto;
background-color: aqua;
}
</style>
</head>
<body>
<div>
<h1>1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>
<h1>6</h1>
<h1>7</h1>
<h1>8</h1>
<h1>9</h1>
<h1>10</h1>
<h1>11</h1>
<h1>12</h1>
<h1>13</h1> .......
<script>
const div=document.querySelector("div");
div.addEventListener("scroll",function () {
console.log("div又开始滚啦");
})
</script>
获取滚动距离
<script>
// 页面级别的滚动
window.addEventListener("scroll",function () {
// 这个代码可以获取到当前页面的滚动距离
console.log(document.documentElement.scrollTop);
})
</script>
