IE事件模型－－向上冒泡

来源：互联网发布：阿里云ubuntu图形界面编辑：程序博客网时间：2024/05/17 03:04

<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">

</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">

</script>
</head>
<body>
<p id="myP">Click Me</p>
</body>
</html>

在Firefox 下运行通过，在IE 下报错。
注意：
● 使用这种方式同样可以为同一元素添加多个监听函数；
● 在Firefox 浏览器中，函数的执行顺序与函数的添加顺序一致（Firefox 与IE 正好相反）；
● 在Firefox 浏览器中，这种方式添加的函数是执行外一个再执行另一个（逐个执行）；