Categories: All Free JavaScripts/ Applets Tutorials References

JavaScript Kit > DOM Reference > Here

DOM Window Object methods

Last updated: Februrary 27th, 2006

Window object methods

Methods Description
addEventListener(eventType, listener, useCapture) Associates a function with a particular event and binds the event to the current node. NS/Firefox method. 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 function or method to associate with the event.
3) useCapture: Boolean indicating whether to bind 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.

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

attachEvent(eventType, 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) 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) Dispatches an event to fire on a node artificially. NS/Firefox 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) NS/Firefox only method that returns the style object for an element with its current active style settings, whether they're set using external/global or inline CSS. Use styleref.getPropertyValue() in conjunction to retrieve the value of a CSS attribute regardless of how it was set. The following shows how to get the "background-color" property value of a DIV set using global CSS:

<script type="text/javascript">
var mydiv=document.getElementById("test")
var mydivstyle=window.getComputedStyle(mydiv, "")
var divbgcolor=mydivstyle.getPropertyValue("background-color") //contains "yellow"
</script>

For more info, see: Getting global and external style sheet values in DHTML
 

releaseEvents(eventType) Releases the window object from trapping events of a specific type:

window.releaseEvents(Event.KEYPRESS) //single event
window.releaseEvents(Event.KEYPRESS | Event.KEYDOWN | Event.KEYUP) //multiple events

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.

 NS6/Firefox method.

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.

Daniweb JavaScript Community

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

CopyRight © 1998-2008 JavaScript Kit. NO PART may be reproduced without author's permission.