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

 <!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. CSS Sticky Footer

    ----CSS Sticky Footer 当正文内容很少时,底部位于窗口最下面.当改变窗口高度时,不会出现重叠问题. ----另一个解决方法是使用:flexBox布局  http://www.w3c ...

  2. Python之路【第十八篇】Django小项目webQQ实现

    WEBQQ的实现的几种方式 1.HTTP协议特点 首先这里要知道HTTP协议的特点:短链接.无状态! 在不考虑本地缓存的情况举例来说:咱们在连接博客园的时候,当tcp连接后,我会把我自己的http头发 ...

  3. 会话控制:Cookie和session

    HTTP(超文本传输协议)定义了通过万维网(WWW)传输文本.图形.视频和所有其他数据所有的规则.HTTP是一种无状态的协议,说明每次请求的处理都与之前或之后的请求无关.虽然这种简化实现对于HTTP的 ...

  4. ext3是对ext2文件系统的一个扩展高性能日志文件系统

    嵌入式开发者所做的最重要的决定之一就是部署哪种文件系统.有些文件系统性能比较高有些文件系统空间利用率比较高,还有一些文件系统设备故障或者意外断电后恢复数据比较方便. linux文件系统概念 分区 分区 ...

  5. linux5个搜索命令

    概要 linux中主要有5个文件查找命令:find.locate.whereis.which.type.find最为强大,但耗时较长.locate可看做find的精简版,但是它的速度非常快.where ...

  6. TclError: no display name and no $DISPLAY environment variable

    %matplotlib inline 或 %matplotlib notebook

  7. WinMTR

    一般在windows 来判断网络连通性用ping 和tracert,ping的话可以来判断丢包率,tracert可以用来跟踪路由. 在Linux中有一个好用的网络连通性判断工具,它可以结合ping n ...

  8. theano + gpu

    Teano安装测试 1. Anaconda 安装 Anaconda是一个科学计算环境,自带的包管理器conda很强大.之所以选择它是因为它内置了python,以及numpy.scipy两个必要库和一些 ...

  9. Objective-C:Foundation框架-常用类-NSDate

    直接上代码吧: #import <Foundation/Foundation.h> #pragma mark 日期创建 void dateCreate() { // date方法返回的就是 ...

  10. Import SHA2 SSL cert to Windows IIS7

    Import SHA2 SSL cert to Windows IIS7 1.You will get 3 piece of certs from GeoTrust, and save them to ...