JavaScript 이벤트 처리 예제 Sharing_javascript 기술

쓸데없는 소리는 그만하고 샘플 코드만 제공하세요.

코드 복사 코드는 다음과 같습니다. 함수 EventUtil() { var _self = this; ///添加事件 var addEvent = (함수 () { if (document.addEventListener) { 반환 함수(el, type, fn) { el.addEventListener(type, fn, false); } } 그 밖의 { 반환 함수(el, type, fn) { el.attachEvent("on" 유형, 함수 () { return fn.call(el, window.event); }); } } })(); ///添加属性改变事件 var addPropertyChangeEvent = 함수(obj, fn) { if (window.ActiveXObject) { obj.onpropertychange = fn; } 그 밖의 { obj.addEventListener("input", fn, false); } } //移除事件 var RemoveEvent = 함수(obj, type, fn) { if (obj.removeEventListener) { obj.removeEventListener(type, fn, false); } else if (obj.detachEvent) { obj.detachEvent("on" type, obj["on" type fn]); obj["on" type fn] = null; } } //加载事件 var loadEvent = 함수(fn) { var oldonload = window.onload; if (oldonload 유형 != "함수") { window.onload = fn; } 그 밖의 { window.onload = 함수() { oldonload(); fn(); } } } //阻止事件 var stopEvent = 함수 (e) { e = e || window.event; if (e.preventDefault) { e.preventDefault(); e.stopPropagation(); } else { e.returnValue = false; e.cancelBubble = true; } } //이벤트 버블링을 방지하려는 경우 var stopPropagation = 함수 (e) { e = e || window.event; if (! "v1") { e.cancelBubble = true; } else { e.stopPropagation(); } } //이벤트 소스 객체 가져오기 var getEvent1 = 함수 (e) { e = e || window.event; var obj = e.srcElement ? e.srcElement : e.target; obj 반환; } //이벤트 소스 객체 가져오기 var getEvent2 = 함수 (e) { (window.event)가 window.event를 반환하는 경우; var c = getEvent2.caller; 동안(c.caller) { c = c.caller; } 반환 c.인수[0]; } //또는 이 기능이 더 강력합니다 var getEvent3 = 함수 (e) { var e = e || window.event; if (!e) { var c = this.getEvent3.caller; 동안 (c) { e = c.arguments[0]; If (e && (Event == e.constructor || MouseEvent == e.constructor)) { 휴식; } 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, 대상, 현재N, parentN, grandN]; } _self.addEvent = addEvent; _self.addPropertyChangeEvent = addPropertyChangeEvent; _self.removeEvent = 제거이벤트; _self.loadEvent = 로드이벤트; _self.stopEvent = 중지이벤트; _self.stopPropagation = stopPropagation; _self.getEvent1 = getEvent1; _self.getEvent2 = getEvent2; _self.getEvent3 = getEvent3; } var eventUtil = new EventUtil(); eventUtil.loadEvent(함수 () { eventUtil.addEvent(document, "click", function (e) { 경고(eventUtil.getEvent3(e)); }); eventUtil.addPropertyChangeEvent(document,function(e){ 경고(eventUtil.getEvent3(e)); }); });

javascript事件处理分为三个阶段：捕获 - 处理 - 起泡。

以点击按钮为例： 捕获阶段：由外层到内层，首先调用给Window注册的click捕获阶段监听방법，然后document、body、一层层的父节点，一直到按钮本身。

处理阶段: 调用按钮本身을 클릭하여 사용하는 방법입니다.

起泡阶段：从按钮开始，从内层到外层，依次调用各级父节点的起泡阶段监听方法，直到Window.

但是，对于IE8及更低版本IE，不支持捕获阶段，因此捕获阶段的事件监听目前尚통통하지않습니다.

일반적인 사건 처리 방식의 형태:

复主代码 代码如下: 함수 eventHandler(e) { e = e || 창.이벤트; var target = e.target || e.srcElement; ... ... } e为事件对象，当事件触发时，作为参数传进来，但对于IE8及更低版本IE 不适用，只能过全局的event变访问，好进来会 out 现 同 时 处 两 个 事 件 的情况。