一.对象使用的高级
1,对象的key为字符串类型, value为任意类型
```js var obj = { name: "obj" } // 删除 delete obj.name // 添加 obj.age = 18 // 如果age的key已存在就是修改值, 不存在就是添加键值对, 添加的key任意 // 注: 获取的页面元素(标签对象)也可以任意添加/删除属性 ```
2, 对象的属性可以任意添加与删除
``js var obj = { name: "obj" } // 删除 delete obj.name // 添加 obj.age = 18 // 如果age的key已存在就是修改值, 不存在就是添加键值对, 添加的key任意 // 注: 获取的页面元素(标签对象)也可以任意添加/删除属性 ```
二,.页面标签全局属性操作
```js ele.getAttribute("alert"); // 获取页面标签ele的alert全局属性的值, 如果没有该全局属性值为null ele.setAttribute("attr_key", "attr_value"); // 页面标签ele已有该全局属性,就是修改值, 没有就是添加该全局属性并赋相应值 // 注: 一般应用场景, 结合css的属性选择器完成样式修改 ```
三,事件
1,事件的绑定和取消
```js // 第一种 box.onclick = function(){} // 只能绑定一个实现体, 如果有多次绑定, 保留最后一次 // box.onclick = null来取消事件的绑定 // 第二种 var fn = function() {} box.addEventListener('click', fn) // 能绑定多个实现体, 如果有多次绑定, 按顺序依次执行 // box.removerEventListener('click', fn)来取消事件的绑定 // 了解: 第三个参数决定冒泡顺序(子父级谁先相应事件) ```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件的绑定与取消</title>
<style>
.box {
100px;
height: 100px;
background-color: orange;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="begin">开始</div>
<div class="event_on1">事件的绑定1</div>
<div class="event_on2">事件的绑定2</div>
</body>
<script>
// 每一个box点击都会toggle颜色, 当颜色都变成黑色, 取消所有点击事件,
// 点击开始, 重新获得点击事件(所有状态应该重置)
var beginBtn = document.querySelector('.begin');
var boxs = document.querySelectorAll('.box');
// 定义一个count计算器,计黑的个数
var count = 0;
// 启动服务
beginBtn.onclick = init;
// 开始功能
// function beginAction() {
// // 让所有box拥有点击事件
// }
// box点击切换颜色
function toggleColor() {
// console.log(this)
if (this.style.backgroundColor == "orange") {
this.style.backgroundColor = "black";
count++;
} else {
this.style.backgroundColor = "orange";
count--;
}
// 检测是否需要结束
count == 3 && overAction();
}
// 结束功能, 取消所有box点击事件
function overAction() {
for (var i = 0; i < boxs.length; i++) {
boxs[i].onclick = null;
}
}
// 重置功能, 并让所有box拥有点击事件
function init() {
for (var i = 0; i < boxs.length; i++) {
boxs[i].style.backgroundColor = "orange";
boxs[i].onclick = toggleColor;
}
// 计算器重置
count = 0;
}
// 启动服务
// init();
</script>
<script>
var event_on1 = document.querySelector('.event_on1');
// 事件绑定的第一种方式
event_on1.onclick = function () {
console.log(1)
};
event_on1.onclick = function () {
console.log(2)
}
// 事件绑定的第二种方式
var event_on2 = document.querySelector('.event_on2');
// 可以为一个元素绑定多个事件, 按绑定顺序依次执行
event_on2.addEventListener('click', function () {
console.log("a")
});
var action = function () {
console.log("b")
}
event_on2.addEventListener('click', action);
// 如何取消事件
event_on2.removeEventListener('click', action)
</script>
</html>
2,事件对象
``js // 系统回调事件函数时, 传递了一个 事件(event) 实参 // 如果要使用传递来的实参 事件(event), 定义接收的 形参 即可 box.onclick = function(ev){ // 使用事件对象 // 特殊按键 eg: ev.altKey: true | false // 鼠标触发点: ev.clientX | ev.clientY // 取消冒泡 ev.cancelBubber = true; // 取消默认事件 return false; } ```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件对象</title>
<style>
body {
margin: 0;
}
.box {
background-color: pink;
}
.sup {
200px;
height: 200px;
background-color: red;
}
.sub {
100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="box">12345</div>
<div class="sup">
<div class="sub"></div>
</div>
<a href="https://www.baidu.com">只想相应点击事件</a>
</body>
<script>
var box = document.querySelector('.box');
// 事件的钩子函数, 系统回调时传递了一个值, 该值为事件对象
box.onclick = function (ev) { // 回调函数
console.log(ev)
// 特殊按键 altKey | shiftKey | ctrlKey
console.log(ev.altKey)
// 鼠标的点击点
console.log(ev.clientX, ev.clientY)
}
</script>
<script>
var sup = document.querySelector('.sup');
var sub = document.querySelector('.sub');
// 事件默认有冒泡, 子级相应事件后,会将事件传递给父级,如果父级有相同事件,也会被激活, 最终传递给document
sub.onclick = function (ev) {
console.log(ev);
// 取消冒泡, 当自身处理事件后, 该事件就处理完毕, 结束, 不再向上传递
ev.cancelBubble = true;
console.log("子级被点击了")
};
sup.onclick = function () {
console.log("父级被点击了")
};
document.onclick = function () {
console.log("文档被点击了")
}
</script>
<script>
// 默认事件
var aBtn = document.querySelector('a');
aBtn.onclick = function (ev) {
ev.cancelBubble = true;
console.log("a被点击了");
// 手动转跳页面
open('https://www.oldboyedu.com', '_self');
// a标签默认会完成转跳, 如果取消默认事件
return false;
}
</script>
</html>
五,循环绑定之变量污染
本质原因:没有区分作用域,
解决方法:
1, 利用块级作用域解决
2, 利用块级作用域解决
3,利用闭包处理循环绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>循环绑定</title>
</head>
<body>
<div class="box">0000000000000000001</div>
<div class="box">0000000000000000002</div>
<div class="box">0000000000000000003</div>
</body>
<script>
var divs = document.querySelectorAll(".box");
/* 存在污染
for (var i = 0; i < divs.length; i++) {
// i = 0 | 1 | 2 | 3
// 循环绑定
divs[i].onclick = function () {
console.log("***", i)
}
}
// i = 3
console.log(">>>", i);
*/
/* 利用块级作用域解决
for (let i = 0; i < divs.length; i++) {
// {i=0 <= i} {i=1 <= i} {i=2 <= i}
// i = 3
// 循环绑定
divs[i].onclick = function () {
console.log("***", i)
}
} // for运行结束, i=3会被销毁
console.log(">>>", i)
*/
// 利用标签的属性解决
/*
for (var i = 0; i < divs.length; i++) {
divs[i].index = i;
divs[i].onclick = function () {
// console.log("###", i)
console.log(this.index)
}
}
*/
// 利用闭包处理循环绑定
for (var i = 0; i < divs.length; i++) {
(function () {
var index = i;
divs[index].onclick = function () {
console.log("###", index)
}
})()
/*
(function (index) {
divs[index].onclick = function () {
console.log("###", index)
}
})(i)
*/
/*
(function (i) {
divs[i].onclick = function () {
console.log("###", i)
}
})(i)