ホームページ  >  記事  >  ウェブフロントエンド  >  javascript_javascript スキルでイベント バインディングを処理するためのいくつかの互換性のある記述メソッド

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

WBOY
WBOYオリジナル
2016-05-16 18:38:24936ブラウズ

バインド イベント

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

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)
コードをコピー


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


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
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。