js添加绑定事件的方法


Posted in Javascript onMay 15, 2016

先介绍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>

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

Javascript 相关文章推荐
Javascript &amp; DHTML 实例编程(教程)基础知识
Jun 02 Javascript
jquery ui dialog ie8出现滚动条的解决方法
Dec 06 Javascript
jquery 日期控件datepicker属性详细解析
Nov 08 Javascript
浅析document.ready和window.onload的区别讲解
Dec 18 Javascript
JavaScript打印网页指定区域的例子
May 03 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
Jun 19 Javascript
关于JavaScript 原型链的一点个人理解
Jul 31 Javascript
Vue.js每天必学之过渡与动画
Sep 06 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
Apr 24 Javascript
JQuery实现图片轮播效果
May 08 jQuery
通过函数作用域和块级作用域看javascript的作用域链
Aug 05 Javascript
Javascript的this详解
Mar 23 Javascript
JavaScript绑定事件监听函数的通用方法
May 14 #Javascript
易被忽视的js事件问题总结
May 14 #Javascript
jQuery防止重复绑定事件的解决方法
May 14 #Javascript
jQuery基于扩展简单实现倒计时功能的方法
May 14 #Javascript
jquery动态切换背景图片的简单实现方法
May 14 #Javascript
jQuery基于$.ajax设置移动端click超时处理方法
May 14 #Javascript
jQuery基于扩展实现的倒计时效果
May 14 #Javascript
You might like
PHP中的session永不过期的解决思路及实现方法分享
2011/04/20 PHP
通过php快速统计某个数据库中每张表的数据量
2012/09/04 PHP
浅析PHP编程中10个最常见的错误
2014/08/08 PHP
JavaScript For Beginners(转载)
2007/01/05 Javascript
找到了一篇jQuery与Prototype并存的冲突的解决方法
2007/08/29 Javascript
浅谈javascript的数据类型检测
2010/07/10 Javascript
javascript 从if else 到 switch case 再到抽象
2010/07/17 Javascript
node.js中的http.createServer方法使用说明
2014/12/14 Javascript
JS实现判断碰撞的方法
2015/02/11 Javascript
详解nodejs微信公众号开发——2.自动回复
2017/04/10 NodeJs
js实现随机点名小功能
2017/08/17 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
2018/01/03 Javascript
微信小程序调用微信支付接口的实现方法
2019/04/29 Javascript
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
python求质数的3种方法
2018/09/28 Python
Python Cookie 读取和保存方法
2018/12/28 Python
Python 普通最小二乘法(OLS)进行多项式拟合的方法
2018/12/29 Python
基于python-opencv3的图像显示和保存操作
2019/06/27 Python
python turtle库画一个方格和圆实例
2019/06/27 Python
python 并发下载器实现方法示例
2019/11/22 Python
利用Tensorflow构建和训练自己的CNN来做简单的验证码识别方式
2020/01/20 Python
python调用HEG工具批量处理MODIS数据的方法及注意事项
2020/02/18 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
计算Python Numpy向量之间的欧氏距离实例
2020/05/22 Python
css3新增颜色表示方式分享
2014/04/15 HTML / CSS
让IE9以下版本的浏览器兼容HTML5的方法
2014/03/12 HTML / CSS
荷兰演唱会和体育比赛订票网站:viagogo荷兰
2018/04/08 全球购物
说出一些常用的类,包,接口
2014/09/22 面试题
人事主管的岗位职责
2013/11/16 职场文书
大学生职业生涯规划书前言
2014/01/09 职场文书
药品营销策划方案
2014/06/15 职场文书
外贸业务员求职信
2014/06/16 职场文书
授权委托书样本
2014/09/25 职场文书
党员教师自我剖析材料
2014/09/29 职场文书
学生个人总结范文
2015/02/15 职场文书
学习保证书100字
2015/02/26 职场文书