JavaScript触发器

　　一个网站的前端由三个层构成。由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属性已经不再在textarea元素上工作，所以我们必须写个脚本来做这件事。另外，并不是这个表单里所有的文本输入框都有相同的字符串长度上限，所以在某个地方把它们个自的上限长度存起来就显得很必要了。

　　我们希望有这样一个东西：

var x = document.getElementsByTagName('textarea');

for (var i=0;i<x.length;i  )

{

 if ([这个文本输入框有长度上限])

  x[i].onkeypress = checkLength;

}



function checkLength()

{

 var max = [读取长度上限的值];

 if (this.value.length > max)

  // notify user of error

}

　　这段脚本需要两个关键的信息：

1. 这个文本输入框有长度上限吗？这是一个很概括的触发器，告诉脚本某些行为应该加在这里。
2. 上限是什么？这是一个值，使得脚本可以正确地检查用户输入。

　　在这里，用基于class的方式不再合适了。虽然从技术上讲不是不能做到，但是所需的代码会变得太复杂。打个比方，我们来给一个本身就带有一个叫“large”的class的文本输入框加上触发器，以便告诉脚本它是必填的，而且长度上限是300：

<textarea class="large required maxlength=300">

</textarea>


			   
			   

                       标签：
                   
                   
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com

特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有