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 相关文章推荐
ie和firefox中img对象区别的困惑
Dec 27 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
Jan 13 Javascript
详解javascript new的运行机制
Jan 26 Javascript
Javascript使用uploadify来实现多文件上传
Nov 16 Javascript
基于JavaScript定位当前的地理位置
Apr 11 Javascript
vue中Axios的封装与API接口的管理详解
Aug 09 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
Sep 03 Javascript
vue增加强缓存和版本号的实现方法
May 01 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
Oct 26 Javascript
vue 解决异步数据更新问题
Oct 29 Javascript
javascript json对象小技巧之键名作为变量用法分析
Nov 11 Javascript
js事件机制----捕获与冒泡机制实例分析
May 22 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 数组的创建、调用和更新实现代码
2009/03/09 PHP
php 需要掌握的东西 不做浮躁的人
2009/12/28 PHP
与文件上传有关的php配置参数总结
2013/06/14 PHP
PHP扩展模块Pecl、Pear以及Perl的区别
2014/04/09 PHP
PHP实现对文本数据库的常用操作方法实例演示
2014/07/04 PHP
大家在抢红包,程序员在研究红包算法
2015/08/31 PHP
php安装ssh2扩展的方法【Linux平台】
2016/07/20 PHP
全面解析PHP面向对象的三大特征
2017/06/10 PHP
javascript数据类型示例分享
2015/01/19 Javascript
jQuery插件datalist实现很好看的input下拉列表
2015/07/14 Javascript
微信小程序 loading(加载中提示框)实例
2016/10/28 Javascript
浅谈Angular路由守卫
2017/08/26 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
2017/09/28 Javascript
详解VUE 数组更新
2017/12/16 Javascript
微信小程序动态显示项目倒计时
2019/06/20 Javascript
[01:47]2018年度DOTA2最佳教练-完美盛典
2018/12/16 DOTA
Python中矩阵库Numpy基本操作详解
2017/11/21 Python
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
Python中的单行、多行、中文注释方法
2018/07/19 Python
python批量获取html内body内容的实例
2019/01/02 Python
Django集成搜索引擎Elasticserach的方法示例
2019/06/04 Python
windows下python虚拟环境virtualenv安装和使用详解
2019/07/16 Python
python requests证书问题解决
2019/09/05 Python
CSS3新属性transition-property transform box-shadow实例学习
2013/06/06 HTML / CSS
迪拜领先运动补剂零售品牌中文站:Sporter商城
2019/08/20 全球购物
茶叶生产计划书
2014/01/10 职场文书
装修设计师求职信
2014/02/26 职场文书
小学生学习感言
2014/03/10 职场文书
企业家王石演讲稿:坚持与放下
2014/04/27 职场文书
核心价值观演讲稿
2014/05/13 职场文书
入党积极分子群众意见
2015/06/01 职场文书
《普罗米修斯》教学反思
2016/02/22 职场文书
工程移交协议书
2016/03/24 职场文书
nginx 反向代理之 proxy_pass的实现
2021/03/31 Servers
python数据分析之用sklearn预测糖尿病
2021/04/22 Python
详解Spring Security如何在权限中使用通配符
2022/06/28 Java/Android