Hinzufügen von Ereignissen testen: Firefox verwendet addEventListener,i"/> < body>

Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der Verwendung von Ereignisattributen zum Binden von Ereignisfunktionen in JavaScript

Detaillierte Erläuterung der Verwendung von Ereignisattributen zum Binden von Ereignisfunktionen in JavaScript

伊谢尔伦Original: 2017-07-22 16:04:271563Durchsuche

Stellen Sie zunächst die allgemeine Methode zum Hinzufügen von Ereignissen in js vor. Der spezifische Inhalt lautet wie folgt

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <p id="p1">测试添加事件：firefox使用addEventListener,ie使用attachEvent<br>
    点击此p标签，绑定了2个弹出事件</p>
    <script>
      function test1() {
        alert("test1");
      }
      function test2(){
        alert("test2");
      }
      //添加事件通用方法
      function addEvent(element,e,fn) {
        //firefox使用addEventListener，来添加事件
        if(element.addEventListener) {
          element.addEventListener(e,fn,false);
        }
        //ie使用attachEvent，来添加事件
        else {
          element.attachEvent("on"+e,fn);
        }
      }
      window.onload = function(){
        var element = document.getElementById("p1");
        addEvent(element,"click",test1);
        addEvent(element,"click",test2);
      }
    </script>
  </body>
</html>

Die übliche Methode von Bindungsereignissen in js:

So binden Sie Ereignisse: Verwenden Sie Ereignisattribute, um Ereignisfunktionen zu binden
Vorteile:

1 Vervollständigen Sie die Trennung von Verhaltensweisen
2. Das Objekt ist einfach zu bedienen, da die Funktion als Attribut von on*** angezeigt wird und Sie diese direkt verwenden können, um auf das betreffende Objekt zu verweisen.
3. Wenn das Ereignis ausgelöst wird, übergibt das System automatisch eines davon an die Ereignisfunktion

<?xml version="1.0" encoding="UTF-8" ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>JS事件绑定</title> 
<script type="text/javascript"> 
  window.onload=function(){ 
   var k=document.getElementById(&#39;k&#39;).onclick=function(event){ 
   var jj=document.getElementById(&#39;jj&#39;); 
     jj.style.top=event.clientX+&#39;px&#39;; 
     jj.style.left=event.clientY+&#39;px&#39;; 
   } 
  }  
   
</script> 
<style> 
  #k{width:60px;height:80px; background-color:#80ffff;} 
  #jj{width:60px ;height:80px;background-color:#ffff00;z-index:1000;position:absolute;} 
</style> 
</head> 
<body> 
<p id="k"></p> 
<p id="jj"></p>  
</body> 
</html>

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von Ereignisattributen zum Binden von Ereignisfunktionen in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verwenden Sie Javascript, um Ideen und detaillierte Beispiele für Template-Engine-Code zu schreibenNächster Artikel：So verwenden Sie Javascript, um Ideen und detaillierte Beispiele für Template-Engine-Code zu schreiben

In Verbindung stehende Artikel

Mehr sehen