1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith<style scoped>
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith background-color: #00CCFF;
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith border: 1px dotted black;
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith padding: 1em;
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith cursor: pointer;
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith#example-canvas #demo a {
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith color: #00c;
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith text-decoration: underline;
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith<div class="intro">
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith<p>Clicking in the blue box will pop up a "Hello World!" alert window. Clicking on the first link will take you to the YUI website; clicking on the second link, which has the same <code>href</code> attribute, will pop up an alert instead and not navigate to a new page.</p>
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith<p>Event Utility is used here to do two things:</p>
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith <li>Attach the <code>click</code> event handler to the blue box;</li>
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith <li>Attach an event handler to the second <code><a></code> element that uses <code>preventDefault()</code> to prevent the link, when clicked, from navigating to a new page. </li>
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith<div class="example yui3-skin-sam">
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith {{>basic-example-source}}
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith<h2>Reacting to the `click` event</h2>
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith<p>To illustrate event handling syntax, we'll create a `<div>` and pop up an alert message when that `<div>` is clicked.</p>
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith// Create a YUI instance and load the 'node' module
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke SmithYUI().use('node', function (Y) {
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith // A function that pops up a "Hello World" alert:
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith var helloWorld = function (e) {
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith alert("Hello World!");
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith<p>We now use the Node's <code>on</code> method to attach our
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith<code>helloWorld</code> function as a handler for the <code>click</code> event.
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith// Point to the container div with the CSS selector
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smithvar node = Y.one('#container');
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smithnode.on("click", helloWorld);
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith<p>Almost all event handling begins with a premise just this simple: we have an
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smithelement to which something might happen (eg, it might be clicked) and, when
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smiththat <em>does</em> happen, we want to do something (eg,
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith<code>helloWorld</code>).</p>
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith<h2 id="prevent">Preventing event behavior</h2>
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith<p>In some cases, you may want to replace the default behavior of an event.
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke SmithFor example, let's say you have two links on the page:</p>
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith<p><a href="http://yuilibrary.com/" id="firstA">The YUI Library. (Link navigates away from page.)</a></p>
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith<p><a href="http://yuilibrary.com/" id="secondA">The YUI Library. (Link's default behavior is suppressed.)</a></p>
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith<p>Let's say that when the second link is clicked, instead of navigating away from the current page, you want to pop up an alert window. The event object passed to your event handler is a facade — not the actual browser event object. This facade supports the <code>preventDefault</code> method for cancelling inherent browser behavior such as anchor links loading a new page.</p>
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith// A function that stops the browser from navigating away
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith// from the page, and instead pops up an alert.
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smithvar interceptLink = function(e) {
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith alert("You clicked on the second YUI link. Because *preventDefault* was called, this link will not navigate away from the page.");
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith// subscribe our interceptLink function to the second anchor
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke SmithY.one('#secondA').on("click", interceptLink);
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith<h2 id="fullcode">Full Code Listing</h2>
350964af8dfc6ab5df9d3fb0f274f7d018986c5bLuke Smith{{>basic-example-source}}