JavaScript에서 익명 이벤트 핸들러를 제거하는 방법

小云云

풀어 주다： 2018-03-17 10:59:50

원래의

2861명이 탐색했습니다.

addEventListener() 및 attachmentEvent()를 사용하여 이벤트 핸들러를 DOM 요소에 바인딩할 때 익명 함수가 전달되면 해당 제거 이벤트 목록너() 및 detachEvent() 바인딩을 사용하여 익명 핸들러를 제거할 수 없습니다. 그래서 우리는 그것을 사용할 때 함수 표현식을 전달해야 합니다.

그럼 바인딩 및 바인딩 해제에 익명 함수를 사용하려면 어떻게 해결해야 할까요?

Idea

이 두 함수 중 어느 것도 바인딩 해제를 위해 익명 함수를 허용하지 않으므로 이벤트를 관리하는 데 사용할 수 없으므로 이벤트를 처리할 사용자 정의 개체를 정의합니다.
이벤트 핸들러의 핵심은 객체에 이벤트가 발생하면 해당 이벤트를 수신하는 함수가 실행된다는 것입니다.

DOM 요소는 여러 이벤트 유형의 핸들러에 바인딩될 수 있습니다. 예를 들어 클릭하면 색상이 변경되고 마우스를 올리면 색상이 커집니다.

이벤트 유형은 여러 이벤트 핸들러에 바인딩될 수 있습니다. 예를 들어 마우스 오버가 발생하면 색상이 바뀌고 커집니다.

그래서 이 이벤트 객체에는 이 DOM 요소에 바인딩된 모든 이벤트 핸들러를 저장하는 속성이 있어야 하며 추가 메서드와 제거 메서드 두 개가 있어야 합니다.

{
    handlers:{
    type1:[handler1,handler2],
    type2:[handler1,handler2],    ...//其他事件类型和对应的事件处理函数
    },
    on:function(){},
    off:function(){}
}

로그인 후 복사

이벤트가 발생하면 이 객체의 해당 이벤트 유형 배열에 있는 모든 함수가 호출됩니다.

그래서 바인딩 이벤트는 해당 배열에 함수를 추가하는 것이고, 바인딩 해제 이벤트는 배열에서 함수를 삭제하는 것입니다.

그렇다면 올바른 DOM 요소가 작동하는지 확인하는 방법은 무엇일까요?

분명히 각 DOM 요소에는 자체 이벤트 핸들러를 관리하기 위한 이와 같은 객체가 필요합니다. 이 이벤트 관리 객체를 dom 요소의 속성으로 만들면 올바른 dom 요소가 작동됩니다. 구현

각 DOM 요소에는 이러한 객체가 필요하며 각 객체의 on() 및 off() 메서드는 동일합니다. 따라서 이 두 가지 메서드를 그의 프로토타입 객체에 넣으려면 생성자가 필요합니다.

    function EventManage() {
        this.handlers = {}
    }
    EventManage.prototype = {
        on: function (type, handler) {
            if (!this.handlers[type]) {
                this.handlers[type] = [handler]                return true //避免添加多个事件
            } else {
                this.handlers[type].push(handler)
            }
        },
        off: function (type, handler) {
            for (var i = 0; i < this.handlers[type].length; i++) {
                if (this.handlers[type][i].toString() == handler.toString()) {
                    this.handlers[type].splice(i, 1);
                }
            }
        }
    }

로그인 후 복사

각 개체에 이 두 가지 메서드를 사용하면 이벤트 핸들러를 직접 추가하고 제거할 수 있습니다. 하지만 이벤트를 수신하려면 여전히 JavaScript에서 제공하는 메서드에 의존해야 하므로 addEventListner() 및 attachmentEvent()를 사용하세요. :

    var EventUtil = {};
    EventUtil.on = function (ele, type, handler) {
        if (!ele.event) {
            ele.event = new EventManage();
            console.log(ele.event.handlers)
        }
        var isNewType = ele.event.on(type, handler);
        var fire = function () {            for (var i = 0; i < ele.event.handlers[type].length; i++) {
                ele.event.handlers[type][i]();
            }
        }        if (isNewType) {            if (ele.addEventListener) {
                ele.addEventListener(type, fire, false);
            } else {
                ele.attachEvent("on" + type, fire)
            }
        }
    }
    EventUtil.off = function (ele, type, handler) {
        ele.event.off(type, handler);
    }

로그인 후 복사

여기서 주목해야 할 문제는 EventUtil.on()을 사용할 때마다 실행 함수가 재정의되고 addEventListener()가 동일한 이벤트 유형에 여러 개의 동일한 이벤트 핸들러를 추가한다는 것입니다. 이를 판단해야 합니다. 이벤트 유형이 새로운 것입니까? 그렇다면 addEventListener()를 사용하여 이 이벤트 유형을 수신하십시오.

사용 예:

var btn=document.getElementById(“btn”);
EventUtil.on(btn,”click”,function(){ 
  console.log(“11”);
}); EventUtil.on(btn,”click”,function(){ 
  console.log(“22”); }); EventUtil.off(btn,”click”,function(){ 
  console.log(“11”); });

로그인 후 복사

위 내용은 JavaScript에서 익명 이벤트 핸들러를 제거하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!