js添加绑定事件的方法
来源: 阅读:950 次 日期:2016-06-30 15:44:46
温馨提示: 小编为您整理了“js添加绑定事件的方法”,方便广大网友查阅!

这篇文章主要为大家详细介绍了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> 

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

更多信息请查看网络编程
手机网站地址:js添加绑定事件的方法
由于各方面情况的不断调整与变化, 提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!

2025国考·省考课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 云南省教育厅备案号:云教ICP备0901021 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:
咨询QQ:526150442(9:00—18:00)版权所有:
云南网警报警专用图标
Baidu
map