CODEWITHSUNDEEP
javascriptdom-events
Villager
Villager

Reputation: 6689

JavaScript Event Handlers

I am trying to figure out how to programmatically add an event handler to a JavaScript object. More specifically, I am trying to add an event handler to the onunload event of a window object. I am trying it like so with out any luck:

var url = "www.somelocation.com";
var specs = "location=0,menubar=0,status=0,titlebar=0,toolbar=0";

var dialogWindow = window.open(url, "dialog", specs, true);
dialogWindow.onunload += myEventHandler;

function myEventHandler(e)
{
  // Do stuff
}

I'm guessing my syntax is incorrect. However, I cannot seem to find any documentation regarding this. Can someone please help me?

Upvotes: 4

Views: 2684

Answers (2)

Cherif
Cherif

Reputation: 61

Javascript only manages objects. The HTML DOM elements including HTML5 are objects, we can categorize them as follows:

  1. The Window object that has all the events
  2. The IFRAME object which is as complete as Window (this is why it is used by Youtube)
  3. DOM objects that only have management events, click, mouseup, mouseDown ... as well as their own events (audio, video, DIV BLOCK), etc.

Building JAVASCRIPT objects is a bit like Visual Basic or C ++.

Events are easy to manage, we can mix the events of smartphones and computers. To ensure support for old browsers SAFARI, IE, just avoid using certain keywords like (LET, =>, or values in the parameters of functions like X = 1).

Event Management:

    var mouseup = (!('ontouchstart' in document.documentElement))? 'mouseup':'touchend';
    var winresize = (!('ontouchstart' in document.documentElement))? 'resize':'orientationchange';
    var mouseover = (!('ontouchstart' in document.documentElement))? 'mouseover':'touchstart';
    var mouseout = (!('ontouchstart' in document.documentElement))? 'mouseout':'touchend';

To ensure compatibility:

 var Event_mouseup = function (e)(
       Code mouseup.......
 };

if(object.addEventListener){
object.addEventListener(mouseup,Event_mouseup,{passive:true});  //passive true not return event
}else if(object.attachEvent){
object.attachEvent(mouseup,Event_mouseup);
}else{
object['on'+mouseup]=Event_mouseup;
};

The Window object works exactly the same.

The event load is really special in an HTML page.

The objects that handle this event are objects that load data like IMG, VIDEO, AUDIO, etc.

In general, when an object has a load event it also has an error loading event.

To understand the DOM and the browser, you have to compare it to a C ++ window for example.

Window ----------------------- event Load              -------- Object 1 HTML DOM              --------- event1 Object              --------- event2 Object              -------- Object 2 HTML DOM              --------- event1 Object              --------- event2 Object ---------------------- event unload Window

Upvotes: 1

jsight
jsight

Reputation: 28429

dialogWindow.onunload += myEventHandler is incorrect. This should really be:

dialogWindow.unload = myEventHandler;

Or to preserve the existing handlers:

var oldHandler = dialogWindow.unload;
dialogWindow.unload = function (e) 
{
   if (oldHandler) { oldHandler(e); }
   myEventHandler(e);
}

And, of course, use JQuery.

Upvotes: 7

Related Questions