Learn YUI3: Playing with Events and Putting Callbacks

This is 2nd one in the series of YUI3 learning. Previous one in the was about node, how to access node and its properties in YUI3. I have also shown examples of domready events there.

Use of Events are very common in JavaScript programming. OnClick and Hover is the most commonly used events. We used to tie Callbacks with these events when these events occur.

This article will show you how to attach callbacks to event using YUI3 library. In the code example, detaching event is also shown.

// Create a new YUI instance and populate it with the required modules.
YUI().use('event', function (Y) {
// Event is available and ready for use. Add implementation
// code here.
});

Attach OnClick Event Through YUI3:-

<!DOCTYPE HTML>
<html>
<head>
<title>YUI3 - Event Chap 1</title>
<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>
</head>
<body>
For output, see the console log. <br />
<p id="firstp">
        <a href="http://newsviews.satya-weblog.com">General Blog</a>
</p>
Click here to detach the attached event to above Link:
<a id="detachEvent" href="#" onClick="return false;">Detach Event</a>
<script type="text/javascript">
YUI().use('event', function(Y) {
        function onClick(e) {
                Y.log(this.get('text'));
                Y.log(this.get('href'));
                e.preventDefault(); // prevent for leaving the page. return false is also supported but not preferred.
        }
        var linkInFirstP = Y.on('click', onClick, '#firstp a');
        // Another way to attach event to element
        //Y.one('#firstp a').on('click', onClick);
        // Now, lets detach the event attached to Link in paragraph "firstp"
        Y.one('#detachEvent').on('click', function (e) {
                linkInFirstP.detach();
                //linkInFirstP.detach("click", onClick); // Another way of detaching the subscription
                // Var linkInFirstP was not required to create above if I do not need to detach event from it. I could directly call:
                //Y.on('click', onClick, '#firstp a');
        });
});
</script>
</body>
</html>

Y.on() / Y.delegate() Vs node.on() / nodeList.on()

Both are same in many cases but there are few differences:-

  • When using Y.on() with selectors that matches multiple elements, 'this' in the callback refers to individual elements. But this is not the case with nodeList.on().
    In nodeList.on(), 'this' in callback will refer to nodeList.
  • Y.on() is little faster as this does not call Y.all() for the matching selectors in third parameter.
  • Y.on() can wait a little (few secs), if DOM matching the selector(s) is not available. Though, you should not rely on this behavior.

Avoid nodelist.on() in favor of event delegation.

Here are List of Events you can tie with elements. There are other synthetic events as well. Synthetic events are not listed here. Synthetic events comes with YUI modules.

'e' is passed to callbacks as first argument. Here are eventfacade properties and method.

Next in the series of .

  • # 1 - by Joel

    Petronel:No. There were no loops.When the client-side code was geatenred at the server-side I embedded an identifier into each node ( pos_id ). When the code runs on the client it gets the node it wants by calling the getNodeByProperty function with my identifier pos_id and a value for it.

Comments are open for an year period. Please, write here on Facebook page.