JavaScript筆記12：控制CSS、事件、定時器

學JAVA的好人發表於2020-10-21
JavaScript筆記CSS事件定時器

目錄

 

js控制css

其他樣式相關屬性

事件的冒泡

事件的委派

繫結多個響應函式

單個：“物件.事件 = 函式”單個

多個：addEventListener()方法

多個：attachEvent()函式繫結

相容所有瀏覽器的版本

事件的傳播

滾輪事件

鍵盤事件

瀏覽器物件模型BOM

定時器

  1. js控制css

// 語法：
元素.style.樣式名 = 樣式值

  1. 注意：在CSS中的樣式名如果含有“-”，則這種名稱在JS中是不合法的。則這種名稱需要修改為駝峰命名法（即去掉減號，把減號後的第一個字母改大寫）

  2. 通過style屬性設定的樣式都說內聯樣式，而內聯樣式有較高的優先順序，所以通過js修改的樣式往往都會立即顯示。但是如果在樣式中寫了!important，則此時樣式會具有最高優先順序，即使是通過js也不能進行覆蓋，此時將會導致js樣式失效。所以儘量不要使用！important

  3. 通過style屬性只能讀取內聯樣式，無法讀取樣式表中的樣式

// 獲取元素的當前顯示的樣式
元素.currenStyle.樣式名

  1. 注意：currenStyle只有IE瀏覽器支援=

 // getComputedStyle()語法
 兩個引數：
1、要獲取樣式的元素
2、可以傳遞一個偽元素，一般都是傳null

 

var timer = setInterval(function(){
    console.log(num++);
}, 100)；

clearInterval()函式關閉一個定時器

 

 

clearInterval(timer);

setTimeout()函式延時呼叫

 

 

setTimeout(function(){
	console.log(num++);
},3000)；

 

 

  1. 在其他瀏覽器中可以使用getComputedStyle()這個方法來獲取元素當前的樣式

  2. getComputedStyle()是window的方法，可以直接使用

  3. 兩個引數：

    1. 要獲取樣式的元素

    2. 可以傳遞一個偽元素，一般都是傳null

  4. 該方法會返回一個物件，物件中封裝了當前元素對應的樣式

  5. 可以通過“物件.樣式名”來讀取樣式

  6. 如果獲取的樣式沒有設定值，則會獲取到真實的值，而不是預設值。比如：沒有設定width，它不會獲取到auto，而是一個長度

  7. 注意：不支援IE8及以下的瀏覽器

  8.  

     

    // 定義一個函式，用來獲取指定元素的當前樣式
