web前端结构与行为的分离

最新推荐文章于 2025-06-18 22:39:04 发布

原创最新推荐文章于 2025-06-18 22:39:04 发布 · 240 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Web #数据结构 #IE #ActionScript #浏览器

JavaScript 专栏收录该内容

44 篇文章

订阅专栏

本文详细介绍了如何通过函数initBehavior()实现Web前端结构与行为的分离，包括事件触发与响应操作的连接。通过解析不同浏览器事件参数的不同表现，实现了事件来源对象的操作，并解释了事件参数传递的机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

web前端结构与行为的分离(转)-代码 (2006-12-13 11:13:02)

函数initBehavior()的作用就是建立一个操作序列，为每个html文档结构中需要使用行为的对象进行事件触发与相应操作处理函数的连接，即生成行为。如例子中对id为holder的div元素添加的onclick事件函数，同理也可以添加onmouseover，onmouseout……等事件。于是我们分离的第一步完成了，这一步要做的就是重复initBehavior函数里面的内容，添加其他触发事件。

接下来要做的就是具体实现每个触发函数了，如上例showNode()函数，问题的核心也就在这里，因为定义的是事件处理入口，函数中没办法在定义事件的时候就确定参数，于是参数表就隐式被传递了。为什么说有参数表，这也是在查阅了网上一些资料才知道的，每个函数也是一个对象，函数对象就有一个属性是arguments:Array()，而当函数被调用时，参数都是arguments里的元素，这个大家可以另外做测试。要说的是，不同的浏览器在这里有一点小小的区别，对于IE，每当一个事件被触发时他的一个全局对象window.event就会接收到信息，在处理函数的参数表里并没有体现。而FF则不同，一个事件触发时，则与这个事件连接的处理函数会带有一个默认的事件参数，作为参数表里的第一个参数传递给处理函数，这里参数表就派上用场了，看上面的程序，由于函数没有定义形参，IE解析的参数表里面是空的，所以函数里定义的evt得到的是event的引用，FF则因为事件作为第一个参数表里的元素也得到一个事件对象。下一句也就容易理解了，对于不同浏览器，FF的事件来源属性是target，IE的是srcElement，那么到这里就通过解析得到事件来源对象，也就可以对这个对象进行相关操作了，那么本来需要从函数传递过来的对象参数也就不必要了。这里说到上面提到的一个不允许传递参数的机制，这个是在flash的ActionScript里也碰到的，仔细思考了一下，似乎明白了设置这个机制的道理，因为当一个事件触发函数时，其实需要传递的参数都是在外部暂时静态存在的，那么直接在函数里调用外部的对象或其他数据，也就完成了需求。

<html>
<head>
<title>结构与行为分离的测试</title>
<script type=”text/javascript” language=”javascript”>
function showNode(){
var evt=showNode.arguments[0]||window.event;//根据FF和IE的不同取得相应的事件对象
var element=evt.target||evt.srcElement;//根据FF和IE的不同取得事件触发对象
var showText=element.innerHTML;
alert(showText);//显示事件触发对象的内容，或者一些事件触发对象的相关操作
}
function initBehavior(){
document.getElementById(”holder”).onclick=showNode;//为特定对象触发事件连接函数
}
onload=initBehavior;//页面加载完毕后调用函数进行行为连接
</script>
</head>
<body>
<div id=”holder”>
<a href=”#”>列表标题</a>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
</ul>
</div>
</body>
</html>