IE事件模型－－向上冒泡
2007-06-13 09:38
253 查看
<SCRIPT>
function checkCancel()
{
window.event.cancelBubble = true;
document.write(123)
alert('abc')
}
function showSrc()
{
alert(123)
}
</SCRIPT>
</HEAD>
<BODY onclick="showSrc()">
<input type="button" onclick="checkCancel()" value="测试IE的向上冒泡">
</BODY>
IE事件模型－－向上冒泡, 从触发源到document树对象模型dom依次触发的过程
在dom2标准模型中可以控制向下捕捉事件的过程从document到触发源.（IE中不支持）
事件捕捉(capturing)的过程分三阶段，第一阶段就是向下捕捉, 第二目标节点，第三是事件传播－向上(bubbling)
所有事件都受捕捉阶段的控制,但向上传播触发的过程也有一些自已的规则
iE中停止传播的方法是window.event.cancelBubble = true;
在fireFox中, dom2级中是stopPropagation()
=====================
注册多个处理程序
dom 2中addEventListener()及removeEventListener()三个参数，true为仅用于捕捉事件，触发是不bubbling,为false为常规事件，将触发。。
ie中attachEvent及detachEvent方法
=====================================
以下为asp.net中的服务器组合控件中的bubbling， override OnBubbleEven重写的冒泡，为true是则允许捕捉到里面的子控件。从传播的角度而言，应该说是里面的子控件可以冒泡为外面的事件。(不点不通， 晕， 为个么不叫捕捉不更好理解吗，难道只是为了不引入一个新概念)
using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace CustomControls
{
public class EventBubbler : Control, INamingContainer
{
private int number = 100;
private Label label;
private TextBox box1;
private TextBox box2;
public event EventHandler Click;
public event EventHandler Reset;
public event EventHandler Submit;
public string Label
{
get
{
EnsureChildControls();
return label.Text;
}
set
{
EnsureChildControls();
label.Text = value;
}
}
public int Number
{
get
{
return number;
}
set
{
number = value;
}
}
public string Text1
{
get
{
EnsureChildControls();
return box1.Text;
}
set
{
EnsureChildControls();
box1.Text = value;
}
}
public string Text2
{
get
{
EnsureChildControls();
return box2.Text;
}
set
{
EnsureChildControls();
box2.Text = value;
}
}
protected override void CreateChildControls()
{
Controls.Add(new LiteralControl("<h3>Enter a number : "));
box1 = new TextBox();
box1.Text = "0";
Controls.Add(box1);
Controls.Add(new LiteralControl("</h3>"));
Controls.Add(new LiteralControl("<h3>Enter another number : "));
box2 = new TextBox();
box2.Text = "0";
Controls.Add(box2);
Controls.Add(new LiteralControl("</h3>"));
Button button1 = new Button();
button1.Text = "Click";
button1.CommandName = "Click";
Controls.Add(button1);
Button button2 = new Button();
button2.Text = "Reset";
button2.CommandName = "Reset";
Controls.Add(button2);
Button button3 = new Button();
button3.Text = "Submit";
button3.CommandName = "Submit";
Controls.Add(button3);
Controls.Add(new LiteralControl("<br><br>"));
label = new Label();
label.Height = 50;
label.Width = 500;
label.Text = "Click a button.";
Controls.Add(label);
}
protected override bool OnBubbleEvent(object source, EventArgs e)
{
bool handled = false;
if (e is CommandEventArgs)
{
CommandEventArgs ce = (CommandEventArgs)e;
if (ce.CommandName == "Click")
{
OnClick(ce);
handled = true;
}
else if (ce.CommandName == "Reset")
{
OnReset(ce);
handled = true;
}
else if (ce.CommandName == "Submit")
{
OnSubmit(ce);
handled = true;
}
}
return handled;
}
protected virtual void OnClick (EventArgs e)
{
if (Click != null)
{
Click(this,e);
}
}
protected virtual void OnReset (EventArgs e)
{
if (Reset != null)
{
Reset(this,e);
}
}
protected virtual void OnSubmit (EventArgs e)
{
if (Submit != null)
{
Submit(this,e);
}
}
}
}
==================
<%@ Register TagPrefix="Custom" Namespace="CustomControls" Assembly = "CNTO_WebControls" %>
<HTML>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="C#" runat="server">
private void ClickHandler(Object sender,EventArgs e)
{
MyControl.Label = "You clicked the <b> Click </b> button";
}
private void ResetHandler(Object sender,EventArgs e)
{
MyControl.Text1 = "0";
MyControl.Text2 = "0";
}
private void SubmitHandler(Object sender,EventArgs e)
{
if ( Int32.Parse(MyControl.Text1) + Int32.Parse(MyControl.Text2) == MyControl.Number)
MyControl.Label = "<h2> You won a million dollars!!!! </h2>";
else
MyControl.Label = "Sorry, try again. The numbers you entered don't add up to" +
" the hidden number.";
}
</script>
<body>
<h1>
The Mystery Sum Game
</h1>
<br>
<form runat="server" ID="Form1">
<Custom:EventBubbler id="MyControl" OnClick="ClickHandler" OnReset="ResetHandler" OnSubmit="SubmitHandler"
Number="10" runat="server" />
</form>
</body>
</HTML>
========================
A 事件流（event flow ）
事件模型分为两种：冒泡型事件、捕获型事件。
冒泡型（dubbed bubbling ）事件：指事件按照从最精确的对象到最不精确的对象的顺序逐一触发。
捕获型（event capturing ）事件：它与冒泡型事件相反，指事件按照从最不精确的对象到最精确的对象的顺序逐一触发。
捕获型事件也被称作自顶向下（DOM层次）的事件模型。
由于IE 浏览器不支持捕获型事件，因此并没有被广泛应用。
B 事件监听
i > 通用监听方法
示例一：
代码如下:
<p onclick="alert('点击了');">Click Me</p>
示例二：
代码如下:
<html>
<head>
<title> demo </title>
<meta name="Author" content="xugang" />
<script type="text/javascript">
// 在onload 事件中添加所有标签的事件
window.onload = function(){
// 找到对象
var o_p = document.getElementById("myp");
// 添加对象的onclick 事件
o_p.onclick = function(){
alert("我被点击了");
}
}
</script>
</head>
<body>
<p id="myp">Click Me</p>
</body>
</html>
此代码实现了结构与行为的分离。
给浏览器添加监听方法，分为两种：IE 中的监听方法、标准DOM 的监听方法。
ii > IE 中的监听方法
在IE 浏览器中，每个元素都有两个方法来处理事件的监听。分别是：attachEvent( ) 和 detachEvent( ) 。
附加事件方法：[object].attachEvent(“事件名”，方法名);
分离事件方法：[object].detachEvent(“事件名”，方法名);
如：o_p.detachEvent("onclick",click_A);
示例：
代码如下:
<html>
<head>
<title> demo </title>
<meta name="Author" content="xugang" />
<script type="text/javascript">
<!--
function click_A(){
alert("click_A");
//删除监听函数
o_p.detachEvent("onclick",click_B);
}
function click_B(){
alert("click_B, 我只调用一次。");
}
var o_p;
window.onload = function(){
o_p = document.getElementById("myP");
// 添加监听函数 click_A
o_p.attachEvent("onclick",click_A);
// 添加监听函数 click_B
o_p.attachEvent("onclick",click_B);
}
//-->
</script>
</head>
<body>
<p id="myP">Click Me</p>
</body>
</html>
注意：
● 使用这种方式可以为同一元素添加多个监听函数；
● 在IE 浏览器中，函数的执行顺序与函数的添加顺序相反；
● 在IE 浏览器中，虽然函数有先后执行顺序，但都会同时调用；
iii > 标准DOM 的监听方法
在使用标准DOM 的浏览器中，每个元素也有两个方法来处理事件的监听。分别是：addEventListener( ) 和 removeEventListener( ) 。
添加事件监听方法：[object].addEventListener(“事件名”，方法名，事件模型 );
移除事件监听方法：[object].removeEventListener(“事件名”，方法名，事件模型 );
注意：
这里的“事件名”不能带 on ，如：click（如果是onclick 则错误！）
“事件模型”为boolean 类型，通常设置为 false ，即“冒泡型”事件。（如果是true 则为“捕获型”事件）
示例：
代码如下:
<html>
<head>
<title> demo </title>
<meta name="Author" content="xugang" />
<script type="text/javascript">
<!--
function click_A(){
alert("click_A");
//删除监听函数
o_p.removeEventListener("click",click_B,false);
}
function click_B(){
alert("被click_A删除, 一次都不能调用。");
}
var o_p;
window.onload = function(){
o_p = document.getElementById("myP");
// 添加监听函数 click_A
o_p.addEventListener("click",click_A,false);
// 添加监听函数 click_B
o_p.addEventListener("click",click_B,false);
}
//-->
</script>
</head>
<body>
<p id="myP">Click Me</p>
</body>
</html>
在Firefox 下运行通过，在IE 下报错。
注意：
● 使用这种方式同样可以为同一元素添加多个监听函数；
● 在Firefox 浏览器中，函数的执行顺序与函数的添加顺序一致（Firefox 与IE 正好相反）；
● 在Firefox 浏览器中，这种方式添加的函数是执行外一个再执行另一个（逐个执行）；
function checkCancel()
{
window.event.cancelBubble = true;
document.write(123)
alert('abc')
}
function showSrc()
{
alert(123)
}
</SCRIPT>
</HEAD>
<BODY onclick="showSrc()">
<input type="button" onclick="checkCancel()" value="测试IE的向上冒泡">
</BODY>
IE事件模型－－向上冒泡, 从触发源到document树对象模型dom依次触发的过程
在dom2标准模型中可以控制向下捕捉事件的过程从document到触发源.（IE中不支持）
事件捕捉(capturing)的过程分三阶段，第一阶段就是向下捕捉, 第二目标节点，第三是事件传播－向上(bubbling)
所有事件都受捕捉阶段的控制,但向上传播触发的过程也有一些自已的规则
iE中停止传播的方法是window.event.cancelBubble = true;
在fireFox中, dom2级中是stopPropagation()
=====================
注册多个处理程序
dom 2中addEventListener()及removeEventListener()三个参数，true为仅用于捕捉事件，触发是不bubbling,为false为常规事件，将触发。。
ie中attachEvent及detachEvent方法
=====================================
以下为asp.net中的服务器组合控件中的bubbling， override OnBubbleEven重写的冒泡，为true是则允许捕捉到里面的子控件。从传播的角度而言，应该说是里面的子控件可以冒泡为外面的事件。(不点不通， 晕， 为个么不叫捕捉不更好理解吗，难道只是为了不引入一个新概念)
using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace CustomControls
{
public class EventBubbler : Control, INamingContainer
{
private int number = 100;
private Label label;
private TextBox box1;
private TextBox box2;
public event EventHandler Click;
public event EventHandler Reset;
public event EventHandler Submit;
public string Label
{
get
{
EnsureChildControls();
return label.Text;
}
set
{
EnsureChildControls();
label.Text = value;
}
}
public int Number
{
get
{
return number;
}
set
{
number = value;
}
}
public string Text1
{
get
{
EnsureChildControls();
return box1.Text;
}
set
{
EnsureChildControls();
box1.Text = value;
}
}
public string Text2
{
get
{
EnsureChildControls();
return box2.Text;
}
set
{
EnsureChildControls();
box2.Text = value;
}
}
protected override void CreateChildControls()
{
Controls.Add(new LiteralControl("<h3>Enter a number : "));
box1 = new TextBox();
box1.Text = "0";
Controls.Add(box1);
Controls.Add(new LiteralControl("</h3>"));
Controls.Add(new LiteralControl("<h3>Enter another number : "));
box2 = new TextBox();
box2.Text = "0";
Controls.Add(box2);
Controls.Add(new LiteralControl("</h3>"));
Button button1 = new Button();
button1.Text = "Click";
button1.CommandName = "Click";
Controls.Add(button1);
Button button2 = new Button();
button2.Text = "Reset";
button2.CommandName = "Reset";
Controls.Add(button2);
Button button3 = new Button();
button3.Text = "Submit";
button3.CommandName = "Submit";
Controls.Add(button3);
Controls.Add(new LiteralControl("<br><br>"));
label = new Label();
label.Height = 50;
label.Width = 500;
label.Text = "Click a button.";
Controls.Add(label);
}
protected override bool OnBubbleEvent(object source, EventArgs e)
{
bool handled = false;
if (e is CommandEventArgs)
{
CommandEventArgs ce = (CommandEventArgs)e;
if (ce.CommandName == "Click")
{
OnClick(ce);
handled = true;
}
else if (ce.CommandName == "Reset")
{
OnReset(ce);
handled = true;
}
else if (ce.CommandName == "Submit")
{
OnSubmit(ce);
handled = true;
}
}
return handled;
}
protected virtual void OnClick (EventArgs e)
{
if (Click != null)
{
Click(this,e);
}
}
protected virtual void OnReset (EventArgs e)
{
if (Reset != null)
{
Reset(this,e);
}
}
protected virtual void OnSubmit (EventArgs e)
{
if (Submit != null)
{
Submit(this,e);
}
}
}
}
==================
<%@ Register TagPrefix="Custom" Namespace="CustomControls" Assembly = "CNTO_WebControls" %>
<HTML>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="C#" runat="server">
private void ClickHandler(Object sender,EventArgs e)
{
MyControl.Label = "You clicked the <b> Click </b> button";
}
private void ResetHandler(Object sender,EventArgs e)
{
MyControl.Text1 = "0";
MyControl.Text2 = "0";
}
private void SubmitHandler(Object sender,EventArgs e)
{
if ( Int32.Parse(MyControl.Text1) + Int32.Parse(MyControl.Text2) == MyControl.Number)
MyControl.Label = "<h2> You won a million dollars!!!! </h2>";
else
MyControl.Label = "Sorry, try again. The numbers you entered don't add up to" +
" the hidden number.";
}
</script>
<body>
<h1>
The Mystery Sum Game
</h1>
<br>
<form runat="server" ID="Form1">
<Custom:EventBubbler id="MyControl" OnClick="ClickHandler" OnReset="ResetHandler" OnSubmit="SubmitHandler"
Number="10" runat="server" />
</form>
</body>
</HTML>
========================
A 事件流（event flow ）
事件模型分为两种：冒泡型事件、捕获型事件。
冒泡型（dubbed bubbling ）事件：指事件按照从最精确的对象到最不精确的对象的顺序逐一触发。
捕获型（event capturing ）事件：它与冒泡型事件相反，指事件按照从最不精确的对象到最精确的对象的顺序逐一触发。
捕获型事件也被称作自顶向下（DOM层次）的事件模型。
由于IE 浏览器不支持捕获型事件，因此并没有被广泛应用。
B 事件监听
i > 通用监听方法
示例一：
代码如下:
<p onclick="alert('点击了');">Click Me</p>
示例二：
代码如下:
<html>
<head>
<title> demo </title>
<meta name="Author" content="xugang" />
<script type="text/javascript">
// 在onload 事件中添加所有标签的事件
window.onload = function(){
// 找到对象
var o_p = document.getElementById("myp");
// 添加对象的onclick 事件
o_p.onclick = function(){
alert("我被点击了");
}
}
</script>
</head>
<body>
<p id="myp">Click Me</p>
</body>
</html>
此代码实现了结构与行为的分离。
给浏览器添加监听方法，分为两种：IE 中的监听方法、标准DOM 的监听方法。
ii > IE 中的监听方法
在IE 浏览器中，每个元素都有两个方法来处理事件的监听。分别是：attachEvent( ) 和 detachEvent( ) 。
附加事件方法：[object].attachEvent(“事件名”，方法名);
分离事件方法：[object].detachEvent(“事件名”，方法名);
如：o_p.detachEvent("onclick",click_A);
示例：
代码如下:
<html>
<head>
<title> demo </title>
<meta name="Author" content="xugang" />
<script type="text/javascript">
<!--
function click_A(){
alert("click_A");
//删除监听函数
o_p.detachEvent("onclick",click_B);
}
function click_B(){
alert("click_B, 我只调用一次。");
}
var o_p;
window.onload = function(){
o_p = document.getElementById("myP");
// 添加监听函数 click_A
o_p.attachEvent("onclick",click_A);
// 添加监听函数 click_B
o_p.attachEvent("onclick",click_B);
}
//-->
</script>
</head>
<body>
<p id="myP">Click Me</p>
</body>
</html>
注意：
● 使用这种方式可以为同一元素添加多个监听函数；
● 在IE 浏览器中，函数的执行顺序与函数的添加顺序相反；
● 在IE 浏览器中，虽然函数有先后执行顺序，但都会同时调用；
iii > 标准DOM 的监听方法
在使用标准DOM 的浏览器中，每个元素也有两个方法来处理事件的监听。分别是：addEventListener( ) 和 removeEventListener( ) 。
添加事件监听方法：[object].addEventListener(“事件名”，方法名，事件模型 );
移除事件监听方法：[object].removeEventListener(“事件名”，方法名，事件模型 );
注意：
这里的“事件名”不能带 on ，如：click（如果是onclick 则错误！）
“事件模型”为boolean 类型，通常设置为 false ，即“冒泡型”事件。（如果是true 则为“捕获型”事件）
示例：
代码如下:
<html>
<head>
<title> demo </title>
<meta name="Author" content="xugang" />
<script type="text/javascript">
<!--
function click_A(){
alert("click_A");
//删除监听函数
o_p.removeEventListener("click",click_B,false);
}
function click_B(){
alert("被click_A删除, 一次都不能调用。");
}
var o_p;
window.onload = function(){
o_p = document.getElementById("myP");
// 添加监听函数 click_A
o_p.addEventListener("click",click_A,false);
// 添加监听函数 click_B
o_p.addEventListener("click",click_B,false);
}
//-->
</script>
</head>
<body>
<p id="myP">Click Me</p>
</body>
</html>
在Firefox 下运行通过，在IE 下报错。
注意：
● 使用这种方式同样可以为同一元素添加多个监听函数；
● 在Firefox 浏览器中，函数的执行顺序与函数的添加顺序一致（Firefox 与IE 正好相反）；
● 在Firefox 浏览器中，这种方式添加的函数是执行外一个再执行另一个（逐个执行）；
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 面试题-冒泡与捕获、事件委托、ie事件和dom模型事件、鼠标事件
- 怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别
- JavaScript阻止事件冒泡（兼容IE、Chrome、FF）
- JavaScript之事件的处理模型---事件冒泡，捕获及取消冒泡，阻止默认事件
- JS中的事件绑定，事件捕获，事件冒泡以及事件委托，兼容IE
- JS中的事件绑定，事件捕获，事件冒泡以及事件委托，兼容IE
- IE和火狐的事件机制有什么区别？如何阻止冒泡？
- js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)
- jquery 事件冒泡 解决 ie firefox 兼容性问题
- 前端基本知识（一）：W3C标准&&冒泡事件，捕获事件，W3C DOM对象模型，对比分析
- JS中的事件绑定，事件捕获，事件冒泡以及事件委托，兼容IE
- javascript中防止IE事件冒泡
- JS 取消冒泡事件 兼容火狐IE
- IE与火狐下兼容（阻止冒泡事件）
- javascript事件捕获机制【深入分析IE和DOM中的事件模型】
- DOM标准与IE的html元素事件模型区别
- 标准事件模型和IE事件模型
- IE事件模型与DOM事件模型
- IE事件模型中的fireEvent
- IE下，事件冒泡二三事