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实现动态CSS换肤技术的脚本
Jun 29 Javascript
JQuery autocomplete 使用手册
Apr 01 Javascript
用javascript删除当前行,添加行(示例代码)
Nov 25 Javascript
javascript设置金额样式转换保留两位小数示例代码
Dec 04 Javascript
JS实现转动随机数抽奖特效代码
Apr 16 Javascript
js clearInterval()方法的定义和用法
Nov 11 Javascript
Bootstrap按钮下拉菜单组件详解
May 10 Javascript
微信小程序 picker 组件详解及简单实例
Jan 10 Javascript
原生JS中slice()方法和splice()区别
Mar 06 Javascript
深入剖析Express cookie-parser中间件实现示例
Feb 01 Javascript
JS实现图片转换成base64的各种应用场景实例分析
Jun 22 Javascript
Vuex mutitons和actions初使用详解
Mar 04 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
web server使用php生成web页面的三种方法总结
2013/10/28 PHP
smarty模板引擎中自定义函数的方法
2015/01/22 PHP
浅谈PHP中JSON数据操作
2015/07/01 PHP
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
2017/06/09 PHP
Javascript 的addEventListener()及attachEvent()区别分析
2009/05/21 Javascript
潜说js对象和数组
2011/05/25 Javascript
js 函数的副作用分析
2011/08/23 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
2014/05/11 Javascript
使用pjax实现无刷新更改页面url
2015/02/05 Javascript
JS实现Fisheye效果动感放大菜单代码
2015/10/21 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
vue实现简单实时汇率计算功能
2017/01/15 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
2017/01/23 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
2017/04/13 Javascript
分析javascript中9 个常见错误阻碍你进步
2017/09/18 Javascript
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
Vue面试题及Vue知识点整理
2018/10/07 Javascript
Js代码中的span拼接问题解决
2019/11/22 Javascript
[52:14]VG vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python实现mysql的单引号字符串过滤方法
2015/11/14 Python
python制作websocket服务器实例分享
2016/11/20 Python
Python设计模式之中介模式简单示例
2018/01/09 Python
python3利用venv配置虚拟环境及过程中的小问题小结
2018/08/01 Python
Python3中_(下划线)和__(双下划线)的用途和区别
2019/04/26 Python
Python MySQL 日期时间格式化作为参数的操作
2020/03/02 Python
pyspark 随机森林的实现
2020/04/24 Python
Python 如何反方向迭代一个序列
2020/07/28 Python
美国最大的农村生活方式零售店:Tractor Supply Company(TSC)
2017/05/15 全球购物
德尔福集团DELPHI的笔试题
2012/02/22 面试题
会计自我鉴定范文
2013/10/06 职场文书
餐厅采购员岗位职责
2014/03/06 职场文书
感恩寄语大全
2014/04/11 职场文书
2014离婚协议书范文两篇
2014/09/15 职场文书
国情备忘录观后感
2015/06/04 职场文书
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技