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 함수(el, type, fn) {
el.attachEvent('on' type, function() {
return fn.call(el, window.event);
} ; 속성이 변경되면 트리거됩니다. 일반적인 속성에는 텍스트 길이 변경, 샘플 길이 변경 등이 포함됩니다. FF의 대략 유사한 속성은 oninput 이벤트이지만 텍스트 필드 및 텍스트 영역의 값 속성만 대상으로 합니다. 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 }

}; 🎜>이벤트 로딩

코드 복사


코드는 다음과 같습니다.

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

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

}

이벤트 차단




코드 복사


코드는 다음과 같습니다.

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

e.stopPropagation() }else{ e.returnValue = false; .cancelBubble = true; } }

이벤트 버블링만 방지하고 싶다면

코드 복사


코드는 다음과 같습니다.


var stopPropagation = function(e) {
e = e || window.event

if (! "v1; ") {
e.cancelBubble = true;
} else {

e.stopPropagation(); } } 이벤트 소스 객체 가져오기

Event.element(Prototype.js 프레임워크의 e)와 동일

코드 복사


코드는 다음과 같습니다. :

var getEvent = function(e){
e = e || window.event
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.발신자;
}
}
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	예	아니요	문서, 요소	UIEvent

작자:Ruby's Louvre