<!DOCTYPE html>
<html>
<body>
<input type="text" onMouseover= "this.style.color='red'">Mouse over
me!</input>
</body>
</html>
Ich möchte auch "this.style.cursor='default'" zusammen mit "this.style.color='red'" aufrufen
4 Antworten
Deklarativ
Separate Anrufe mit ;
<input type="text" onMouseover= "function1(); function2();">
Mouse over me!
</input>
Spezielle Wrapper-Funktion
<input type="text" onMouseover="dedicatedFunction()">
Mouse over me!
</input>
Und definieren Sie diese Funktion in einem <script> -Tag:
function dedicatedFunction() {
function1()
function2()
}
Imperativ
Wie Xufox sagte, können Sie dazu auch addEventListener verwenden:
Dies bedeutet, dass Sie mithilfe eines DOM-Selektors direkt als Javascript-Objekt auf Ihren DOM-Knoten zugreifen können:
var node = document.getElementById('yourObjectId')
Oder direkt durch Erstellen des DOM-Knotens über Javascript:
var node = document.createElement('input')
Sie können dann addEventListener für Ihr Objekt verwenden:
node.addEventListener('mouseover', function1)
node.addEventListener('mouseover', function2)
Oder nutzen Sie sogar direkt anonyme Funktionen
node.addEventListener('mouseover', function () {
// ...
})
Der Vorteil dieser Methode besteht darin, dass Sie jederzeit Ereignis-Listener hinzufügen können. Sie können einen eventListener auch jederzeit mit removeEventListener entfernen
https://developer.mozilla.org/fr/docs/Web/API/EventTarget/removeEventListener
Hier müssen keine Javascript-Ereignisse verwendet werden, nur um den Stil color und cursor beim Hover eines Elements zu ändern.
Sie können die CSS-Klasse :hover verwenden.
span:hover {
cursor: default;
color: red;
}
/* Override */
#input {
color: gray !important;
}<span>
<input id="input" type="text" onMouseover= "this.style.color='red'">Mouse over me!
</span>Sie können einfach ; verwenden, um zwei Ereignisse zu trennen:
<!DOCTYPE html>
<html>
<body>
<input type="text" onmouseover= "this.style.color='red';this.style.cursor='default';">Mouse over me!
</body>
</html>
Verwenden Sie jedoch besser <script>, um Standardcode zu schreiben:
<!DOCTYPE html>
<html>
<body>
<input type="text" onmouseover="foo(this);">Mouse over me!
<script type="text/javascript">
function foo(ele) {
ele.style.color="red";
ele.style.cursor="default";
}
</script>
</body>
</html>
Die Verwendung von addEventListener ist der beste Weg, kann jedoch zu Kompatibilitätsproblemen zwischen Browsern führen. Sie können sie als Referenz lesen: addeventlistener-vs-onclick
Sie können eine Funktion in mehrere Eigenschaften schreiben
<input type="text" onMouseover= "callme(this)">Mouse over
me!</span>
<script>
function callme(obj){
obj.style.color='red'
obj.style.otherproperty ='value'
.
..... somthing else
}
</script>