给一个对象绑定多个事件处理函数:

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>无标题文档</title>
 <script>
 //给一个对象绑定一个事件处理函数的第一种形式
 //obj.onclick = fn;
 function fn1() {
     alert(this);
 }
 function fn2() {
     alert(2);
 }

 //document.onclick = fn1;
 //document.onclick = fn2;    //会覆盖前面绑定fn1

 //给一个对象的同一个事件绑定多个不同的函数
 //给一个元素绑定事件函数的第二种形式

 /*
 ie:obj.attachEvent(事件名称,事件函数);
     1.没有捕获
     2.事件名称有on
     3.事件函数执行的顺序:标准ie-》正序   非标准ie-》倒序
     4.this指向window
 标准:obj.addEventListener(事件名称,事件函数,是否捕获);
     1.有捕获
     2.事件名称没有on
     3.事件执行的顺序是正序
     4.this触发该事件的对象
 */

 /*document.attachEvent('onclick', function() {
     fn1.call(document);
 });
 document.attachEvent('onclick', fn2);*/

 //是否捕获 : 默认是false    false:冒泡 true:捕获

 /*document.addEventListener('click', fn1, false);
 document.addEventListener('click', fn2, false);*/

 function bind(obj, evname, fn) {
     if (obj.addEventListener) {
         obj.addEventListener(evname, fn, false);
     } else {
         obj.attachEvent('on' + evname, function() {
             fn.call(obj);
         });
     }
 }

 bind(document, 'click', fn1);
 bind(document, 'click', fn2);
 </script>
 </head>

 <body>
 </body>
 </html>

事件取消:

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>无标题文档</title>
 <script>
 /*
 第一种事件绑定形式的取消
 */
 function fn1() {
     alert(1);
 }
 function fn2() {
     alert(2);
 }

 //document.onclick = fn1;
 //document.onclick = null;    //取消

 /*
 ie : obj.detachEvent(事件名称,事件函数);
 标准 : obj.removeEventListener(事件名称,事件函数,是否捕获);
 */
 /*document.attachEvent('onclick', fn1);
 document.attachEvent('onclick', fn2);
 document.detachEvent('onclick', fn1);*/

 document.addEventListener('click', fn1, false);
 document.addEventListener('click', fn1, true);
 document.addEventListener('click', fn2, false);

 document.removeEventListener('click', fn1, false);
 </script>
 </head>

 <body>
 </body>
 </html>

