javascript_javascript スキルでイベント バインディングを処理するためのいくつかの互換性のある記述メソッド

バインド イベント

コードのコピー コードは次のとおりです。

var addEvent = function( obj, type, fn ) {
if (obj.addEventListener)
obj.addEventListener( type, fn, false );
else if (obj.attachEvent) {
obj["e" type fn] = fn ;
obj.attachEvent( "on" type, function() {
obj["e" type fn]();
}
}; >

別の実装

コードをコピー コードは次のとおりです:

var addEvent = ( function () {

if (document.addEventListener) {
return function (el, type, fn) {
el.addEventListener(type, fn, false);
};
} else {
return function (el, type, fn) {
el.attachEvent('on' type, function () {
return fn.call(el, window.event);
} ; 属性が変更されるとトリガーされます。一般的なものには、テキストの長さの変更、サンプルの長さの変更などが含まれます。FF のほぼ同様の属性は oninput イベントですが、これは textfield と textarea の value 属性のみを対象とします。 Safari、Firefox、Chrome、Opera はすべてこの属性をサポートしています。




コードをコピー

コードは次のとおりです。


var addPropertyChangeEvent = function (obj,fn) {

if(window.ActiveXObject){ obj.onpropertychange = fn; }else{ 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" タイプ, obj["e" タイプ fn] ); obj["e" タイプ fn] = null; 🎜>イベントのロード

コードをコピー


コードは次のとおりです。


varloadEvent = function( fn) {
var oldonload = window.onload;
if (typeof window.onload != '関数') {
window.onload = fn;

window.onload = function() {
oldonload();
fn()

} } } イベントをブロックします

コードをコピー


コードは次のとおりです。


var stopEvent = function(e){
e = e || .event;
if(e.preventDefault) {
e.preventDefault();
}else{

e.returnValue = false; .cancelBubble = true;
}
}

イベントのバブリングを防ぎたいだけの場合

コードをコピーします

コードは次のとおりです。


var stopPropagation = function(e) {
e = e ||
if (! "v1 ") {
e.cancelBubble = true;
} else {
e.stopPropagation();
}

}

イベント ソース オブジェクトを取得 Prototype.js フレームワークの Event.element(e) に​​相当

コードをコピー

コードは次のとおりです:


var getEvent = function(e){
e = e ||
var target =event.srcElement ?event.target; >return target
}

または、この関数はより強力です。datagrid の開発時に開発しました。詳細な使用法については、「テーブルのソートを実装する方法を段階的に説明します (パート 2)」を参照してください。 」。

コードをコピー コードは次のとおりです:

var getEvent = function(e) {
var e = e ||ウィンドウ.イベント;
if (!e) {
var c = this.getEvent.caller;
while (c) {
e = c.arguments[0];
if (e && (Event == e.constructor || MouseEvent == e.constructor)) {
break;
}
c = c.caller;
}
}
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

作者:Ruby's Louvre