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

 <!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. 简单总结焦点事件、Event事件对象、冒泡事件

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

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

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

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

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

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

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

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

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

  6. jquery用一个事件控制另一个事件是否执行(不是删除事件)

    想用click事件控制mouseover事件的执行,如果用删除绑定mouseover事件以后就不能再使用mouseover了,于是只需要设置一个全局变量,并赋值false,当点击click事件,将全局 ...

  7. Javascript 事件对象(二)event事件

    Event事件: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...

  8. event事件对象和clientX,clientY

    一.event : 事件对象 , 当一个事件发生的时候,和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存到一个指定地方-event对象,供我们在需要的调用.如:飞机-黑匣子 事件对象必须 ...

  9. JavaScript(第二十四天)【事件对象】

    JavaScript事件的一个重要方面是它们拥有一些相对一致的特点,可以给你的开发提供更多的强大功能.最方便和强大的就是事件对象,他们可以帮你处理鼠标事件和键盘敲击方面的情况,此外还可以修改一般事件的 ...

  10. JavaScript事件对象与事件处理程序

    在学习之前建议请看一下事件流.事件冒泡.事件捕获 一.事件对象 事件对象:在DOM触发事件时,会产生一个事件对象event,这个事件对象包含着所有与事件相关的信息.既然event是事件对象,那么它必然 ...

随机推荐

  1. js实现阶乘

    //while循环实现function calNum(n) { var product = 1; while(n > 1){//1*5*4*3*2,1*n*(n-1)*(n-2)*...*2 p ...

  2. C#开发微信门户及应用(29)--微信个性化菜单的实现

    有一段时间没有接着微信的主题继续介绍里面的功能模块了,这段时间来,微信也做了不少的变化改动,针对这些特性我全面核对了一下相关的微信公众号和企业号的接口,对原有的微信API和系统管理做了全面的更新,本随 ...

  3. 【Nginx 大系】Nginx服务器面面观

    Nginx官方文档中文版 1. 先看看百度百科对Nginx 的解释: nginx_百度百科 2. 下面的博客就是讲 Nginx的安装方法和 具体的配置文件的使用介绍的很详细,可以仔细阅读下 [好]Ng ...

  4. 脏检查and刷新机构

    ---恢复内容开始--- 脏检查:当食物提交时,Hiberante会对Session中持久状态的对象进行加测,判断对象的数据是否发生了变化 为什么要进行脏检查?, 解析:如果对象发生了改变,就需要将改 ...

  5. IDA插件栈字符串识别插件

    该插件是一款可以自动识别栈上局部变量为字符串的插件,字符串形式如下,并自动的加上注释                                       如图:可以自动识别栈上的字符串 项目主 ...

  6. [UIScreen mainScreen].bounds.size.width 和self.view.frame.size.width的区别

    self.view.frame.size.width在导航栏titleView计算frame时会出现宽度不准确的情况,布局出现问题,[UIScreen mainScreen].bounds.size. ...

  7. 微信web开发者工具初探

    最近需要在微信企业号中挂接网页,之前也没有接触过微信开发,刚开始也不知道怎么调试,后来同事介绍使用“微信web开发者工具”,于是在网上下了一个,使用了一下的确很好用.它不仅支持Android和IOS同 ...

  8. idea小技巧

    1.不使用import *:Setting=>Editor=>Code Style=>Java=>Imports=>Class count to use/Names co ...

  9. 【BZOJ 4517】【SDOI 2016 Round1 Day2 T2】排列计数

    本蒟蒻第一次没看题解A的题竟然是省选$Round1$ $Day2$ $T2$ 这道组合数学题. 考试时一开始以为是莫队,后来想到自己不会组合数的一些公式,便弃疗了去做第三题,,, 做完第三题后再回来看 ...

  10. IE6及以上版本fixed问题解决方案,页面右下角固定页面,可以最大化、最小化、正规显示

    在窗口固定位置显示内容使用fixed,但是 IE 6 不支持,后来我搜了很多方法,都没有作用,后来类比着一个网站的代码,使用absolute .z-index解决了问题. 页面div结构: <d ...