一.目的
两个链接，一个可以转向指定页面，一个点击之后下方出现一行文字并且不转向任何页面。
二.途径
YUI的DOM操作以及preventDefault() 事件的运用。
三.代码
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<!--下面的语句是对YUI种子文件的引用-->
<script src="http://yui.yahooapis.com/3.9.0/build/yui/yui-min.js"></script>
<script>
YUI().use('node', function (Y)
{
var helloWorld =
function(e)
{
e.target.setHTML("<p>Hello World!</p>");
e.target.setStyle('background-color', 'orange');
e.target.setStyle('margin-top','40px');
};//函数helloword的声明
var myDiv = Y.one("#container");//Y.one()元素选择器，匹配元素为id="container"的元素
myDiv.on("click", helloWorld);//用Node类的on方法对myDiv监听事件click，触发函数helloword
var interceptLink =
function(e)
{
e.preventDefault();
Y.one('.message').setStyle('visibility', 'visible');
};
Y.one('#secondA').on("click", interceptLink);
//当第二个链接被点击，会显示一条消息，而不是导航离开当前页面。
//传递到事件处理程序的事件对象不是实际的浏览器的事件对象，而是一个假象。
//这个假象支持preventDefault方法，用来取消浏览器的行为，如锚链接加载新页。
});
</script>
</head>
<body>
<div id="container" style="width: 1000px; height: 100px; background-color: pink;">
<p style="margin-top: 40px; padding-top: 40px; padding-left: 40px;">Click for Hello World test.</p>
</div>
<p><a href="http://yuilibrary.com/" id="firstA">The YUI Library. (Link navigates away from page.)</a></p>
<p><a href="http://yuilibrary.com/" id="secondA">The YUI Library. (Link's default behavior is suppressed.)</a></p>
<div class="message" style="visibility:hidden;">
When you clicked on the second link, *preventDefault* was called, so it did not navigate away from the page.
</div>
</body>
</html>
注意点见代码中的注释
相关推荐
【Yui_ext 学习笔记】 Yui_ext 是基于 Yahoo! UI Library (YUI) 的扩展，主要用于构建富客户端的 Web 应用程序。这篇学习笔记主要介绍了 Yui_ext 的基础知识，适合对 JavaScript 和 HTML DOM 有一定了解的初学者。 ...
总的来说，YUI提供了一套完整的工具集，涵盖了从基本的DOM操作到复杂的UI构建和事件处理，是JavaScript开发者实现高效、可维护的前端应用的强大武器。这份汉语版的YUI使用文档对于中国开发者来说，无疑是一个宝贵的...
2. Event：事件处理是Web开发中的关键部分，YUI的Event模块提供了一套跨浏览器的事件处理机制，可以方便地监听和处理各种用户交互事件。 3. Connection Manager：此组件用于处理Ajax请求，提供了异步与服务器通信的...
YUI3的事件系统是其强大功能之一，它允许开发者监听和处理DOM元素及自定义事件。在“yui3-master.zip”的“event”模块中，包含了丰富的事件相关的API，如`Y.on`, `Y.fire`等，它们使得事件处理更加灵活且易于维护...
2. **跨浏览器兼容性**：YUI 对多种浏览器进行了优化，包括 Internet Explorer、Firefox、Chrome、Safari 和 Opera，确保在不同环境下表现一致。 3. **强大的 DOM 操作**：提供了一系列 DOM 操作接口，如选择元素、...
4. **事件系统**：YUI的事件系统支持DOM事件的监听和处理，使开发者可以方便地响应用户操作。 5. **CSS样式框架**：YUI提供了一套可自定义的CSS样式，帮助开发者快速创建一致的界面风格。 6. **DOM操作**：YUI提供了...
1. **核心库（Core）**：这是YUI的基础，提供事件处理、DOM操作、CSS样式处理、JSON解析等基础功能。它使得开发者能够更方便地进行页面交互和元素操作。 2. **控制台（Console）**：这是一个调试工具，用于在浏览器...
YUI的DOM模块提供了一系列方便的方法，如`get`, `set`, `insertBefore`等，使得操作DOM元素变得简单易行。例如，通过`YUI().use('dom', function(Y) { Y.one('#elementId').setContent('新内容'); })`，我们可以轻松...
3. **事件处理**：YUI的事件系统强大，支持事件绑定、解绑、事件冒泡等，使得用户交互编程简单易行。 4. **动画效果**：通过Transition和Anim模块，可以轻松实现平滑的CSS3动画和JavaScript动画效果。 5. **数据绑定...
2. **事件处理**：YUI提供了一套完整的事件系统，可以方便地监听和处理DOM事件，以及自定义事件，增强了代码的交互性和响应性。 3. **CSS样式和布局**：YUI包含一套响应式设计的CSS框架，如Grids布局系统，帮助...
2. **事件处理**：YUI3提供了强大的事件系统，支持DOM事件、自定义事件以及事件委托，使得监听和响应各种用户交互变得简单。 3. **CSS样式工具**：YUI3包含了一套CSS工具，如样式类名管理器（YUI.addClass, YUI....
2. **事件系统**：YUI的事件处理机制强大且灵活，支持DOM事件、自定义事件以及事件委托，使事件绑定和解绑变得简单易行。 3. **DOM操作**：提供了一系列DOM操作API，如选择元素、创建元素、修改属性等，简化了对...
2. **DOM操作**：YUI提供了强大的DOM操作API，如选择器引擎（YAHOO.util.Selector）用于高效地定位DOM元素，以及一系列方法用于创建、修改和删除DOM节点。 3. **事件处理**：YUI的事件系统允许开发者方便地绑定和...
3. **事件系统**：YUI 3.0.0提供了一个强大的事件处理系统，支持DOM事件和自定义事件，可以方便地进行事件监听和触发，简化了事件处理的复杂性。 4. **动画效果**：内置的Animation模块提供了丰富的动画效果，包括...
2. **DOM操作**：YUI提供了强大的DOM操作API，使得对HTML元素的选择、遍历、修改变得简单易行。这些工具大大简化了JavaScript与HTML之间的交互，提高了开发效率。 3. **事件处理**：YUI的事件系统支持事件委托、...
在“yui.rar”里，可能包含有如“yui-core”、“yui-dom”、“yui-event”等基础模块，这些模块分别对应核心功能、DOM操作和事件处理。开发者可以通过精确定义配置，选择需要的模块，确保代码高效运行。 YUI还提供...
YUI由多个核心模块组成，包括事件处理、DOM操作、动画效果、拖放功能、Ajax通信、数据存储、国际化支持等。这些组件是可选的，开发者可以根据项目需求按需加载，降低了页面加载的时间。 - **事件处理**：YUI提供了...
YUI资料 雅虎 用户接口库 中文说明及如何使用学习 Yui组件分成2类：工具包和控件库 Yui 工具包 Yui 工具包利用DOM脚本来简化浏览器内的开发（in-browser devolvement），使用DHTML和AJAX的特性开发所有的Web程序。...