Detaillierte Erläuterung der Verwendung von Ereignisattributen zum Binden von Ereignisfunktionen in JavaScript-js-Tutorial-php.cn

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

伊谢尔伦

Freigeben： 2017-07-22 16:04:27

Original

1583 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!