📄 3.3.2.htm
字号:
<html>
<head>
<title>Untitled Document</title>
<LINK REL ="stylesheet" TYPE = "text/css" HREF = ".../contents.css">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#FFFFFF">
<h2 align="center">事件浮升</h2>
<p>在 3.3.1.3 的示例中，虽然事件发生在超链接标记符，但事件处理函数却定义在 BODY 标记符中，然而这并没有影响到我们期望的效果。这实际上反映了
Internet Explorer 处理事件时的一个机制，称为事件浮升（Event Bubbling）。</p>
<p>
事件浮升的含义为：当事件发生时，它首先定向到发生事件的最底层对象，然后依次上浮，由各级对象定义的事件处理函数依次处理；如果某一级对象没有定义处理函数，则事件直接上浮。例如，在
3.3.1.3 的示例中，事件首先定向到 A 对象，由于该对象没有定义事件处理函数，因此直接上浮到上一层对象 BODY，而 BODY 对象中定义了 onclick
事件处理函数，于是调用该函数处理发生在 A 对象上的 click 事件。<p>
以下示例进一步显示了事件浮升机制的作用--当用户单击文档中的按钮时，click 事件依次由 INPUT 对象、FORM 对象和 BODY 对象中的事件处理函数进行处理。
<p><a href="../src/tu3.8.htm" target="_blank">示例</a>
<p>当用户单击"请单击此处"按钮时，首先显示"Click 事件由 buttonHandler() 函数处理！"提示框，单击"确定"按钮后，事件浮升到 FORM 对象，由 formHandler() 函数进行处理，单击"确定"按钮后，事件进一步浮升，由
documentHandler() 处理，（如果用户在按钮以外的区域单击鼠标左键，则会直接显示该提示框）。
<p>
<p>
在事件处理过程中，如果需要事件停止浮升，则应设置 event 对象的 cancelBubble 属性为 true，如下所示：<p>
window.event.cancelBubble=true;<p>
例如，在刚才的事件浮升示例中，如果将 buttonHandler() 按如下方式定义，则事件仅由该处理函数处理，而不会继续浮升到上级对象。<p>
function buttonHandler()<p>
{<p>
alert("Click 事件由 buttonHandler() 函数处理！")<p>
window.event.cancelBubble=true;<p>
}<p>
说明：设置 cancelBubble 属性只影响当前事件的浮升，而不影响其他事件。
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -