本文的内容基本来自itcast上的视频教程，所用示例也基本是那上面的例子
这个例子的核心是tooltip功能的实现，就是当鼠标移到某个链接上，就会显示一些相应的信息，这个功能很常见，也很有用。
要实现这样的一个功能，一般需要这些信息：
- 股票名称，代码
- 股票当前价格，昨日收盘价，今日开盘价
因此，做这个demo要首先实现一个Stock类，里面包含有这些信息。为了模拟股票的变动，还需一个模拟程序，也可以不专门做一个类，而是放到处理客户请求的类中，做一个函数来实现。在本例中，正是使用了第二种方法，在GetStockInfo类里面随机地生成一些数字来模拟股市的变化。
这个demo的主要目的在于实现tooltip功能，tooltip的关键有这几点：
- 判断鼠标进入，并响应，并获取鼠标的坐标
- 判断鼠标离开，并响应
- 做一个div，用css控制其样式，用js来控制其显示
在这几点中，我开始觉得前面两个很难做到，因为以前写Windows程序，消息机制是挺复杂的一个东西，后来查了一些资料，才发现JavaScript本身就有处理这种事件的功能：event。几乎所有的鼠标，键盘操作都能产生相应的event，并且这些event带有丰富的事件源信息，如坐标位置，哪个按键等。在Windows下，我想起作用的大概还是用的消息机制，只不过浏览器对其进行了封装。因此，在浏览器级别上进行的开发，至少可以屏蔽不同操作系统消息机制带来的不同，是种跨越平台的良好选择。如果能在编程框架上有跨平台的能替代MFC的东西，那就更好了。
具体的步骤如下：
- 创建一个html页面，包含几个标签，内容是要显示的股票和一个隐藏的div标签
- 写控制页面表现以及处理和后台交互的js文件。里面有个setInterval()函数，这个函数很常用，也很有用。
jQuery至少在这几个方面给开发者带来了很大的方便，包括：
- 设置在页面载入时就执行的函数，使用的是$(document.ready(function(){})); 这个方法十分有用，使程序员可以在页面载入的时设置页面的表现，如改变div的css，以及显示或隐藏一些div等。
- 获取鼠标所在的标签，$(this)
- $.get()，前面已经说过了
- 创建Stock类和GetStockInfo类，用来在后台处理用户的响应
Stock.java：
GetStockInfo.java：
虽然jQuery在这里的表现很精彩，但这个例子给我留下印象最深的却不是jQuery，而是JavaScript中的event。开始我以为event那么好用是jQuery的功劳，后来查了一些资料发现原来JavaScript自身的event就已经很强大了，以至于jQuery虽然也包装了一个Event对象，但和JavaScript中的Event几乎没有什么区别。
DOM Event：
Event Object
The Event object represents the state of an event, such as the element in which the event occurred, the state of the keyboard keys, the location of the mouse, and the state of the mouse buttons.
Events are normally used in combination with functions, and the function will not be executed before the event occurs!
IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet Standard).
Event Handlers
New to HTML 4.0 was the ability to let HTML events trigger actions in the browser, like starting a JavaScript when a user clicks on an HTML element. Below is a list of the attributes that can be inserted into HTML tags to define event actions.
| Attribute | The event occurs when... | IE | F | O | W3C |
|---|---|---|---|---|---|
| onabort | Loading of an image is interrupted | 4 | 1 | 9 | Yes |
| onblur | An element loses focus | 3 | 1 | 9 | Yes |
| onchange | The content of a field changes | 3 | 1 | 9 | Yes |
| onclick | Mouse clicks an object | 3 | 1 | 9 | Yes |
| ondblclick | Mouse double-clicks an object | 4 | 1 | 9 | Yes |
| onerror | An error occurs when loading a document or an image | 4 | 1 | 9 | Yes |
| onfocus | An element gets focus | 3 | 1 | 9 | Yes |
| onkeydown | A keyboard key is pressed | 3 | 1 | No | Yes |
| onkeypress | A keyboard key is pressed or held down | 3 | 1 | 9 | Yes |
| onkeyup | A keyboard key is released | 3 | 1 | 9 | Yes |
| onload | A page or an image is finished loading | 3 | 1 | 9 | Yes |
| onmousedown | A mouse button is pressed | 4 | 1 | 9 | Yes |
| onmousemove | The mouse is moved | 3 | 1 | 9 | Yes |
| onmouseout | The mouse is moved off an element | 4 | 1 | 9 | Yes |
| onmouseover | The mouse is moved over an element | 3 | 1 | 9 | Yes |
| onmouseup | A mouse button is released | 4 | 1 | 9 | Yes |
| onreset | The reset button is clicked | 4 | 1 | 9 | Yes |
| onresize | A window or frame is resized | 4 | 1 | 9 | Yes |
| onselect | Text is selected | 3 | 1 | 9 | Yes |
| onsubmit | The submit button is clicked | 3 | 1 | 9 | Yes |
| onunload | The user exits the page | 3 | 1 | 9 | Yes |
Mouse / Keyboard Attributes
| Property | Description | IE | F | O | W3C |
|---|---|---|---|---|---|
| altKey | Returns whether or not the "ALT" key was pressed when an event was triggered | 6 | 1 | 9 | Yes |
| button | Returns which mouse button was clicked when an event was triggered | 6 | 1 | 9 | Yes |
| clientX | Returns the horizontal coordinate of the mouse pointer when an event was triggered | 6 | 1 | 9 | Yes |
| clientY | Returns the vertical coordinate of the mouse pointer when an event was triggered | 6 | 1 | 9 | Yes |
| ctrlKey | Returns whether or not the "CTRL" key was pressed when an event was triggered | 6 | 1 | 9 | Yes |
| metaKey | Returns whether or not the "meta" key was pressed when an event was triggered | 6 | 1 | 9 | Yes |
| relatedTarget | Returns the element related to the element that triggered the event | No | 1 | 9 | Yes |
| screenX | Returns the horizontal coordinate of the mouse pointer when an event was triggered | 6 | 1 | 9 | Yes |
| screenY | Returns the vertical coordinate of the mouse pointer when an event was triggered | 6 | 1 | 9 | Yes |
| shiftKey | Returns whether or not the "SHIFT" key was pressed when an event was triggered | 6 | 1 | 9 | Yes |
Other Event Attributes
| Property | Description | IE | F | O | W3C |
|---|---|---|---|---|---|
| bubbles | Returns a Boolean value that indicates whether or not an event is a bubbling event | No | 1 | 9 | Yes |
| cancelable | Returns a Boolean value that indicates whether or not an event can have its default action prevented | No | 1 | 9 | Yes |
| currentTarget | Returns the element whose event listeners triggered the event | No | 1 | 9 | Yes |
| eventPhase | Returns which phase of the event flow is currently being evaluated | Yes | |||
| target | Returns the element that triggered the event | No | 1 | 9 | Yes |
| timeStamp | Returns the time stamp, in milliseconds, from the epoch (system start or event trigger) | No | 1 | 9 | Yes |
| type | Returns the name of the event | 6 | 1 | 9 | Yes |
jQuery的Event
API/1.3/Events
This section details the event-related functions in the jQuery API. For more information about how jQuery handles and normalizes event properties and functions in a cross-browser manner, see thejQuery Event Object.
8040
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
