Dom.多元素點選事件的問題和解決方案
阿新 • • 發佈：2021-01-03
技術標籤：javaScriptjavascriptdom操作
多元素點選事件的問題:
<body>
<div class="nav">
<li>tab_01</li>
<li>tab_02</li>
<li>tab_03</li>
<li>tab_04</li>
<li>tab_05</li>
<li>tab_06</li> 解決方法一:
避免使用 li ,i 尋求替換的方案
li -> this(屬於誰就指向誰)
i -> 遍歷元素時 提前給每個元素 自定義一個屬性 記錄每個元素的編號(下標)
<script>
var liList = document.querySelectorAll 解決方法二:
原本的程式碼找全域性的 (li ,i) => 繫結事件是巢狀一個函式(引數傳參) ,變相的找迴圈當前的區域性變數
<script>
var liList = document.querySelectorAll(".nav li");
for(var i = 0; i < liList.length ; i++ ){
var li = liList[i];
//頁面載入時立即執行 => 給傳入的元素綁定了一個事件
(function(li,i){ //形式引數 區域性變數
li.onclick = function(){
console.log(li,i)
}
})(li,i) //實際引數
}
//console.log(li,i) //程式碼載入完畢 li和i :
//問題:每次點選都會輸出<li>tab_06</li> 6 因為點選的時候外面的for已經執行完畢!
</script>
解決方法三:
<script>
var liList = document.querySelectorAll(".nav li");
for(let i = 0; i < liList.length ; i++ ){
let li = liList[i];
li.onclick = function(){
console.log(li,i)
}
}
}
//console.log(li,i);
</script>
ES6新增的宣告變數的方式:
let和var的共同點和區別:
共同點:
都可以用來宣告全域性變數和區域性變數
區別:
1.var宣告的變數 有變數提升,let宣告的變數沒有變數提升
2.var宣告的變數可以重複宣告,let不可以重複宣告(但可以重新賦值)
let a =100;
let a = 1000; (這裡就會報錯,因為不能重複宣告)
3.在塊級作用域中,let宣告的區域性變數,但在塊級作用域中對var沒有影響
ES6新增的塊級作用域
全域性作用域
區域性作用域(函式作用域/塊級作用域)
在塊級作用域中 通過let和const宣告的變數是區域性變數,塊級作用域對var沒有影響(如果所處作用域為全域性作用域,則是全域性變數,如果所處的作用域為函式作用域,則是區域性變數)
function fn(){ //這裡就是函式作用域 ,沒有這個函式就是全域性作用域
{
var a = 100; //區域性的a
var b = 200;
console.log(a,b) //這裡不影響 , a和b都會被打印出來
}
console.log(a,b) //這裡會報錯,b沒有別定義;
}
塊級作用域就是帶有{}的執行區域
if(){}
if...else
switch()
for while do....while
或者我單獨定義一個花括號也可以
{
var a = 100; //全域性的a
var b = 200;
console.log(a,b) //這裡不影響 , a和b都會被打印出來
}
console.log(a,b) //這裡會報錯,b沒有別定義;