DOM事件彙總

2021-10-07 03:05:42 字數 1161 閱讀 3772

今天的話主要是說了dom的事件流,事件**和dom事件操作方法。

那下面簡單的捋一下思路

1⃣,首先說下dom事件流,那麼何為事件流?就是乙個事件它觸發的過程。那dom的事件流就是當我們觸發乙個事件,它會先進行事件捕獲,然後處於目標階段,事件冒泡。

那你又會問了,什麼是事件捕獲,事件冒泡?

事件捕獲:就是當我們觸發乙個事件,他不會立即執行,而是從上到下,從document一直向下捕獲 直到捕獲到目標階段。

那我們怎麼阻止預設行為呢?

js寫法:. preventdefault

vue寫法:. captrue

那麼事件冒泡:就是當我們觸發乙個事件,它會立刻執行,從這個時間一直向上直到document結束。

如何阻止事件冒泡?

js寫法:. stopprogation

vue寫法:. stop

(一般來說,阻止冒泡一般設在你想要在哪阻止的那一級標籤上)

2⃣,那麼說到了事件流,還可能會說到事件**,那麼所謂**呢,就是讓別人來做,這個事件本來是加在某些元素上的,然而你卻加到別人身上來做,完成這個事件。那麼事件**分別為js的寫法和jq的寫法:

js寫法思路:

會用到事件源 event物件 事件源 不管在哪個事件中

只要你操作的那個元素就是事件源

ie : window.event.srcelement

標準下:event.target(主要方法)

nodename: 找到元素的標籤名

-------**栗子-------

var item1 = document.getelementbyid(「gosomewhere」);

var item2 = document.getelementbyid(「dosomething」);

var item3 = document.getelementbyid(「sayhi」);

document.addeventlistener("click", function (event) 

})

jq寫法思路:jquery事件主要是通過delegate()實現事件委託

格式:$(selector).delegate(childselector, event, data, function)

-------**栗子-------

DOM 事件(鍵盤事件)

onkeydown 事件會在使用者按下乙個鍵盤按鍵時發生。onkeydown onkeypress onkeyup onkeydown事件在很多小遊戲上應用較多,比如需要控制上下左右的很多遊戲,如2048,貪吃蛇,俄羅斯方塊等等。keydown function bind this 然後就可以通過鍵...

Dom事件鍵盤事件

dom0級事件元素繫結多個 click 最後只執行最後乙個 click dom2級事件元素繫結多個 click 都要執行 注意當繫結的多個事件名,函式名,事件發生階段三者完全一樣時,才執行最後乙個 div.addeventlistener click fn1,false div.addeventli...

Dom事件鍵盤事件

dom0級事件元素繫結多個 click 最後只執行最後乙個 click dom2級事件元素繫結多個 click 都要執行 注意當繫結的多個事件名,函式名,事件發生階段三者完全一樣時,才執行最後乙個 div.addeventlistener click fn1,false div.addeventli...