前端學習第66天js高階
阿新 • • 發佈：2018-12-20
一.物件使用的高階
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 {
width: 100px;
height: 100px;
background
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 {
width: 200px;
height: 200px;
background-color: red;
}
.sub {
width: 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)