<!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

0
kotAPI 20 Aug. 2015 im 13:37

4 Antworten

Beste Antwort

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

2
kube 14 Juli 2017 im 18:15

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>
0
Tushar 20 Aug. 2015 im 10:57

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

0
Community 23 Mai 2017 im 12:15

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>
1
Shailendra Sharma 20 Aug. 2015 im 10:43