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 相关文章推荐
js css样式操作代码(批量操作)
Oct 09 Javascript
JavaScript 学习笔记二 字符串拼接
Mar 28 Javascript
JavaScript避免代码的重复执行经验技巧分享
Apr 17 Javascript
javascript闭包传参和事件的循环绑定示例探讨
Apr 17 Javascript
JavaScript获取function所有参数名的方法
Oct 30 Javascript
分享JS数组求和与求最大值的方法
Aug 11 Javascript
jQuery简单实现列表隐藏和显示效果示例
Sep 12 Javascript
Ajax 加载数据 练习代码
Jan 05 Javascript
VUE axios上传图片到七牛的实例代码
Jul 28 Javascript
深入理解vue-class-component源码阅读
Feb 18 Javascript
小程序实现短信登录倒计时
Jul 12 Javascript
Vue实现数据请求拦截
Oct 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
收集的DedeCMS一些使用经验
2007/03/17 PHP
解析获取优酷视频真实下载地址的PHP源代码
2013/06/26 PHP
php中mysql连接和基本操作代码(快速测试使用,简单方便)
2014/04/25 PHP
DEDECMS首页调用图片集里的多张图片
2015/06/05 PHP
PHP里的单例类写法实例
2015/06/25 PHP
php通过获取头信息判断图片类型的方法
2015/06/26 PHP
PDO::errorInfo讲解
2019/01/28 PHP
Laravel5.1 框架控制器基础用法实例分析
2020/01/04 PHP
jQuery UI-Draggable 参数集合
2010/01/10 Javascript
JavaScript Chart 插件整理
2010/06/18 Javascript
JQuery 常用方法和事件详细介绍
2013/04/18 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
2013/11/14 Javascript
js控制容器隐藏出现防止样式变化的两种方法
2014/04/25 Javascript
js动态创建及移除div的方法
2015/06/03 Javascript
JavaScript程序中的流程控制语句用法总结
2016/05/23 Javascript
JavaScript常见事件处理程序实例总结
2019/01/05 Javascript
vue 中 beforeRouteEnter 死循环的问题
2019/04/23 Javascript
react koa rematch 如何打造一套服务端渲染架子
2019/06/26 Javascript
vue(2.x,3.0)配置跨域代理
2019/11/27 Javascript
iview实现动态表单和自定义验证时间段重叠
2021/01/10 Javascript
[01:29:31]VP VS VG Supermajor小组赛胜者组第二轮 BO3第一场 6.2
2018/06/03 DOTA
[01:09:20]NB vs NAVI Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
selenium获取当前页面的url、源码、title的方法
2019/06/12 Python
python实现自动化报表功能(Oracle/plsql/Excel/多线程)
2019/12/02 Python
python模式 工厂模式原理及实例详解
2020/02/11 Python
keras 回调函数Callbacks 断点ModelCheckpoint教程
2020/06/18 Python
如何在mac下配置python虚拟环境
2020/07/06 Python
详解纯CSS3制作的20种loading动效
2017/07/05 HTML / CSS
详解使用HTML5 Canvas创建动态粒子网格动画
2016/12/14 HTML / CSS
英国建筑用品在线:Building Supplies Online(BSO)
2018/04/30 全球购物
幼儿园儿童节主持词
2014/03/21 职场文书
精神病医院见习报告
2014/11/03 职场文书
六年级小学生评语
2014/12/26 职场文书
经典祝酒词大全
2015/08/12 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书