CODEWITHSUNDEEP
javascript
Netorica
Netorica

Reputation: 19337

Self evaluating Javascript

Please help me to understand this in javascript how this works fine?

var myEvent = window.attachEvent || window.addEventListener;
var chkevent = window.attachEvent ? 'onbeforeunload' : 'beforeunload'; /// make IE7, IE8 compitable

    myEvent(chkevent, function(e) { // For >=IE7, Chrome, Firefox
        var confirmationMessage = 'Are you sure to leave the page?';  // a space
        (e || window.event).returnValue = confirmationMessage;
        return confirmationMessage;
    });

I understand the other parts of the script but not the (e || window.event).returnValue how thus it will be evaluated? does it means if e is true then its property returnValue will be set else it will use the window.event?

NOTE: Please guide me with the right title for this question as I don't know how this kind of javascript coding pattern is called

Upvotes: 3

Views: 117

Answers (4)

FrameDev
FrameDev

Reputation: 61

All that code is doing is providing a cross-browser solution to getting the event that just occured. This is because older versions of IE don't pass in the Event object to the event handler and instead set window.event which can only be accessed from an event handler. To be more precise:

So it first checks if e is set. If it is set than the code in the parenthesis returns the value of e and then grabs the value of e.returnValue. If e is not set then the parenthesis returns window.event and then grabs the value of window.event.returnValue.

If you want to know more about the window.event object you can read up on it here. Event Object IE

Upvotes: 0

lorenzodarkside
lorenzodarkside

Reputation: 186

Yes :)

if e is "true" (not null, valid object), then it will return e.returnValue otherwise window.event.returnValue

Upvotes: 2

jdphenix
jdphenix

Reputation: 15425

It means: 

e.returnValue = confirmationMessage;

and if not e

window.event.returnValue.confirmationMessage;

Consider the output of this snippet: 

var a = {}; 
var b = undefined;
var c = {}; 

(b || a).first = 'First!';
(c || a).second = 'Second!'; 

console.log(a); 
console.log(b);
console.log(c); 

Object { first: "First!" }   // <-- a
undefined                    // <-- b
Object { second: "Second!" } // <-- c

In the line (b || a).first = 'First!';, b evaluates falsy to a is evaluated, is truthy, and so a.first is defined.

In the line (c || a).second = 'Second!';, c evaluates truthy and so c.second is defined. Note that a.second is not defined, because JavaScript's || short circuits.

The reason for the particular code you've posted to exist is due to Internet Exploder's Explorer's older versions.

Upvotes: 2

JCOC611
JCOC611

Reputation: 19729

I'm going to be real here. The biggest reason why this code is so strange is Internet Explorer, and cross-browser compatibility issues.

The specific line you are referring to uses the JavaScript OR operator ||, which basically returns the first element that is defined (or non-false). So, in this case, if the browser passes the argument e to the event handler, then it will be used, otherwise window.event is used.

Notice the parenthesis in (e || window.event). This tells the engine to evaluate the OR operator before doing anything with the result. This makes sense because you want to access e.returnValue if e is defined, and window.event.returnValue otherwise.

Upvotes: 2

Related Questions