// 引數：1、obj：要獲取樣式的元素；2、name：要獲取的樣式名
function getStyle(obj, name){
	if(getComputedStyle){
		return getComputedStyle(obj, null)[name];
	}else{
		return obj.currentStyle[name];
	}
}

     

  9. 其他樣式相關屬性

    1. 我跳了……（110P）

  10. 事件的冒泡

    1. 指定的是事件向上傳導，當後代元素上的事件被接觸時，其祖先元素的相同事件也會被觸發

    2. 取消冒泡：將事件物件的cancelBubble屬性設定為true即可取消冒泡

  11. 事件的委派

    1. 事件的委派指的是將事件統一繫結給元素的共同祖先元素，這樣後代元素上的事件觸發時，會一直冒泡到祖先元素，從而通過祖先元素的響應函式來處理事件

    2. 利用了事件的冒泡，通過委派可以減少繫結的次數，提高效能

  12. 繫結多個響應函式

    1. 單個：“物件.事件 = 函式”單個

      1. 使用物件.事件 = 函式的形式繫結響應函式，只能同時為一個元素繫結一個響應函式

      2. 不能繫結多個，繫結多個時，最後一個會把前面的覆蓋

    2. 多個：addEventListener()方法

      1. 通過這個方法可以為元素繫結多個響應函式

      2. 引數

        1. 事件的名稱（字串，不要on，如onclick寫click即可）

        2. 回撥函式，當事件出發時該函式會被呼叫

        3. 是否在捕獲階段觸發事件，需要一個布林值，一般傳false

      3. false時，先繫結先執行；true時，先繫結後執行

      4. this是繫結事件的物件

      5. 不支援IE8及以下瀏覽器

  13. 多個：attachEvent()函式繫結

    1. 後繫結先執行

    2. 在IE8及以下中使用

    3. this是window

    4. 引數：

      1. 事件名稱，需要on

      2. 回撥函式

    5.  

      btn01.attachEvent("onclick", function(){
	alert(1);
});

       

    6. 相容所有瀏覽器的版本

      1. 引數：

        1. obj：要繫結事件的物件

        2. eventStr：事件的名稱，字串，不要on

        3. callback：回撥函式

    7.  

      function bind(obj, eventStr, callback){
	if(obj.addEventListener){
		obj.addEventListener(eventStr, callback, false);
	}else{
		obj.attachEvent("on" + eventStr, function(){
	    // 匿名函式中呼叫回撥函式
	    // 下面的方法可以把this從window改為呼叫物件
	    callback.call(obj);
});
	}
}

       

    8. 事件的傳播

      1. 三個階段：

        1. 捕獲階段:

          1. 在捕獲階段時從最外層的祖先元素向目標元素進行事件的捕獲，但是預設此時不會觸發事件

          2. IE8及以下，沒有捕獲階段

        2. 目標階段:

          1. 事件捕獲到目標，捕獲結束開始在目標元素上觸發

        3. 冒泡階段：

          1. 事件從目標元素向他的祖先元素傳遞，依次觸發祖先元素上的事件

  14. 滾輪事件

    1. onmousewheel滑鼠滾輪滾動事件

    2. event.wheelDelta 判斷滾輪滾動的方向(正值是向上，負值是向下)

    3. 滾輪滾動時，如果瀏覽器的滾條隨之滾動，這是瀏覽器的預設行為，可以通過return false來取消預設行為

  15. 鍵盤事件

    1. 鍵盤事件：

      1. onkeydown：按鍵被按下，按下不放時事件會連續觸發。連續觸發時，第一次後會停頓一下，之後會很快執行下一次

      2. onkeyup：按鍵被鬆開

    2. 鍵盤事件一般會繫結給一些可以獲取到焦點的物件，或者是document

    3. 四個屬性：

      1. keyCode屬性

        1. 可以通過keyCode屬性來獲取按鍵的編碼，可以判斷是哪個按鍵（注意：使用英文輸入法，中文會一直是229）

      2. altkey

      3. ctrlkey

      4. shiftkey

      5. 這三個屬性用來判斷alt、ctrl、shift是否被按下，按下返回true，否則返回false

  16. 瀏覽器物件模型BOM

    1. BOM可以是我們通過JS來操作瀏覽器

    2. BOM物件：

      1. window：

        1. 代表整個瀏覽器的視窗，同時也是網頁中的全域性物件

      2. Navigator：

        1. 代表當前瀏覽器的資訊，通過該物件可以識別不同的瀏覽器

      3. Location：

        1. 代表當前瀏覽器的位址列資訊，通過Location可以獲取位址列資訊，或者操作瀏覽器跳轉頁面

        2. 直接列印location會列印出當前頁面的完整路徑

        3. 直接修改location屬性的值為一個完整的路徑，則頁面會自動跳轉到該路徑，並生成相應的歷史記錄

        4. assign()方法：用來跳轉到其他頁面，效果個直接修改location的值一樣

        5. reload()方法：重新整理，重新載入當前頁面

          1. 傳入true時，會強制清空快取重新整理頁面

        6. replace()方法：使用一個新頁面替換當前頁面，不會生成歷史記錄

      4. History

        1. 代表瀏覽器的歷史記錄，可以通過該物件來操作瀏覽器的歷史記錄

        2. 由於隱私問題，該物件不能獲取到具體的歷史記錄，只能操作瀏覽器向前或向後翻頁，而且該操作只在當次訪問有效

        3. lenght屬性：可以獲取當前訪問的連結數量

        4. back()方法：可以用來回退到是一個頁面

        5. forward()方法：可以用來跳轉到下一個頁面

        6. go()：可以跳轉到指定的頁面，需要一個整數作為引數

          1. 0是當前頁面

          2. 正數是向前跳轉n個頁面

          3. 負數是向後跳轉n個頁面

      5. Screen

        1. 代表使用者的螢幕資訊，通過該物件可以獲取到使用者的顯示器的相關資訊

  17. 定時器

    1. setInterval()函式開啟定時器

      1. 定時呼叫，每隔一段時間呼叫一次函式

      2. 引數：

        1. 回撥函式，該函式會每隔一段時間被呼叫一次；

        2. 每次呼叫間隔的時間，單位是毫秒

      3. 返回值：

        1. 返回一個Number型別的資料，該資料作為該定時器的唯一標識

    1. clearInterval(計時器標識)用來關閉一個定時器

    2. 可以接受任意識別符號，如果是有效定時器則停止，如果不是則沒有效果

    1. 延長一段時間之後再呼叫函式執行，只執行一次

相關文章