Javascript 事件对象（四）一个事件绑定多个不同的函数
给一个对象绑定多个事件处理函数：
<!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 事件对象（四）一个事件绑定多个不同的函数的更多相关文章
- python 全栈开发，Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))
一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...
- 简单总结焦点事件、Event事件对象、冒泡事件
每学习一些新的东西,要学会复习,总结和记录. 今天来简单总结一下学到的几个事件:焦点事件.Event事件对象.冒泡事件 其实这几个事件应该往深的说是挺难的,但今天主要是以一个小菜的角度去尝试理解一些基 ...
- React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定
1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑 ...
- JavaScript的事件对象_键盘事件
用户在使用键盘时会触发键盘事件.“DOM2 级事件”最初规定了键盘事件,结果又删除了相应的内容.最终还是使用最初的键盘事件,不过 IE9 已经率先支持“DOM3”级键盘事件. 一.键码 在发生 key ...
- JavaScript的事件对象_滚轮事件
用户在使用键盘时会触发键盘事件.“DOM2 级事件”最初规定了键盘事件,结果又删除了相应的内容.最终还是使用最初的键盘事件,不过 IE9 已经率先支持“DOM3”级键盘事件. 一.键码 在发生 key ...
- 从零开始的全栈工程师——js篇2.21（事件对象 arguments 阻止事件默认行为兼容 事件委托 事件源对象）
一.事件对象 1.常用的事件2.每个元素身上的事件都是天生存在的 不需要我们去定义 只需要我们给这个事件绑定一个方法 当事件触发的时候就会执行这个方法 3.事件绑定的写法 ①div.onclick=f ...
- jQuery中事件对象e的事件冒泡用法示例（事件冒泡与阻止冒泡）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- react事件中的事件对象和常见事件
不管是在原生的js还是vue中,所有的事件都有其事件对象,该事件对象event中包含着所有与事件相关的信息,在react中,所有的事件也有其事件对象,在触发DOM上的某个事件时,就会产生一个事件对象. ...
- DOM中的事件对象和IE事件对象
DOM中的事件对象 IE事件对象 属性/方法 类型 读/写 说明 属性/方法 类型 读/写 说明 bubles Boolean 只读 表明事件是否冒泡 cancleBubble Boolean ...
- DOM2级事件对象、添加事件、阻止默认事件、阻止冒泡事件、获取事件对象目标的兼容处理
事件对象——兼容处理 /* * 功能: 事件对象兼容 * 参数: 表示常规浏览器的事件对象e */ function getEvent(e) { // 如果存在e存在,直接返回,否则返回window. ...
随机推荐
- MVC中获取来自控制器名称与动作的方法
#region 获取控制器名称与动作 protected void GetNameSpace() { var nameSpace = this.RouteData.Values["contr ...
- Centos 6.5 安装 ionCube PHP Loader
使用某些php的程序的时候会出现提示:Site error: the file /***/index.php requires the ionCube PHP Loader ioncube_loade ...
- Oracle查询
1.普通查询 select * from 表格 查询所有内容 select 列名,列名 from 表格查询某几列 2.条件查询 select * from 表格 where 条件 条件查询 selec ...
- 【Python④】python恼人的字符串，格式化输出
恼人的字符串 计算机只能处理数字,如果要处理文本,就必须先把文本转换为数字才能处理.由于计算机是美国人发明的,因此,最早只有127个字母被编码到计算机里,也就是大小写英文字母.数字和一些符号,这个编码 ...
- 杭电1597--find the nth digit--假设：S1 = 1,S1=12,S3=123,S4=1234...
我是把它分层来求的,也就是说第一层是1,第二层是12,第三层是123......你们该懂的!! #include <iostream>#include <cmath>using ...
- python学习04——列表的操作
笨办法学python第38节 如何创建列表在第32节,形式如下: 本节主要是讲对列表的操作,首先讲了 mystuff.append('hello') 的工作原理,我的理解是,首先Python找到mys ...
- MySQL主从同步报错排错结果及修复过程之：Slave_SQL_Running: No
起因调查: 收到大量邮件报警想必事出有因,就问同事到底发生了什么?同事登录从库查看,发现出现如下报错提示,表示与主库同步失败,一直卡在哪里,看他弄了两个多小时,问题越来越多,解决一个恢复平静了一两分钟 ...
- C++重载流运算符，将存储结构体的vector直接写入文件
我们知道,当vector很大的时候,如果使用循环的方式将其中的元素写入文件将非常费时,因此有没有办法将vector一次性写入文件呢? 采用流运算符重载的方法可以做到,不仅基本类型的vector可以一次 ...
- Psp个人软件开发软件需求分析和用例分析
Psp个人软件开发软件需求分析和用例分析 一.需求分析 1．业务需求 1.1 应用背景 开发项目进度计划总是那么不明确,延期经常出现,甚至无法给出一个相对比较明确的延迟时间.这样给市场的推广会带来很大 ...
- 涵涵和爸爸习惯养成进度表（二）(May 30 - )
规则说明 22天内,没有哭脸,不超过三个无表情脸,可以给一个奖励(动画书等) 涵涵违反规则,在爸爸和妈妈都同意的情况下,可以给无表情脸 爸爸违反规则,在妈妈和涵涵都同意的情况下,可以给无表情脸 获奖记 ...