Javascript 事件对象（五）事件捕获
事件捕获：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
div {padding: 50px;}
#div1 {background: red;}
#div2 {background: blue;}
#div3 {background: green; position: absolute; top: 300px;}
</style>
<script>
window.onload = function() { var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3'); function fn1() {
alert( this.id );
} /*oDiv1.onclick = fn1;
oDiv2.onclick = fn1;
oDiv3.onclick = fn1;*/ //true = 进去的事件
//false = 出去的事件 //告诉div1，如果有一个出去的事件触发了你，你就去执行fn1这个函数
/*oDiv1.addEventListener('click', fn1, false);
oDiv2.addEventListener('click', fn1, false);
oDiv3.addEventListener('click', fn1, false);*/ //告诉div1，如果有一个进去的事件触发了你，你就去执行fn1这个函数
/*oDiv1.addEventListener('click', fn1, true);
oDiv2.addEventListener('click', fn1, true);
oDiv3.addEventListener('click', fn1, true);*/ oDiv1.addEventListener('click', function() {
alert(1);
}, false);
oDiv1.addEventListener('click', function() {
alert(3);
}, true);
oDiv3.addEventListener('click', function() {
alert(2);
}, false);
// }
</script>
</head> <body>
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body>
</html>
Javascript 事件对象（五）事件捕获的更多相关文章
- JavaScript事件对象与事件的委托
事件对象 包含事件相关的信息,如鼠标.时间.触发的DOM对象等 js默认将事件对象封装好,并自动的以参数的形式,传递给事件处理函数的第1个参数,如下: document.getElementsByTa ...
- js跨浏览器事件对象、事件处理程序
项目中有时候会不用jquery这么好用的框架,需要自己封装一些事件对象和事件处理程序,像封装AJAX那样:这里面考虑最多的还是浏览器的兼容问题,原生js封装如下:var EventUtil={ //节 ...
- JS事件流、事件监听、事件对象、事件委托
JS事件流: 01.DOM级别和DOM事件 02.JS事件流:页面中接收事件的顺序 事件冒泡阶段-->处于目标阶段-->事件捕获阶段 (事件捕获总发生在事件冒泡前面) 03.捕获:从外向里 ...
- JS事件对象与事件委托
事件对象 包含事件相关的信息,如鼠标.时间.触发的DOM对象等 js默认将事件对象封装好,并自动的以参数的形式,传递给事件处理函数的第1个参数,如下: document.getElementsByTa ...
- 【2017-05-03】winform打印控件、事件对象和事件数据、MDI窗体容器
一.打印控件 第一步先把打印对象搞出来. - printDocument 打印对象(将要打印的内容放到该对象里,从该对象里取内容打印) 设置他的PrintPage事件(对于要打印的每一页触发一次 ...
- JavaScript的事件概述以及事件对象，事件流
事件处理程序 JavaScript 事件对象是由访问 Web 页面的用户引起的一系列操作,例如:用户点击页面上的某个按钮或者鼠标移动到页面的某个图片上而产生一系列的互动的反馈. 我们通过为指定事件绑定 ...
- 从零开始的全栈工程师——js篇2.20（事件对象 冒泡与捕获）
一.复习 面向对象 1)单例模式 2)工厂模式 3)构造函数 ①类js天生自带的类 基类object function array number math boolean date regexp st ...
- Javascript中的事件对象和事件类型
接上次看JS的事件冒泡和捕获,所以顺带就把事件相关的知识都看完好了 而且想到一个好的学习方法,第一天自己看,第二天把前一天学习的东西写下来,一方面可以当复习,一方面当重新整理并且分享 事件对象 事件处 ...
- JavaScript事件对象与事件处理程序
在学习之前建议请看一下事件流.事件冒泡.事件捕获 一.事件对象 事件对象:在DOM触发事件时,会产生一个事件对象event,这个事件对象包含着所有与事件相关的信息.既然event是事件对象,那么它必然 ...
- jQuery基础（4）- 位置信息、事件流、事件对象、事件代理、jquery事件
一.jQuery的位置信息 jQuery的位置信是JS的client系列.offset系列.scroll系列封装好的一些简便api. 1.宽度和高度 a.获取宽度和高度,例如: .width() // ...
随机推荐
- 设置apache登陆密码验证
一.编辑虚拟目录配置文件,设置认证方式 Alias /test"/var/www/test"<Directory "/var/www/test">O ...
- Traveling in Blade & Soul
Traveling in Blade & Soul Walking is too simple. Having trained their physics and spirits for ye ...
- 保存配置文件的appSetting
/// <summary> /// 保存appSetting /// </summary> /// <param name="key">appS ...
- Kotlin Groovy Style Builder
fun main(args:Array<String>):Unit{ val x = a{ aa{ +"01.01" +"01.02" } aa{ ...
- CentOS搭建VPN
安装ppp #yum install ppp 安装pptpd 配置软件源,修改/etc/yum.repos.d/Doylenet.repo,如果系统没有该文件则创建 #vim /etc/yum.rep ...
- kibana 搜索提示挡住输入框
临时解决办法 $(".typeahead-items").css("margin-top","33px")
- div随意拖动小例子
<html> <head> <title> Drag Demo 1 </title> <style type="text/css&quo ...
- Android Fragment的使用
定义 Fragment可以理解成一个迷你型的活动,同样可以包含布局,同样有自己的生命周期.比Activity要轻量级,在程序内部做界面跳转要比Activity快的多. 静态添加 Fragment可以静 ...
- Calculator(1.5)
Calculator(1.5) Github链接 ps.负数的处理未完成 解题过程中遇到的困难和解决 <stack>的使用: 认真研究了栈,基本上掌握了用法,与<queue>的 ...
- 使用expect脚本语言写一键发布服务(代码发布、所有服务重启)
互联网服务有很多台服务,但是在上线的时候需要将这些服务版本都更新与个个都重启,下面的脚本语言,就是一键发布服务~ 1.在/home/weihu/deploy/ 目录下建下publish .publis ...