亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

阻止默認事件
a標簽

阻止默認行為：

preventDefault();

return false

什么是事件對象：事件觸發時候自動創建的，封裝了事件發生的元素和屬性信息。

var obj3 =document.getElementById('demo3') //獲取demo3對象

obj3.addEventListener('click',function(e)//給demo3綁定事件監聽? 傳入函數function，事件觸發的時候就自動創建了一個e 就是event,就是事件對象。事件對象傳入進來之后，做了一個判斷，

{

var e=e||window.event;

if(e.target.nodeName.toLowerCase() =='div'){//target事件觸發的事件對象

alert(e.target.innerHTML);

}

},

false;//true是捕獲，false 是冒泡

)

事件的周期：

事件捕獲，事件對象的觸發，冒泡觸發

事件冒泡應用：1阻止冒泡 e.stopPropagation()

當沒有阻止冒泡適合 可以做事件委托。

var obj2 = document.getElementById('demo2')

obj2.addEventlistener('click',function(e){

var e=e||window.event;

if(e.target.nodeName.toLowerCase() =='li'){//當前觸發對象是父元素下面的li,就彈出li的內容

alert(e.target.innerHTML);

}

},false

)

【對父元素綁定一個點擊事件，利用冒泡原來當點擊子元素觸發對應的點擊事件】

1html事件

通過 onclick 綁定一個函數。

例如：<input type="button" value="html事件點擊" onclick="fun()">
<script>

function fun(){

alert('hello MOOC')

}

主要是操作簡單的點擊事件

</script>

2DOM0級事件

事件綁定

例如：

<input type="buttom" value="dom0級事件” id="btn">

<script>

document.getElementById("btn").onclick = function(){

alert('hello MOOC2')

}

</script>

通過js語法獲取DOM對象，通過onclick? 等綁定一些事件。相當于一個分離了，邏輯操作跟結構是分開的。這樣比較清晰。

3DOM2級事件

事件監聽? 【通過element（對象）.addEvenListener（函數）（event【事件名】, function【函數】, useCaptrue【可選指定事件是否捕獲冒泡階段執行。true執行，默認false.】(事件對象）)來做事件的監聽】

removeEventListener移除事件監聽

例如：

<inpunt type="button" value="dom2級事件" id="btn1">
<script>

document.getElementById("btn1").addEventListener("click",fun2);

function fun2(){

alert('hello MOOC3')

}

</script>

(后兩種用的比較多)

事件監聽可以綁定多個事件（可以觸發多個綁定事件）

事件綁定只能綁定一個事件（如果同時綁定兩個點擊事件，只執行最后一個綁定事件）

原因：js中不支持事件的重載，如果再綁定一個事件，相當于變量指向另外一個新的函數地址。

解析過程中：

1遇到link的外部css,遇到css的代碼會進行css的加載，并行。

2遇到script標簽的時候，會先去執行js的內容，直至腳本完成執行，然后繼續構建DOM。

底部引用JavaScript代碼的原因，或者說可以再頭部引用，但是前提是加上async,defer,或者window.onload;

解析器遇到設置了async（異步）屬性的script 開始下載腳本并繼續解析文檔，腳本會在她下載完成后盡快執行。而defer同樣是異步但是她會再文檔渲染完畢后，DOMcontentLoaded事件調用前執行，腳本會被延遲到整個頁面都解析完畢后再運行。

async和defer都是異步的，并不影響我們整個DOM樹的構建。

css有自己的解析器，每個css文件解析為樣式表對象CSSStyleSheet。生成css樹

構建渲染樹：DOM樹+CSS樹

布局layout與繪制paint:計算對象之間的大小，距離確定每個節點再屏幕上的確切坐標，映射瀏覽器屏幕繪制。使用UI后端層繪制每個節點。

reflow(回流)：回流一定會重繪。相當于刷新頁面

repaint(重繪)：不一定引起回流。局部改變背景色 字體顏色這些。

escape:除了ASCII（a-z，0-9）編碼

unescape:解碼

js的全局函數，js中內置的可以直接使用

比較實用：

encodeURI()編碼：主要對漢字進行編碼

decodeURI()解碼

console.log(encodeURI(url))

var ec = encodeURI(url)

console.log(decodeURI(ec)) 用的比較多， ios 等里面都用的上

var? now = new Date()

console.log(now.getTime()) //? 1608908483092 :1970 1 1 0至今的一個毫秒數
console.log(now.getDay())//5 本周的第幾天

console.log(now.getDate())// 25號 本月幾號

console.log(now.getMonth()+1)//注意 月要+1 原本是0-11加上1才是1-12

獲取時間 now:本地客戶端時間是可以修改的 要從后端獲取才能準確。

固定的時間段可從前端獲取。

sort方法:1.默認升序
? ? ? ? ? ? ? ?2.將排序的元素轉化為字符串；找對應字符串的Unicode碼表。

（Unicode碼表：abc 1,好）
console.log(arr.sort())

【解決方法】

1. 定義一個比較器函數sort(callback)

2. function(x,y){return x-y}小于0 x移到y前面， 大于0 x移到y后面，等于0不變。

例子：
var? arr=[3,25,15,18,9,22]

arr.sort(function(x,y){

return x-y

})

console.log(arr)//3,9,15,18,22,25

或者直接調用內部方法reverse

console.log(arr.reverse())

手寫一個bind方法

匿名函數優點

JS中有哪些數據類型？

一、原始類型（基本類型）：

Undefined、Null、Boolean、Number和String

二、引用類型（復雜類型）：

Object

常見函數的四種類型

1. 匿名函數-定義時候沒有任何變量引用的函數

   匿名函數自調：如果函數只執行一次

   （function(a,b){

   ? ? ? console.log('a = ', + a)
   

   ? ? ??console.log('b = ', + b)

   })(1, 2）;
   

2. 回調函數

3. 遞歸函數

4. 構造函數

   
   

BOM瀏覽器對象模型

history 棧

window.history屬性指向 History 對象，表示當前窗口的瀏覽歷史 www.baidu.com

History.back()、 History.forward()、 History.go()

History.pushState(), History.replaceState()

Location 對象window.location和document.location屬性 可以拿到這個對象

location.herf 整個UIRL

Location.protocol 當前URL的協議 包括冒號（:）和端口

Location.port 端口號

Location.pathname URL 的路勁部分，從根路勁開始

Location.search 查詢字符串部分 從問號？開始

Location.hash 片段字符串部分 從#開始

Location.username 域名前面的密碼

Location.origin URL 的協議、主機名和端口

// 事件委托

var obj2 = document.getElementById('demo2')

obj2.addEventListener('click', function(e){

????var e = e || window.event;

????if(e.target.nodeName.toLowerCase() == 'li' { // IE8: e.srcElement

????????alert(e.targe.innerHTML);

????}

}, false);

堆就是在棧中存儲一個地址? 通過地址找到對應的數據??

棧就是原始類型的數據存儲? 就像鴨子彈一樣??

閉包是指有權訪問另一個函數作用域中的變量的函數。——《JavaScript高級程序設計》