js基礎公升級4

2021-09-11 11:19:24 字數 1873 閱讀 1983

1.事件委託

就是將目標節點的事件繫結到祖先節點上,這樣在事件傳播的過程中,逐層冒泡總能被祖先節點捕獲。

而且也解決了如果動態新增節點時,無法給新的節點新增事件的弊端。

var mylist = document.getelementsbyclassname("ulclass")[0]

mylist.addeventlistener("click", function (evt)

}, false)

2.滑鼠事件

onmouseover // 註冊滑鼠經過時事件處理函式

onmouseout // 註冊滑鼠移開時事件處理函式

onmousedown // 註冊滑鼠按下時事件處理函式

onmouseup // 註冊滑鼠鬆開時事件處理函式

onmousemove // 註冊滑鼠移動時事件處理函式

onclick // 註冊滑鼠單擊時事件處理函式

ondblclick // 註冊滑鼠雙擊時事件處理函式

拖動元素

// 初始化拖放物件

var box = document.getelementbyid("box");

// 獲取頁面中被拖放元素的引用指標

box.style.position = "absolute"; // 絕對定位

box.style.width = "160px"; // 定義寬度

box.style.height = "120px"; // 定義高度

box.style.backgroundcolor = "red"; // 定義背景色

// 初始化變數,標準化事件物件

var mx, my, ox, oy; // 定義備用變數

function e(event)

// 進行相容性的配置

event.mx = event.pagex || event.clientx + document.body.scrollleft;

// 計算滑鼠指標的x軸距離

event.my = event.pagey || event.clienty + document.body.scrolltop;

// 計算滑鼠指標的y軸距離

return event; // 返回標準化的事件物件

}// 定義滑鼠事件處理函式

document.onmousedown = function(event)

function move(event)

function stop(event)

3.監聽按鍵響應

var box = document.getelementbyid("box");    // 獲取頁面元素的引用指標

box.style.position = "absolute"; // 色塊絕對定位

box.style.width = "20px"; // 色塊寬度

box.style.height = "20px"; // 色塊高度

box.style.backgroundcolor = "red"; // 色塊背景

document.onkeydown = keydown;

// 在document物件中註冊keydown事件處理函式

function keydown(event)

return false

}

js基礎知識4

1.自執行函式 閉包 解決全域性汙染的問題 function 2.client 螢幕可視區域 view code 3.offset view code 4.scroll 青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青青 青青青青青青青青青青青青青青青青青青青青青青青青...

js基礎運用 day4

通過prototype屬性拓展js api的物件的功能 新增trim方法 reverse方法 tochararray方法 以及為其shift unshift 方法弄個別名,還有寫乙個println 函式。function print str function println str 通過protot...

JS基礎知識積累4

do while結構 for迴圈結構 while 條件 true false 判斷條件是否成立,如果成立,執行迴圈體 重新判斷條件是否成立 如果不成立,跳出迴圈,執行大括號之後的 條件語句可以是 關係表示式 布林型別的值 其他型別的值 都會轉換成布林型別 do while 判斷條件 true fal...