JavaScript触发器 JavaScript Triggers

时间:2010-04-11 19:22:42  来源:第二电脑网  作者:第二电脑网

  第二电脑网导读:好。这三层之间应该保持严格的分离。打个比方来说,应该具有这样的可能性:可以重写整个表现层而完全不需要触动到结构层和行为层。  除了这种严格的分离,表现层和行为层都需要得到来自结构层的指令。它们必须知道在哪里应用样式,在什么时候初始化行为——换句话说:它们需要触发器。  CSS的触发器大家都很了解。class和id属性使你可以完全地控制网站的表现。然而,通过使...
  正文:网站的前端由三个层构成。由XHTML构建的结构层,它包括结构化和有语义的标签,以及网站的内容。可以在这一层之上增加一个表现层Css)和一个行为层JavaScript),它们使网站看起来更漂亮,对用户更友好。这三层之间应该保持严格的分离。打个比方来说,应该具有这样的可能性:可以重写整个表现层而完全不需要触动到结构层和行为层。

  除了这种严格的分离,表现层和行为层都需要得到来自结构层的指令。它们必须知道在哪里应用样式,在什么时候初始化行为——换句话说:它们需要触发器。

  CSS的触发器大家都很了解。class和id属性使你可以完全地控制网站的表现。然而,通过使用内联的样式属性(译者注:指写在XHTML标签中的style="..."属性),你也可以在不使用这些触发器的情况下工作,但这种用法是应该被强烈反对的。当你想要重新定义网站表现的时候,就会被迫连XHTML结构层也一起改掉。它们的出现破坏了表现和结构之间的分离。

JavaScript触发器

  行为层也应该可以用同样的方式工作。通过抛弃使用内联的事件句柄(比如onmouSEOver="switchImages('fearful',6,false)"),我们可以把行为和结构分开。和CSS一样,我们应该使用触发器去告诉脚本在哪里部署行为。

  最简单的JavaScript触发器是id属性。

<div id="navigation">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
var x = document.getElementById('navigation');
if (!x) return;
var y = x.getElementsByTagName('a');
for (var i=0;i<y.length;i++)
y[i].onmouseover = addBehavior;

  这样一来,这段脚本就由是否出现id="navigation"来触发了。如果没有id="navigation",那么什么也不会发生(if (!x) return);如果它出现了,那么所有被它包围的链接元素(指a标签)都会得到一个mouseover行为。这种解决方案简洁、优雅,在所有的浏览器中都能工作。如果这种方法已经能够满足你的需求,那么你就不需要再读下去了:)

高级触发器

  不幸的是有些情况下你不能使用id作为触发器:

  1. 一个id只能在文档中出现一次,有时候你可能想把同样的行为加到几个(或一组)元素之上。
  2. 有些情况下脚本需要比仅仅指出“在这里部署”更多的信息(译者注:比如传递一些参数)。

  我们用表单脚本来作上面两个问题的例子。给XHTML加上表单校验触发器会很实用,比如指定“这个输入域(译者注:文字输入框、密码输入框等)是必填的”。为了实现这样的触发器,我们很可能得到如下的脚本:


function validateForm()
{
var x = document.forms[0].elements;
for (var i=0;i<x.length;i++)
{
if ([这个输入域是必填的] && !x[i].value)
// notify user of error
}
}

  我们需要创建怎样的触发器才能告诉这个脚本哪些输入域是必填的呢?显然用id是不行的:理想的解决方案应该可以对一大堆输入域起作用。很自然的我们会想到是否可以用class来触发行为:


<input name="name" class="required" />
if (x[i].className == 'required' && !x[i].value)
//提示用户输入此域

  然而严格地说,class属性是用于定义CSS触发器的。把CSS和JavaScript的触发器合起来定义并不是不可能,但这样做很可能使代码变得一片混乱:


<input name="name" class="largefield required" />
if (
x[i].className.indexOf('required') != -1 &&
!x[i].value
)

  依我看来,class属性应该只能用于CSS。class是XHTML表现层的主要触发器,如果再让它承载行为层的信息就会使问题变得复杂化。用class属性同时触发两个层是与行为和表现分离相抵触的,但到底怎么做还是应该由你自己视情况而定。

信息传递触发器

  此外,触发器也可以变得更复杂一些,而不仅仅是一个声明“在这里部署(行为)”的命令。有时候你可能想给触发器加一个变量,这样可以使行为层变得更加通用,可以对每一个XHTML元素个体的需求作出响应,而不是傻乎乎地执行一个标准的脚本。

  拿一个表单打比方,这个表单包括一些字符串长度有上限的文本输入框。原先的maxlength "JavaScript触发器 JavaScript Triggers"由第二电脑网原创提供,转载请注明:http://www.002pc.com/master/College/Programming/JavaScript/13570.html


关键字:

关于《JavaScript触发器 JavaScript Triggers》文章的评论

站内搜索: 高级搜索

热门搜索: Windows style 系统 tr IP QQ CPU 安装 function 注册 if td