水曜日, 10月 11, 2006

A little about the differences between IE and its counterparts

A Greasemonkey's Guide to Turnabout by Adam Hindman

There are some points about differences between IE7 and its enemies. Here I copy some contents here for myself.

Events

The resize Event Fire Multiple Times

In Firefox, resizing the browser window fires the resize event exactly one time, after the user has "let go" of the window. However, in Internet Explorer, the resize event will fire continuosly, every time the window size changes at all. This can make a huge difference if your script does something like increment a variable every time the window is resized.

Internet Explorer Supports onmouseenter and onmouseleave

You may already be familiar with the handy onmousever and mouseout events, which are fired by the mouse moving on top of or away from the element that calls it, but also any elements that it bubbles up to. This means that if a DIV has a button nested inside, and both these elements have onmouseoverDIV that contains it.

onmouseenter and onmouseleave get around this potential problem. They work in a similar manner, activating when the mouse touches an element, or moves away from it, respectively. The difference is that these events do not bubble up the document tree. Mousing to the button in the previous example would not fire the DIV's event if both were using onmouseenter.

Internet Explorer has the advantage here, since it supports both sets of events.

Example script: The Difference Between onmouseout and onmouseleave

The following examples illustrate the different behaviors you can produce by choosing between onmouseout and onmouseleave. What you should see is two sets of boxes. Each set of boxes is composed of one large box containing one small box. If you move your mouse into one of the larger boxes and then out again, it should report the color of the box you just left. However, if you mouse into one of the interior boxes and then back out again, you should notice a different between the set of boxes on the left, and the set of boxes on the right. This difference is should illustrate the ways in which onmouseleave treats the element hierarchy of a document differently than onmouseout.

Move your mouse in and then out of the following sets of boxes:

onmouseleave onmouseout


Internet Explorer Does Not Support addEventListener()

Sadly, the standards-compliant method of event registration suggested in the W3C DOM Level 2 document is not supported by Internet Explorer. Using

element.addEventListener ('click',doSomething,false)

to assign a function to an event will not produce any result whatsoever. It goes without saying that related event registration methods (such as removeEventListener and dispatchEvent) do not work either.

The scripter is left with 2 cross-browser options, and 1 option that is proprietary to IE5.5+.

Internet Explorer's Options for Event Registration

    The following event registration methods produce the same result in Internet Explorer and can be used in place of the non-supported addEventListener()
  1. The Deprecated but Still-Used Way:
    <A HREF="somewhere.html" onClick="doSomething()">
  2. The Non-Standard but Preferred Way:
    element.onclick = doSomething
  3. The Internet Explorer Only Way:
    element.attachEvent ('onclick',doSomething)

0 件のコメント: