联合使用 CSS、JavaScript 和 JSF 精心打造 Ajax 应用程序，第 2 部分

本文链接：https://blog.youkuaiyun.com/ibmjournal/article/details/2531275

很多 JSF HTML 组件都拥有 JavaScript 相关的属性，它们允许您指定在发生特定 UI 事件时将在 Web 浏览器中执行的代码片断。例如，标准 JSF 组件支持七类鼠标事件：

onmouseover
onmouseout
onmousemove
onmousedown
onmouseup
onclick
ondblclick

当 UI 组件获得或丢失键盘焦点，它将生成可以通过 onfocus 和 onblur 属性捕获的事件。onkeydown、onkeyup 和 onkeypress 事件在按下或释放某个键时触发。此外，<h:form> 组件接收 onsubmit 和 onreset 属性，输入组件拥有 onchange 和 onselect 属性，它们可以用来在表单元素的状态发生更改时，调用 JavaScript 函数。

还可以使用直接包含在 JSF 页面中的 HTML 元素的 JavaScript 相关属性，而不是由 JSF 组件呈现的 HTML 元素。例如，<body> 标记拥有 onload 和 onunload 属性。onload 事件在 Web 浏览器完成加载某个页面时触发。onunload 事件在用户离开页面时发生。

典型的 JavaScript 事件处理程序使用 Web 浏览器中的 DOM API 来更新 JSF 组件呈现的 HTML 元素的属性。使用 DOM Core API，可以轻松地找到表示 HTML 元素的对象。例如，可以使用 document.getElementById(...) 查找其 ID 已知的元素。

DOM HTML API 扩展了 DOM Core API，添加了一些特定于 HTML 文档的方法和属性。使用 document.forms.myFormId 获得表示 Web 浏览器中表单的对象，然后使用 myForm.elements 可获得表示表单的元素的对象数组。一个非常有用的属性是 className，它允许您更改 HTML 元素的 class 属性。

DOM HTML 规范（参见参考资料）描述表示客户端上页面元素的对象的所有标准属性和方法。大多数 Web 浏览器，包括 IE、Firefox、Netscape、Safari 和 Opera，支持其他属性，如 innerHTML，它允许更改 HTML 元素的内容。

本节中的示例展示如何使用 JSF HTML 组件的 JavaScript 相关属性，以及如何使用 DOM HTML API 更新用户界面。

在 JSF 页面中放置脚本

使用 HTML 的 <script> 元素（参见清单 1），可以将 JavaScript 代码像插入到任何常规 Web 页面一样插入到 JSF 页面。借助 Web 浏览器中的 document.write()，可以使用 JavaScript 代码生成 HTML 内容，但是很少需要这么做。在大多数情况下，会将 <script> 元素放到页面的头部内，其中将包含从事件属性调用的 JavaScript 函数，如 onclick、onsubmit 和 onchange。如果用户的浏览器中禁用了 JavaScript 脚本，还可以使用 <noscript> 元素警告他们。

清单 1. 使用 <script> 标记

本文转自IBM Developerworks中国

请点击此处查看全文