js学习笔记26----事件冒泡，事件捕获
2.给一个对象的同一个事件绑定多个不同的函数：
<!DOCTYPE html>
<html lang="en">
<head>
<title>事件捕获</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
window.onload = function(){
function fn1(){
alert(this);
alert(1);
}
function fn2(){
alert(this);
alert(2);
}
/*
document.onclick = fn1;
document.onclick = fn2; //后面的覆盖前面的
*/ //ie写法
//document.attachEvent('onclick',fn1);
//document.attachEvent('onclick',fn2); //标准写法
//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>
<div> </div>
</body>
</html>
call示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>call</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
window.onload = function(){
function fn1(){
alert(this);
} function fn2(a,b){
alert(this);
alert(a+b);
} //fn1(); //window
//fn1.call(); //弹出window,此时就等同于fn1()
//fn1.call(1); //弹出1，call的第一个参数为this的指向
//fn2.call(1,4,10); //依次弹出1，14，如果函数有参数时，则第一个为this的指向，后面为函数带的参数
fn2.call(null,4,10); //依次弹出window，14，第一个参数为null表示不改变this指向。
} </script>
</head>
<body>
<div> </div>
</body>
</html>
js学习笔记26----事件冒泡，事件捕获的更多相关文章
- node.js学习笔记（三）——事件循环
要理解事件循环,首先要理解事件驱动编程(Event Driven Programming).它出现在1960年.如今,事件驱动编程在UI编程中大量使用.JavaScript的一个主要用途是与DOM交互 ...
- Node.js学习笔记（三）: 事件机制
大部分的nodejs核心api都建立在异步的事件驱动架构之上,所以events是Node.js 最重要的模块,它提供了唯一的接口.events 模块不仅用于用户代码与 Node.js 下层事件循环的交 ...
- JS学习笔记9之event事件及其他事件
-->鼠标事件-->event事件对象-->默认事件-->键盘事件(keyCode)-->拖拽效果 一.鼠标事件 onclick ---------------鼠标点击事 ...
- 【JS学习笔记】提取行间事件
行间提取事件第一种方法: function 名字() { ... } oBtn.onclick=名字: 第二种方法: oBtn.onclick=function () { ... } 其实在JS当中, ...
- [JS学习笔记]浅谈Javascript事件模型
DOM0级事件模型 element.on[type] = function(){} 兼容性:全部支持 lay1 lay2 lay3 e.target:直接触发事件的元素[IE8及以下不支持tage ...
- [JS学习笔记]Javascript事件阶段：捕获、目标、冒泡
当你在浏览器上点击一个按钮时,点击的事件不仅仅发生在按钮上,同时点击的还有这个按钮的容器元素,甚至也点击了整个页面. 事件流 事件流描述了从页面接收事件的顺序,但在浏览器发展到第四代时,浏览器开发团队 ...
- [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播
-->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...
- JS 事件冒泡、捕获。学习记录
作为一个转行刚到公司的新人,任务不多,这一周任务全部消灭,闲暇的一天也别闲着,悄悄的看起了书.今天写一下JS的事件冒泡.捕获. 也是今天看的内容有点多了,有些消化不了,就随手记录一下.纯属自我理解,如 ...
- js学习笔记---事件代理
事件机制可以分为捕获型和冒泡型.捕获型是事件由父级元素(DOM)传递到子元素.冒泡型正好相反.事件机制默认为冒泡型.事件机制可以通过参数指定. 事件委托可以将我们绑定在document上的事件自动绑定 ...
随机推荐
- 浅谈PHP数据结构之栈
今天開始进阶自己的PHP,首先一切的编程语言都须要修炼自己的"内功",何为程序猿的"内功",我想大概就是数据结构和算法了吧 .毕竟是灵魂,是普通程序猿到高级程序 ...
- 基于Struts2、Spring、Hibernate实现的包括多条件查询分页的基础Dao层帮助jar包实现
操作数据库经常使用操作就是增删查改.每做一次就写一次这些操作太麻烦,也不是必需,特别是写多条件查询并分页时.太痛苦了,所以抽出时间写了个dao帮助jar.导入即搞定!妈妈再有不用操心我的项目了! 转载 ...
- js冒泡法和数组转换成字符串
js代码: window.onload = function(){ var mian = document.getElementById( "mian" ); var mian1 ...
- UNIX网络编程读书笔记：select函数
select函数概况: select函数允许进程指示内核等待多个事件中的任何一个发生,并仅在有一个或多个事件发生或经历一段指定的时间后才唤醒它. 作为一个例子,我们可以调用select,告知内核仅在下 ...
- Static Proxy （静态代理模式）
1.定义一个接口 ProxyInterface.java package com.staticproxy ; public interface ProxyInterface //就假设为 定义一个购 ...
- udp套接字使用信号驱动式I/O
信号驱动式I/O的本质就是:进程预先告知内核当某个描写叙述符发生事件时,内核会向该进程发送SIGIO信号通知进程,进程可在信号处理函数中进行处理 进程能够通过fcntl打开O_ASYNC标志或ioct ...
- UML基本架构建模－－类的辅助信息
Organizing Attributes and Operations 组织属性和操作 When drawing a class, you don't have to show every attr ...
- C# 判断是否是节假日
1.引用Newtonsoft.Json.dll 2. /// <summary> /// 判断是不是节假日,节假日返回true /// </summar ...
- 本地ubuntu下pycharm 如何利用远程开发环境时显示图片
最近使用pycharm远程开发tensorflow,每次在想显示图像时,苦于不知怎么操作,就通过保存后再看结果,使得调试很不方便.今天打算解决这个问题,收获也是很多啊. 我首先参考了这两篇博客: ht ...
- C++模板类内友元(友元函数,友元类)声明的三种情况
根据<C++ Primer>第三版16.4节的叙述,C++类模板友元分为以下几种情况 1.非模板友元类或友元函数. 书上给了一个例子: class Foo{ void bar(); ...