Categories:

JavaScript Kit > DOM Reference > Here

DOM Window Object methods

Last updated: April 21st, 2009

Window object methods

Methods Description
addEventListener(eventType, listener, useCapture)

Not supported in IE, which uses attachEvent() instead.

 Firefox/W3C only method that associates a function with a particular event and binds the event to the current node. addEventListener() accepts the following 3 parameters:

1) EventType: A string representing the event to bind, without the "on" prefix. For example, "click", "mousedown" etc.
2) listener: The object or function to fire when the event fires. The actual parameter entered should be a reference to the function or object (ie: "dothis" instead of "dothis()".
3) useCapture: Boolean indicating whether to bind the event as it is propogating towards the target node, (event Capture), or as the event bubbles upwards from the target (event bubble). Set to true or false, respectively.

The advantage of using the DOM to bind an event is that you can assign multiple functions to a node for the same event (ie: window.onload) without running into event handler conflicts.

Example(s):

function statusreport(){
 alert("document has loaded")
}

if (window.addEventListener)
 window.addEventListener("load", statusreport, false) //invoke function
window.onload=statusreport() //function invoked again, since no event handler conflicts

Since listener must be a function reference, a common question is how to specify the listener so it can receive parameters of its own. The solution is just to wrap the listener in an anonymous function reference:

function dothis(what){
 alert("Mom says to do " + what)
}

if (window.addEventListener)
 window.addEventListener("load", function(){dothis('Your homework')}, false) //invoke function

For events such as "click" or "mousemove" that populate the Event object with additional info such as where the mouse is at the time, addEventListner() passes this object silently to the listener. To receive it, define a single parameter in the anonymous function:

function getcoord(evt){
 alert("You clicked at coordinates [" + evt.clientX + "," + evt.clientY + "]")
}

if (document.addEventListener)
 document.addEventListener("click", function(evt){getcoord(evt)}, false) //invoke function
attachEvent(eventType, function)

IE 5+only function

 IE5+ proprietary equivalent of addEventListener(). For the parameter eventType, the event string should include the "on" prefix (ie: "onload", "onclick" etc).

Example(s):

if (window.attachEvent)
window.attachEvent("onload", statusreport) //invoke function 
detachEvent(eventType, function)

IE 5+only function

 Removes an event handler and its function previously associated with a node in IE5+, via attachEvent() for example. The IE5+ proprietary equivalent of DOM2's removeEventListener().

Example(s):

if (window.detachEvent)
window.detachEvent("onload", statusreport) //invoke function 
dispatchEvent(eventObject)

Not supported in IE, which uses fireEvent() instead.

 Dispatches an event to fire on a node artificially. Firefox/W3C method. This method returns a Boolean indicating whether any of the listeners which handled the event called preventDefault (false if called, otherwise, true). IE's equivalent of dispatchEvent() is fireEvent().

Example(s):

<div id="test" onclick="alert('hi')">Sample DIV.</div>

<script type="text/javascript">
//Generate an artificial click event on "test". Fires alert("hi")
var clickevent=document.createEvent("MouseEvents")
clickevent.initEvent("click", true, true)
document.getElementById("test").dispatchEvent(myevent)

</script> 
getComputedStyle(elementRef, pseudoElementName)

Not supported in IE, which uses the "currentStyle" property instead.

 Firefox/W3C only method that returns a style object containing the actual CSS property values added to an element, whether they are set using inline CSS or global/external stylesheets. To get the value to a specific cascaded CSS property, you'd just look up that property within the returned object. Note that while window.getComputedStyle() is supported in Firefox, Safari only supports document.defaultView.getComputedStyle() (with Firefox supporting both methods). For maximum compatibility then, you should use the later method.

The following example shows how to retrieve the value of the CSS property "padding", applied to the element via external style sheet:

<head>
<style type="text/css">
#adiv{
padding: 10px;
}
</style>
</head>

<body>
<div id="adiv">This is some text</div>

<script type="text/javascript">
var mydiv=document.getElementById("adiv")
var actualstyle=document.defaultView.getComputedStyle(mydiv, "")
var divpadding=actualstyle.padding //contains "10px"
</script>
</body>

For more info, see: Getting global and external style sheet values in DHTML
removeEventListener(eventType, listener, useCapture) Removes the specified event from being binded to the current node:

1) EventType: A string representing the event to unbind, without the "on" prefix. For example, "click", "mousedown" etc.
2) listener: The function or method to associate with the event.
3) useCapture: Boolean indicating whether to unbind the event as it is propagating towards the target node, (event Capture), or as the event bubbles upwards from the target (event bubble). Set to true or false, respectively.

 Firefox/W3C
resizeBy(dx, dy) Resizes a window by the specified amount in pixels.
resizeTo(x y) Resizes a window to the specified pixel values.
scrollBy(dx, dy) Scrolls a window by the specified amount in pixels.
scrollByLines(lines) Scrolls the document by the number of lines entered as the parameter. NS/Firefox method.
scrollByPages(pages) Scrolls the document by the number of pages entered as the parameter. NS/Firefox method.
scrollTo(x, y) Scrolls a window to the specified pixel values.
sizeToContent() Sizes the window to fit the content contained within. Useful, for example, with popup windows that contain small amounts of content. NS6/Firefox method.

Note: See also JavaScript window object.

Sponsored By

DD CSS Library
Free CSS menus and codes to give your site a visual boost.

DOM Window
DOM Document
DOM Element
DOM Event
DOM Style
DOM Table
Miscellaneous

 

CopyRight (c) 2018 JavaScript Kit. NO PART may be reproduced without author's permission. Contact Info