CODEWITHSUNDEEP
javascript
user2507818
user2507818

Reputation: 3047

trying to understand event handler codes in js

<!DOCTYPE HTML>
<html>
<body>
<link type="text/css" rel="stylesheet" href="example.css">
<div class="d1">1  
    <div class="d2">2
        <div class="d3">3 
        </div> 
    </div>
</div>
<script>
var divs = document.getElementsByTagName('div')
for(var i=0; i<divs.length; i++) {
  divs[i].onclick = function(e) {
    e = e || event
    var target = e.target || e.srcElement
    this.style.backgroundColor='yellow'    
    alert("target = "+target.className+", this="+this.className)
    this.style.backgroundColor = ''
  }
}
</script>
</body>
</html>

Above code is from http://javascript.info/tutorial/bubbling-and-capturing

Questions:

  1. divs[i].onclick, divs is htmlcollection, it is not an arrary, how could we use array style:array[i]? for event handler, why we do not put var in front of it(such as var divs[i].onclick)?

  2. e = e || event, why put event here? and why not put var in front of e, is that because e is the global variable?

Upvotes: 3

Views: 95

Answers (4)

mohkhan
mohkhan

Reputation: 12335

Q1:

divs is an array which contains HTMLElement objects. So divs[i] is a HTMLElement on which you can define an onclick event. It is a shortcut for

var element = divs[i];
element.onclick = function(e){
...

Q2:

e is a argument of the listener event function. Different browsers invoke the event function differently. In some browsers event object is available explicitly inside the function and some browsers pass the event object as argument e. So to make the code browser independent we use this snippet e = e || event. In case the e argument is non-null, the code will use that object, otherwise when e is null event object should be available. It is not possible that both will be null.

Upvotes: 0

D051P0
D051P0

Reputation: 465

var divs is used by document.getElementByTagName, so it is already defined. var e is also defined in function(e) so you don't need to define it.

Upvotes: 0

James Allardice
James Allardice

Reputation: 166051

divs[i].onclick, divs is htmlcollection, it is not an arrary, how could we use array style?

It's actually a NodeList, which is an "array-like" object, in that it has a length property and the properties you actually care about are numerically keyed.

for event handler, why we do not put var in front of it?

Because you are referencing an element of the NodeList. You do not want to declare a new variable, you want to use an existing reference.

e = e || event, why put event here?

This is to handle old versions of Internet Explorer, where event objects were not passed to handlers but were instead accessible as window.event.

why not put var in front of e, is that because e is the global variable?

No, it's passed into the event handler function as an argument so there's no need to declare it inside the function.

Upvotes: 4

C3roe
C3roe

Reputation: 96434

divs[i].onclick, divs is htmlcollection, it is not an arrary, how could we use array style:array[i]?

"HTML collections" (NodeLists) are specified to allow index-based access.

for event handler, why we do not put var in front of it(such as var divs[i].onclick)?

Because that would make no sense at all. You are assigning a value to an attribute of an existing object - no variables involved, nor any sense in trying to use var keyword here.

e = e || event, why put event here? and why not put var in front of e, is that because e is the global variable?

That's a hack for (older) IE that otherwise do not pass the event object to the handler function correctly. And the variable e is local already because it was defined as parameter of the function.

Upvotes: 0

Related Questions