js添加绑定事件的方法
2016-06-30来源:易贤网

这篇文章主要为大家详细介绍了js添加事件的通用方法,还为大家介绍了js绑定事件的常用方式,感兴趣的小伙伴们可以参考一下

先介绍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('k').onclick=function(event){ 

   var jj=document.getElementById('jj'); 

     jj.style.top=event.clientX+'px'; 

     jj.style.left=event.clientY+'px'; 

   } 

  }  

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

<div id="k"></div> 

<div id="jj"></div>  

</body> 

</html> 

以上就是本文的全部内容,希望对大家的学习有所帮助。

2026公务员·事业单位培训课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
推荐信息