.title {color:#ff7200;font-size:23px;line-height:28px}
.none {color:#99c;}
.red {color:#f00;}
h4.subject{border:none!important;color:#EE862C;}
/* 细线表格 */
绑定事件
var
addEvent =
function
( obj, type, fn ) {
|
obj.addEventListener( type, fn,
false
);
|
else
if
(obj.attachEvent) {
|
obj.attachEvent(
"on"
+type,
function
() {
|
另一个实现
var
addEvent =(
function
() {
|
if
(document.addEventListener) {
|
return
function
(el, type, fn) {
|
el.addEventListener(type, fn,
false
);
|
return
function
(el, type, fn) {
|
el.attachEvent(
'on'
+ type,
function
() {
|
return
fn.call(el, window.event);
|
绑定onpropertychange事件
onpropertychange是微软制造的一个事件,它在一个元素的属性发生变化的时候触发,常见的有文本的长度改变,样长改变等,FF大致和
它相似的属性为oninput事件,不过它只针对textfield与textarea的value属性。safari,firefox,chrome与
opera都支持此属性。
var
addPropertyChangeEvent =
function
(obj,fn) {
|
if
(window.ActiveXObject){
|
obj.onpropertychange = fn;
|
obj.addEventListener(
"input"
,fn,
false
);
|
移除事件
var
removeEvent =
function
( obj, type, fn ) {
|
if
(obj.removeEventListener)
|
obj.removeEventListener( type, fn,
false
);
|
else
if
(obj.detachEvent) {
|
obj.detachEvent(
"on"
+type,obj[
"e"
+type+fn] );
|
加载事件
var
loadEvent =
function
(fn) {
|
var
oldonload = window.onload;
|
if
(
typeof
window.onload !=
'function'
) {
|
window.onload =
function
() {
|
阻止事件
var
stopEvent =
function
(e){
|
如果仅仅是阻止事件冒泡
var
stopPropagation =
function
(e) {
|
取得事件源对象
相当于Prototype.js框架的Event.element(e)
var
getEvent =
function
(e){
|
var
target= event.srcElement ? event.srcElement : event.target;
|
if
(window.event)
return
window.event;
|
while
(c.caller) c =c.caller;
|
或者这个功能更强大,我在开发datagrid时开发出来的,详细用法见
《一步步教你实现表格排序(第二部分)》。
var
getEvent =
function
(e) {
|
var
e = e || window.event;
|
var
c =
this
.getEvent.caller;
|
if
(e && (Event == e.constructor || MouseEvent== e.constructor)) {
|
var
target= e.srcElement ? e.srcElement : e.target,
|
currentN = target.nodeName.toLowerCase(),
|
parentN= target.parentNode.nodeName.toLowerCase(),
|
grandN = target.parentNode.parentNode.nodeName.toLowerCase();
|
return
[e,target,currentN,parentN,grandN];
|
最后附上DOM3.0事件的一览表
type | Bubbling phase | Cancelable | Target node types | DOM interface |
---|
DOMActivate
| Yes | Yes | Element
| UIEvent
|
DOMFocusIn
| Yes | No | Element
| UIEvent
|
DOMFocusOut
| Yes | No | Element
| UIEvent
|
focus
| No | No | Element
| UIEvent
|
blur
| No | No | Element
| UIEvent
|
textInput
| Yes | Yes | Element
| TextEvent
|
click
| Yes | Yes | Element
| MouseEvent
|
dblclick
| Yes | Yes | Element
| MouseEvent
|
mousedown
| Yes | Yes | Element
| MouseEvent
|
mouseup
| Yes | Yes | Element
| MouseEvent
|
mouseover
| Yes | Yes | Element
| MouseEvent
|
mousemove
| Yes | Yes | Element
| MouseEvent
|
mouseout
| Yes | Yes | Element
| MouseEvent
|
keydown
| Yes | Yes | Element
| KeyboardEvent
|
keyup
| Yes | Yes | Element
| KeyboardEvent
|
mousemultiwheel
| Yes | Yes | Document , Element
| MouseMultiWheelEvent
|
mousewheel
| Yes | Yes | Document , Element
| MouseWheelEvent
|
DOMSubtreeModified
| Yes | No | Document , DocumentFragment , Element , Attr
| MutationEvent
|
DOMNodeInserted
| Yes | No | Element , Attr , Text , Comment , CDATASection , DocumentType , EntityReference , ProcessingInstruction
| MutationEvent
|
DOMNodeRemoved
| Yes | No | Element , Attr , Text , Comment , CDATASection , DocumentType , EntityReference , ProcessingInstruction
| MutationEvent
|
DOMNodeRemovedFromDocument
| No | No | Element , Attr , Text , Comment , CDATASection , DocumentType , EntityReference , ProcessingInstruction
| MutationEvent
|
DOMNodeInsertedIntoDocument
| No | No | Element , Attr , Text , Comment , CDATASection , DocumentType , EntityReference , ProcessingInstruction
| MutationEvent
|
DOMAttrModified
| Yes | No | Element
| MutationEvent
|
DOMCharacterDataModified
| Yes | No | Text , Comment , CDATASection , ProcessingInstruction
| MutationEvent
|
DOMElementNameChanged
| Yes | No | Element
| MutationNameEvent
|
DOMAttributeNameChanged
| Yes | No | Element
| MutationNameEvent
|
load
| No | No | Document , Element
| Event
|
unload
| No | No | Document , Element
| Event
|
abort
| Yes | No | Element
| Event
|
error
| Yes | No | Element
| Event
|
select
| Yes | No | Element
| Event
|
change
| Yes | No | Element
| Event
|
submit
| Yes | Yes | Element
| Event
|
reset
| Yes | Yes | Element
| Event
|
resize
| Yes | No | Document , Element
| UIEvent
|
scroll
| Yes | No | Document , Element
| UIEvent
|