cari

Rumah >hujung hadapan web >tutorial js >javascript用事件属性绑定事件函数用法详解

javascript用事件属性绑定事件函数用法详解

伊谢尔伦
伊谢尔伦asal
2017-07-22 16:04:271585semak imbas

先介绍js添加事件通用方法，具体内容如下


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

js绑定事件的常用方式：

绑定事件的方式：用事件属性绑定事件函数 
优点：

1、完成行为的分离 
2、便于操作当事对象，因为function是作为on***的属性出现的，可直接用this引用当事对象。
3、方便读取事件对象，事件触发时系统自动把事件对象传递给事件函数，已其一个来传 


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

Atas ialah kandungan terperinci javascript用事件属性绑定事件函数用法详解 . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：如何使用javascript写模板引擎代码思路和实例详解Artikel seterusnya：javascript如何创建事件的定义方式实例详解

Artikel berkaitan

Lihat lagi