[javascript]事件冒泡处理
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#box1 {
width: 400px;
height: 400px;
background: #ccc;
}
#box2 {
width: 300px;
height: 300px;
background: #ddd;
}
#box3 {
width: 200px;
height: 200px;
background: #eee;
}
</style>
<script type="text/javascript"> function addEventListener(obj, f, type) {
if (obj.addEventListener) {
obj.addEventListener(type, f, false);
} else {
obj.attachEvent('on' + type, function(event) {
f.call(obj, event);
});
}
} function stopPropagation(event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
} window.onload = function() {
var box1 = document.querySelector('#box1');
var box2 = document.querySelector('#box2');
var box3 = document.querySelector('#box3'); addEventListener(box1, function(event) {
stopPropagation(event);
alert('box1');
}, 'click'); addEventListener(box2, function(event) {
stopPropagation(event);
alert('box2');
}, 'click'); addEventListener(box3, function(event) {
stopPropagation(event);
alert('box3');
}, 'click');
}
</script>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3">
</div>
</div>
</div>
</body>
</html>
[javascript]事件冒泡处理的更多相关文章
- 解析Javascript事件冒泡机制
本资源引自: 解析Javascript事件冒泡机制 - 我的程序人生 - 博客频道 - CSDN.NET http://blog.csdn.net/luanlouis/article/details/ ...
- 转：JavaScript事件冒泡简介及应用
(本文转载自别处) JavaScript事件冒泡简介及应用 一.什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理 ...
- JavaScript事件冒泡和事件委托
JavaScript事件冒泡和事件委托 付建宇 - 2 条评论 接触JavaScript不久,学的东西也不是特别多.小雨就是习惯把平时学到的东西拿出来分享.一方面加强自己的印象,一方面可以让自己的经验 ...
- JavaScript事件——冒泡、捕获
本节要点:1.干预系统的事件处理机制 (一)DOM事件流 (二)停止事件冒泡 (三)阻止事件的默认行为 1.干预系统的事件处理机制 (一)DOM事件流 DOM模型是一个树形结构,在DOM模型中,HTM ...
- Javascript事件冒泡机制
1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然后做出相应的动作. 浏览器的事件表示的是某些事情发生的信号.事件的阐述不是本文的重点,尚未了解的朋友,可以访问W3scho ...
- JavaScript事件冒泡简介及应用
一.什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事 件处理程序或者事件返回true,那么这个 ...
- javascript事件冒泡
1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然后做出相应的动作. 浏览器的事件表示的是某些事情发生的信号.事件的阐述不是本文的重点,尚未了解的朋友,可以访问W3scho ...
- 解析Javascript事件冒泡机制(转) 本文转自：http://blog.csdn.net/luanlouis/article/details/23927347
本文转自:http://blog.csdn.net/luanlouis/article/details/23927347 1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然 ...
- JavaScript事件冒泡机制和阻止事件冒泡及默认事件
一.阻止事件冒泡: 1.html中加return false 2.js中加return false 3.IE下:window.event.cancelBubble = true: FF下:event ...
- 解析Javascript事件冒泡机制(转)
本文转自:http://blog.csdn.net/luanlouis/article/details/23927347 1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然 ...
随机推荐
- 数学（FFT）：BZOJ 3527 [Zjoi2014]力
题目在这里:http://wenku.baidu.com/link?url=X4j8NM14MMYo8Q7uPE7-7GjO2_TXnMFA2azEbBh4pDf7HCENM3-hPEl4mzoe2w ...
- FFT(快速傅立叶变换)：HDU 1402 A * B Problem Plus
Calculate A * B. Input Each line will contain two integers A and B. Process to end of file. Note: th ...
- 【模拟】Codeforces 671A Recycling Bottles
题目链接: http://codeforces.com/problemset/problem/671/A 题目大意: A和B在一张二维平面上,平面上有N个垃圾,垃圾桶只有一个在T,问把所有垃圾全扔进垃 ...
- form.Show()和form.ShowDialog()的区别、新建一个form和MessageBox.Show()的常见用法
一:form.Show()和form.ShowDialog()的区别 a. 任何窗体(派生于基类Form的类),都可以以两种方式进行显示. //非模式窗体From qform=new Form();q ...
- sql server 2008有关SQL的模糊查询
执行 数据库查询时,有完整查询和模糊查询之分. 一般模糊语句如下: SELECT 字段 FROM 表 WHERE 某字段 Like 条件 其中关于条件,SQL提供了四种匹配模式: 1,%:表示任意0个 ...
- getElementById返回的是什么？串讲HTML DOM
1. getElementById()返回的是什么? 这个函数使用的最普遍,但是你有没有深入探究下,这个函数究竟返回的是什么么?我们来一起看看. var mydivEle = document.get ...
- HDOJ 2802 F(N)
Problem Description Giving the N, can you tell me the answer of F(N)? Input Each test case contains ...
- Velocity常用方法
1.字符串替换 replace#if($!{name} != '')#set($tempName = $!{name})#set($tempName = $tempName.Replace('abc' ...
- 用document.getElementsByTagName()返回的真的是数组吗？
document.getElementsByTagName()返回的真的是数组吗? 这是这几天开发中遇到的问题. 一个如下的HTML结构: <ul> <li> <li&g ...
- 在VC中集成cURL
libcurl 库的代码是完全开源的,但是我们一般不会在项目中直接引入它的源代码,而是通过动态链接库隐式链接的方式引入 libcrul 库.也就是说,我们需要在自己的项目中引入 libcrul 相关的 ...