React 監聽事件

一、事件監聽

新增事件監聽

window.addeventlistener('scroll', this.handlelisten)

移除事件監聽

window.removeeventlistener('scroll', this.handlelisten)

二、繫結的事件函式相關

繫結是事件函式必須是同乙個，如果不會同乙個，會導致解綁失敗。

一般會用到的事件函式型別有三種：命名函式、箭頭函式、匿名函式

這裡重點是新增處理的函式，addeventlistener()和removeeventlistener()新增的處理函式必須是同乙個函式，什麼叫同乙個函式呢，就是說這兩個函式時相等的，指向同乙個位址。

1. 匿名函式

匿名函式在事件繫結中的新增與移除

window.addeventlistener('scroll', function(e));
window.removeeventlistener('scroll', function(e));

從上面的例項寫法來說，很明顯新增和移除事件時因為使用的是匿名函式，所以會返回兩個不同的位址，這兩個事件不同，所以無法移除事件

2. 命名函式

命名函式在事件繫結中的新增與移除

handlescroll()
window.addeventlistener('scroll', 
this.handlescroll.bind(this));
window.removeeventlistener('scroll', 
this.handlescroll.bind(this));

以上是常用的使用命名函式的寫法，但其實這樣寫還是不對的，每次加上bind之後返回的函式並不是指向同乙個函式

const test = 
}let func1 = test.getname.bind(test);
let func2 = test.getname.bind(test);
let func3 = test.getname;
let func4 = test.getname;
console.log(func1==func2)
console.log(func3==func4)

如果還想要用命名函式，那麼就要換種寫法，解決方法是先在constructor中提前宣告好

constructor()
handlescroll()
window.addeventlistener('scroll', this.handlescroll);
window.removeeventlistener('scroll', this.handlescroll);

3. 箭頭函式

可以直接使用箭頭函式來避免返回的不是同乙個函式這種情況

箭頭函式在事件繫結中的新增與移除

handlescroll = () => 
window.addeventlistener('scroll', this.handlescroll);
window.removeeventlistener('scroll', this.handlescroll);

三、擴充套件

target.addeventlistener(type, listener, options);

target.addeventlistener(type, listener, usecapture);

target

可以有兩種，window和自定義物件

1.window.addeventlistener('scroll', this.handlescroll);
2.const obj = document.getelementsbyclassname(classname)[0];
obj.addeventlistener('scroll', this.handlescroll);

type

表示監聽事件型別的字串

一般常用的是滑鼠事件(『click』, 『dblclick』)和鍵盤事件(『keydown』, 『keypress』)等

listener

當所監聽的事件型別觸發時，會接收到乙個事件通知（實現了 event 介面的物件）物件。listener 必須是乙個實現了 eventlistener 介面的物件，或者是乙個函式。

options(可選)

乙個指定有關 listener 屬性的可選引數物件。可用的選項如下：

addeventlistener(type, listener, )

usecapture(可選)

boolean，在dom樹中，註冊了listener的元素，是否要先於它下面的eventtarget，呼叫該listener。當usecapture(設為true) 時，沿著dom樹向上冒泡的事件，不會觸發listener。當乙個元素巢狀了另乙個元素，並且兩個元素都對同一事件註冊了乙個處理函式時，所發生的事件冒泡和事件捕獲是兩種不同的事件傳播方式。

addeventlistener(type, listener, false)

React 監聽事件

監聽事件OnPageChangeListener

Spring 監聽事件

鍵盤監聽事件

React 監聽事件

監聽事件OnPageChangeListener

Spring 監聽事件

鍵盤監聽事件

相關推薦