Try Tuts+ Premium, Get Cash Back!
JavaScript from Null: Chapter 5
basixvideos

JavaScript from Null: Chapter 5 – Events

on Jan 29th 2010 with 67 comments
This entry is part 5 of 7 in the series javascript-from-null

The Full Series


javascript-from-null

As we move forward with JavaScript University, today, we’ll learn how to add event handlers to elements on the page. Unfortunately, this can be more cumbersome than we’d hope, due to the fact that Internet Explorer must always be the black sheep. Nevertheless, we’ll learn how to abstract these inconsistencies away to our custom utility function.

As with every JavaScript from Null screencast, it’s not essential that you view the previous entries in the series before watching.

In this Screencast, you’ll Learn About:

  • Working with .addEventListener
  • Working with IE’s .attachEvent
  • Differences in the way browsers handle events.
  • Capturing phase vs. event bubbling
  • Building a utility function to abstract our cross-browser event handling.

Chapter 5: Events

Other Viewing Options

Ready to take your skills to the next level, and start profiting from your scripts and components? Check out our sister marketplace, CodeCanyon.

CodeCanyon


Series Navigation«JavaScript from Null: Chapter 4JavaScript from Null: Cross-Browser Event Binding»

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
← Older Comments
  • Martin

    Why was my comment deleted?

  • cid

    Hi Jeff,

    It’s a fine intro but you say nothing about why this is better than the inline model which is what everyone had used in the past and many still use. Other than separating behavior and structure for its own sake why should we use this obviously more complicated model instead of just inserting HTML event attributes?
    Thanks

  • cid

    Or for that matter why shouldn’t we use this instead, which works fine on everything from IE5 to Chrome

    window.onload=function change_color()
    {
    var anchor=document.getElementById(‘anchor’)

    anchor.onmouseover=function (){ document.body.bgColor=”red”}
    anchor.onmouseout=function (){ document.body.bgColor=”blue”}
    }

    Move over me

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      For some cases, it’s works just fine. But you can’t assign multiple event handlers with that method.

      • cid

        You mean to the same element? Looks to me I can assign as many as I want

        window.onload=function addEvents()
        {
        var anchor=document.getElementById(‘anchor’)

        anchor.onmouseover=function (){ document.body.bgColor=”red”}
        anchor.onmouseout=function (){ document.body.bgColor=”blue”}
        anchor.onclick=function (){ document.body.bgColor=”yellow”}
        anchor.ondblclick=function (){ document.body.bgColor=”gray”}

        }

        Is this somehow wrong?

      • http://www.jeffrey-way.com Jeffrey Way
        Author

        @cid – Try to add another function to that event handler. Only the latter will execute.

      • cid

        Indeed this doesn’t work:

        anchor.onclick =function (){ document.body.bgColor=”red”}
        anchor.onclick =function (){ div.style.backgroundColor=”gray” }

        but this does

        window.onload=function addEvents()
        {

        var anchor=document.getElementById(‘anchor’)
        var div=document.getElementById(‘div’)

        anchor.onclick=function(){first();second();}
        anchor.ondblclick=function(){first2();second2();}

        function first(){ document.body.bgColor=”red”}
        function second(){div.style.backgroundColor=”yellow” }
        function first2(){ document.body.bgColor=”blue”}
        function second2(){div.style.backgroundColor=”gray” }
        }

  • http://jimmyhooker.com Jimmy

    I love this, but it is sooo damn fast, that I can barely understand what I’m doing. I think this is a solid introduction, but will need a legit guide so that I’m not flying quite so blind.

  • Ridwan

    thanks for the tuts, really great.

    can someone explain why window.attachEvent replaced by obj.attachEvent.

    my question is obj value is var anchor = document.getElementById(‘anchor’),

    why anchor can replace window is it same between window and var anchor =

    document.getElementById(‘anchor’) still confused. thanks in advance

← Older Comments