Javascript 事件对象(四)一个事件绑定多个不同的函数的更多相关文章

  1. python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

    一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...

  2. 简单总结焦点事件、Event事件对象、冒泡事件

    每学习一些新的东西,要学会复习,总结和记录. 今天来简单总结一下学到的几个事件:焦点事件.Event事件对象.冒泡事件 其实这几个事件应该往深的说是挺难的,但今天主要是以一个小菜的角度去尝试理解一些基 ...

  3. JavaScript的事件对象_键盘事件

    用户在使用键盘时会触发键盘事件.“DOM2 级事件”最初规定了键盘事件,结果又删除了相应的内容.最终还是使用最初的键盘事件,不过 IE9 已经率先支持“DOM3”级键盘事件. 一.键码 在发生 key ...

  4. JavaScript的事件对象_鼠标事件

    鼠标事件是 Web 上面最常用的一类事件,毕竟鼠标还是最主要的定位设备.那么通过事件对象可以获取到鼠标按钮信息和屏幕坐标获取等. 一.鼠标按钮 只有在主鼠标按钮被单击时(常规一般是鼠标左键)才会触发 ...

  5. JavaScript的事件对象_滚轮事件

    用户在使用键盘时会触发键盘事件.“DOM2 级事件”最初规定了键盘事件,结果又删除了相应的内容.最终还是使用最初的键盘事件,不过 IE9 已经率先支持“DOM3”级键盘事件. 一.键码 在发生 key ...

  6. 从零开始的全栈工程师——js篇2.21(事件对象 arguments 阻止事件默认行为兼容 事件委托 事件源对象)

    一.事件对象 1.常用的事件2.每个元素身上的事件都是天生存在的 不需要我们去定义 只需要我们给这个事件绑定一个方法 当事件触发的时候就会执行这个方法 3.事件绑定的写法 ①div.onclick=f ...

  7. jQuery中事件对象e的事件冒泡用法示例(事件冒泡与阻止冒泡)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. react事件中的事件对象和常见事件

    不管是在原生的js还是vue中,所有的事件都有其事件对象,该事件对象event中包含着所有与事件相关的信息,在react中,所有的事件也有其事件对象,在触发DOM上的某个事件时,就会产生一个事件对象. ...

  9. DOM中的事件对象和IE事件对象

    DOM中的事件对象 IE事件对象 属性/方法 类型 读/写 说明 属性/方法 类型 读/写 说明  bubles Boolean 只读  表明事件是否冒泡  cancleBubble Boolean ...

  10. DOM2级事件对象、添加事件、阻止默认事件、阻止冒泡事件、获取事件对象目标的兼容处理

    事件对象——兼容处理 /* * 功能: 事件对象兼容 * 参数: 表示常规浏览器的事件对象e */ function getEvent(e) { // 如果存在e存在,直接返回,否则返回window. ...

随机推荐

  1. Centos7无法上网

    详情参照步骤:http://www.cnblogs.com/yxyht/p/5063505.html

  2. Android Studio使用教程-菜单(Edit)

    3.2.1.Undo(Ctrl+Z) 撤销上一次操作 3.2.2.Redo(Ctrl+Shift+Z) 退出撤销操作 3.2.3.Cut(Ctrl+X) 剪切 3.2.4.Copy(Ctrl+C) 复 ...

  3. 【Nginx】配置Nginx的负载均衡

    参考的优秀文章 tomcat配置文件server.xml详解 AJP协议总结与分析 Using nginx as HTTP load balancer 在本机运行2个Tomcat 现需要运行两个Tom ...

  4. spi controller

    http://blog.csdn.net/droidphone/article/details/24353293 http://www.china-cpu.com/supports/article/0 ...

  5. 保存登录信息的Cookie加密技术

    所有需要账户登录的website 基本都会想到这样一个问题, 如何保持用户在一定时间内登录有效. 最近本人就在项目中遇到这样的需求,某些页面只能Admin账户登录后访问, 当登录Admin账户后如何才 ...

  6. uC/OS-II源码分析

    uC/OS-II源码分析 首先从main.c文件看起,下面是uC/OS-II main.C的大致流程: main(){ OSInit(); TaskCreate(...); OSStart(); } ...

  7. A - Wireless Network-poj2236(简单并查集)

    说是有N个村庄,刚开始每个村庄的网络都是受损状态,于是派一个人去修理,修理过的村庄只能联系距离他们半径为D的村庄,当然他们可以通过一些村庄当中转站,联系.   输入先输入一个N表示有N个村庄,还有一个 ...

  8. php session_set_save_handler 函数的用法(mysql)(转)

    <?php /*============================文件说明======================================== @filename:     s ...

  9. 轻奢请向历史SAY NO_重青网_重庆青年报_重庆青年报电子版_重庆青年报网站_重庆青年报官方网站

    轻奢请向历史SAY NO_重青网_重庆青年报_重庆青年报电子版_重庆青年报网站_重庆青年报官方网站 轻奢请向历史SAY NO 经济学家George Taylor在他著名的"裙摆指数" ...

  10. python之SQLAlchemy ORM 上

    前言: SQLAlchmey是暑假学的,当时学完后也没及时写博客整理下.这篇博客主要介绍下SQLAlchemy及基本操作,写完后有空做个堡垒机小项目.下篇博客整理写篇关于Web框架和django基础~ ...