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

 <!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. React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定

    1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...

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

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

  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. html快速入门（基础教程+资源推荐）

    1.html究竟是什么? 从字面上理解,html是超文本标记语言hyper text mark-up language的首字母缩写,指的是一种通用web页面描述语言,是用来描述我们打开浏览器就能看到的 ...

  2. 运行DbVisualizer报the java_home environment viariable does not point to a working 32-bit JDK OR JRE错误

    报这个错误的根本原因就是DbVisualizer和JDK的版本不一致,那么知道原因,修改起来就方便了,要么修改DbVisualizer的版本,要么修改JDK的版本. 1.JDK7 64位 那么就在Db ...

  3. JQuery的ajaxFileUpload图片上传初试

    本案例主要说讲使用ajaxFileUpload实现图片的异步上传. 1.html代码部分 这里的代码,主要设置一下name,后台获取时候要用到,还有设置一个onchange的事件对应的方法:ajaxF ...

  4. 基于Jforum开源项目的论坛网站

    基于Jforum开源项目的论坛网站 开发原因: 刚完成了以wordpress及其插件simple-press为基础的论坛网站,因为一直从事java方面开发, 所以尝试一下使用java开源项目Jforu ...

  5. 【jQuery】百分比自适应屏幕轮播图特效

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

  6. Tomcat容器虚拟路径设置

    1.[官方文档]在tomcat\conf下server.xml中找到 <Host name="localhost" appBase="webapps" u ...

  7. QT_BEGIN_NAMESPACE和QT_END_NAMESPACE的作用

    本文根据在网上找到的一些资料总结来的,并加入了一些自己的想法. 在源代码中是这样定义的: # define QT_BEGIN_NAMESPACE namespace QT_NAMESPACE { # ...

  8. 5.String

    一．古罗马皇帝凯撒在打仗时曾经使用过一种方法加密军事情报.请编写一个程序,使用上述算法加密或解密用户输入的英文字串. 设计思想:先提示用户进行的操作是加密还是解密,用户输入一个字符串,加密时将前23个 ...

  9. longjmp setjmp and volatile

    /******************************************************************************* * 版权所有: * 模 块 名: * ...

  10. 【转】修改LINUX时间

    命令格式为: date -s 时间字符串 例如只修改系统的日期,不修改时间(时分秒) date -s 2012-08-02 或只修改时间不修改日期 date -s 10:08:00 当然也可以同时修改 ...