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上的事件自动绑定 ...
随机推荐
- es5 - array - reverse
/** * 描述:也就是数组元素反转 * 使用:arr.reverse() */ var a = [1,2,3]; console.log(a.reverse()); /** * 一个经典的问题:如何 ...
- Unity for Windows: II – Publishing Unity games to Windows Store
原地址:http://digitalerr0r.wordpress.com/2013/08/27/unity-for-windows-ii-publishing-to-windows-8/ Windo ...
- [Swift A] - A Swift Tour
首先说下自己对Swift语言的一点点看法,对于一个写过javascript和常年写java代码的人来说,学习Swift是一件很简单的事情.就像某某人说过,每个人都有弱点和优点,我到目前为止,只是初步的 ...
- 后台管理-基于 Bootstrap 开发的网站后台管理面板
Bootstrap 开发框架真的很强大,今天推荐几个非常不错的基于 Bootstrap 开发的网站后台管理面板,全部都是响应式布局,细节做得都很不错.可以搜索keenthemes. Metronic ...
- Android设计模式系列(1)--SDK源码之组合模式
Android中对组合模式的应用,可谓是泛滥成粥,随处可见,那就是View和ViewGroup类的使用.在android UI设计,几乎所有的widget和布局类都依靠这两个类.组合模式,Compos ...
- Linux命令-目录处理命令:ls
ls 查看当前目文件 ls -a 查看当前目录的所有文件(--all所有文件) 以"."开头的文件是隐藏文件. ls / 查看根目录的文件 ls -l 查看当前目录文件(--lo ...
- hive 分位数函数 percentile(col, p)
注意在偶数情况下,中位数会存在小数,特别注意! hive里面倒是有个percentile函数和percentile_approx函数,其使用方式为percentile(col, p).percenti ...
- Android_WebServices_源代码分析
本博文为子墨原创,转载请注明出处! http://blog.csdn.net/zimo2013/article/details/38037989 在Android_WebServices_介绍一文中, ...
- mplayer 全屏问题
[root@ok home]# gedit ~/.mplayer/config # Write your default config options here! zoom=yes #加上这个参数!全 ...
- UIViewController的生命周期及iOS程序执行顺序 和ios6 处理内存警告
当一个视图控制器被创建,并在屏幕上显示的时候. 代码的执行顺序1. alloc 创建对象,分配空间2.init (initWithN ...