搜索
查看: 5528|回复: 2

[教程] HTMLayout 事件捕获与冒泡过程

[复制链接]

4

主题

874

帖子

4704

积分

荣誉会员

Rank: 8Rank: 8

积分
4704
发表于 2014-12-9 12:08:54 | 显示全部楼层 |阅读模式
在HTML浏览器中,
一般点击元素等交互事件会首先由外层节点向内层目标节点传递 - 这是捕获(sinking)过程,
然后再返过来由内层目标节点向外层节点传递 - 这是冒泡( bubbling  ) 过程
event1.gif

这里的捕获、冒泡是相对于HTML源码里元素位置的概念。
例如 上面的 input 元素在屏幕上他是显示在最前面,而在HTML源码中,他是在最里面,HTML根节点才是在最外面

event2.gif

所有浏览器引擎都支持事件冒泡, IE11以下不支持事件捕获( 也就是不支持W3C标准的函数 addEventListener )
默认情况下,事件使用冒泡事件流(所有浏览器引擎都支持),不使用捕获事件流。

HTMLayout也一样,默认所有的事件都是在冒泡过程中处理,包括所有内置的默认事件。
例如点击一个超链接,会在冒泡过程中默认触发内置的 onHyperlinkClick 事件以打开超链接,如果希望自定义这个事件,调用其他浏览器打开一个超链接并且阻止默认的事件,那么就要在捕获过程中拦截onHyperlinkClick 事件( 因为 捕获过程 早于 冒泡传递过程 ).

在aardio中,将事件写在  sinking 表中就是在 捕获过程中触发,示例:
import win.ui;
/*DSG{{*/
var winform = ..win.form(text="HTMLayout事件流";right=599;bottom=399)
winform.add()
/*}}*/

import web.layout;
wbLayout = web.layout( winform );

import process;
wbLayout.sinking = {
    onHyperlinkClick =
function (ltTarget,ltOwner,reason,behaviorParams) {
        process.
execute( ltTarget.href );
        
return true;//阻止事件流继续传递
    }
}

wbLayout.html =
/**
<!doctype html>
<html>
<head>
    <style type="text/css">
    html,body{ height:100%; margin:0; }
    </style>
</head>
<body>
     <a href="http://bbs.aardio.com">http://bbs.aardio.com</a>
</body>
</html>
**/


winform.show();
win.loopMessage();
再举个例子:
文本框得到焦点(onFocusGot)、失去焦点( onFocusLost ) 也是被默认的behavior处理并阻止传递了,
所以也需要在捕获过程中处理,主要代码如下:
wbLayout.sinking = {
    onFocusGot = function (ltTarget,ltOwner,focusParams) {
        
    }
    onFocusLost =
function (ltTarget,ltOwner,focusParams) {
        
    }
}

相关帖子:sinking.onFormSubmit 阻止表单默认提交
wbLayout.sinking = {
    onFormSubmit = function (ltTarget,ltOwner,reason,behaviorParams) {
        io.print(ltOwner.getElementById(
"login").value );
        
return true;
    }
}

相关帖子:sinking.onKeyDown 处理文本框左右方向键
wbLayout.sinking = {
    onKeyDown = function (ltTarget,ltEle,keyCode, altState, ltKeyParams) {  
        
if( keyCode == 0x25/*_VK_LEFT*/ ){
        
        }
    }
}





回复

使用道具 举报

20

主题

325

帖子

1945

积分

新手入门

积分
1945
发表于 2014-12-9 18:14:21 | 显示全部楼层

图文并茂,简洁易懂

图文并茂,简洁易懂
回复

使用道具 举报

0

主题

2

帖子

16

积分

新手入门

Rank: 1

积分
16
发表于 2016-1-8 23:45:44 | 显示全部楼层

学习了,感谢

学习了,感谢
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

手机版|未经许可严禁引用或转载本站文章|站长邮箱|aardio.com|aardio官方社区 ( 皖ICP备09012014号 )

GMT+8, 2018-10-22 05:44 , Processed in 0.062500 second(s), 25 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表