2012年11月28日 星期三

Event Object 在不同瀏覽器上相容性的問題

在 IE 上是一個由一個 Global 的 Object 來儲存。
在 IE 以外的瀏覽器上 (W3C 定義) 則是 Event 發生的當下傳遞 Event Object (event) 給 Event Handler。

##
You can access the event object differently in different browsers:
  • The window.event property is supported by Internet Explorer, Opera, Google Chrome and Safari. It returns a reference to an event object that is filled based on the current event.
    In Internet Explorer, the event object always has the same members, regardless of the event, but only a part of them is filled based on the current event.
    In Opera, Google Chrome and Safari, the type of the event object depends on the event.
  • In Firefox, Opera, Google Chrome, Safari and Internet Explorer from version 9, when an event occurs, an event object is initialized and passed to the event handlers as the first parameter. The type of the event object depends on the current event.
    In Internet Explorer before version 9, an event object is passed to an event handler only if it is registered with the attachEvent method. If an event listener is registered with the attachEvent method, the passed event object is a copy of the window.event object in all Internet Explorer versions.

##

Reference:
http://dev.opera.com/articles/view/handling-events-with-javascript/#eventobjectreferences
http://help.dottoro.com/ljogqtqm.php

2012年11月27日 星期二

Event Handler 的寫法

##
function foo(evt) {
  // the evt parameter is automatically assigned the event object
  alert(evt);
}
table_el.onclick = foo;
 ##

Reference:
DOM_Event_interface

2012年11月9日 星期五

CSS:opacity 的相容性


以這段程式碼為例:

function gradient(id, level)
{
    var box = document.getElementById(id);
    box.style.opacity = level;
    box.style.MozOpacity = level;
    box.style.KhtmlOpacity = level;
    box.style.filter = "alpha(opacity=" + level * 100 + ")";
    box.style.display="block";
    return;
}

box.style.opacity = level; //相容於 Firefox、Safari、Opera、IE8 and previous
box.style.MozOpacity = level; //Firefox 0.9
box.style.KhtmlOpacity = level; //Safari 1.2
box.style.filter = "alpha(opacity=" + level * 100 + ")"; //IE9.0 and above

Reference:
https://developer.mozilla.org/en-US/docs/CSS/opacity

HTML: div 和 span 的差異

div 和 span 都可以利用 id 或 class 的宣告經由 CSS 來定義 style。

兩這間的差異主要在於,
div 是一次定義一整個區塊,

而 span 則是定義區塊內部的其中一部分,
所以div 當中可以夾帶一個以上的 span ,
span 中定義的內容不會受到外部 div 的定義影響,
讓區塊中的 style 變化更加豐富。


Reference:
The SPAN and DIV HTML Elements