Heim >Web-Frontend >js-Tutorial >JS-Ereignis selbst erstellte Funktion bind() und Lösung für Kompatibilitätsprobleme
JS-Ereignis selbst erstellte Funktion bind() und Lösung für Kompatibilitätsprobleme
- angryTomnach vorne
- 2019-12-30 17:51:182428Durchsuche
Gemeinsame Methoden für die JavaScript-Ereignisbindung
1. Object.Event = function;
Es kann nur eine Antwortfunktion gleichzeitig an ein Ereignis eines Objekts gebunden werden.
Es können nicht mehrere Antwortfunktionen gebunden werden. Wenn es mehrere gibt, überschreiben die letzteren die vorherigen ones
2. addEventListener()
Diese Methode kann die Antwortfunktion auch an das Element binden
Parameter:
● Die Zeichenfolge des Ereignisses (ohne Ein)
● Rückruffunktion, die ausgeführt wird, wenn das Ereignis ausgelöst wird
● Ob das Ereignis während der Erfassungsphase ausgelöst werden soll, wird im Allgemeinen falsch übergeben
Verwenden Sie diese Methode, um den Wert eines Elements festzulegen. Binden Sie mehrere Antwortfunktionen an dasselbe Ereignis.
Wenn das Ereignis ausgelöst wird, führen Sie sie nacheinander in der Bindungsreihenfolge aus.
3, attachmentEvent()
IE8 und Die folgenden Browser unterstützen die Methode addEventListener() nicht, aber Sie können die Methode attachmentEvent() verwenden, um den gleichen Effekt zu erzielen
● Parameter:
Ereigniszeichenfolge (mit Ein)
● Rückruffunktion
Diese Methode kann auch mehrere Funktionen binden, aber die Reihenfolge der Funktionsausführung ist entgegengesetzt zu addEventListener()
4. Dieses Problem und seine Lösung
Dies in addEventListener() ist das Objekt des gebundenen Ereignisses
Dies in attachmentEvent() ist window
Wenn Sie das Kompatibilitätsproblem lösen möchten, müssen Sie dies der beiden Methoden vereinheitlichen
Hier verwenden wir die Methode call()
call() kann verwendet werden, um das zu ändern die Funktion
Selbst erstellte Funktion bind()
Definieren Sie eine Funktion, um ein Ereignis an ein Objekt zu binden
● Idee
Drei Parameter: Objekt, Ereignis, Rückruffunktion
● Kompatibilität:
Verwenden Sie if, um zu bestimmen, ob das Objekt über eine addEventListener-Methode zur Unterscheidung zwischen Browsern verfügt
● Lösung hierfür Problem
Da die eingehende Rückruffunktion vom Browser aufgerufen wird, können wir sie nicht bedienen. Daher übergeben wir die Rückruffunktion nicht direkt in attachmentEvent(), sondern definieren zuerst eine anonyme Funktion und rufen dann die Rückruffunktion auf innerhalb der Funktion und verwenden Sie die Aufrufmethode, um dies zu ändern
Beispielcode
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var btn1 = document.getElementById("btn1");
bind(btn1, "click",function(){
alert(this);
});
};
//定义一个函数bind()，用来为指定元素绑定事件响应函数
/*
* 参数：
* obj 要绑定事件的对象
* eventStr 事件的字符串
* func 回调函数
*/
function bind(obj, eventStr, func){
//判断是否有addEventListener()方法
if(obj.addEventListener){
//大部分浏览器兼容的方式
obj.addEventListener(eventStr, func, false);
}
else{
//IE8及以下 注意 on
//obj.attachEvent("on"+eventStr, func);//此方法this为window下面提供解决方法
//统一this 不直接调用func而是在匿名函数内调用
obj.attachEvent("on"+eventStr, function(){
//在匿名函数内调用回调函数 利用call()方法将this改为obj
func.call(obj);
});
}
};
</script>
</head>
<body>
<button id="btn1">btn1</button>
</body>
</html>Dieser Artikel stammt aus der Spalte js-Tutorial, willkommen zum Lernen!
Das obige ist der detaillierte Inhalt vonJS-Ereignis selbst erstellte Funktion bind() und Lösung für Kompatibilitätsprobleme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!