Jquery에서 .off()를 호출 한 후 이벤트 처리기를 재설정하는 방법

Question

두 번째 body.on()이 작동하지 않는 이유는 무엇입니까? 두 마우스 휠 이벤트가 하나의 마우스 휠 다운 이벤트로 트리거되지 않았기 때문에 .off()를 추가했습니다. 두 번째 body.on()은 .off()를 다시 설정해야합니까? 어떻게 프로그램해야합니까?

$(document).ready(function() { 
    $("body").on('mousewheel', function(event, delta) { 
    if (event.deltaY < 0) { 
     if (!$(".both").hasClass('rotated')) { 
     $(".both").css('transform', 'rotate(180deg)'); 
     setTimeout(function() { $(".both").addClass('rotated') }, 1000); 
     } 
    } 
    $("body").off(); 
    }); 
    $("body").on('mousewheel', function(event, delta) { 
    if (event.deltaY < 0) { 
     if ($(".both").hasClass('rotated')) { 
     alert("a"); 
     } 
    } 
    }); 
}); 

---

내가 선택한 답변

$(document).ready(function() { 

    function handleWheel(event) { 
    if (event.deltaY < 0) { 
     if (!$(".both").hasClass('rotated')) { 
     $(".both").css('transform', 'rotate(180deg)'); 
     setTimeout(function() { $(".both").addClass('rotated') }, 1000); 
     } 
    } 
    // disengage just this event handler and no others 
    $("body").off('mousewheel', handleWheel); 
    }; 
    function handleWheelNoche(event) { 
    if (event.deltaY < 0) { 
     if ($(".both").hasClass('rotated')) { 
     setTimeout(function() { $(".black").addClass('noche') }, 1000); 
     } 
    } 
    }; 
    $("body").on('mousewheel', handleWheel); 
    $("body").on('mousewheel', handleWheelNoche); 
}); 

Answer 1

귀하의 코드가 body 개체에 두 mousewheel 이벤트 핸들러를 등록에, 사례 사람이 필요에 내 문제에 대한 모든 감사 작업 솔루션을 추가합니다. mousewheel 이벤트가 발생하고 이벤트 처리기 콜백 함수가 호출되면 첫 번째 이벤트 처리기는 $("body").off();을 호출하여 두 이벤트 처리기를 모두 등록 취소하므로 향후 이벤트가 발생하지 않습니다.

해당 시점에 body 개체에는 더 이상 이벤트 처리기가 없습니다.

이벤트 핸들러를 한 번만 호출하려면 .one()을 사용할 수 있습니다. 그 외에도 두 개의 개별 이벤트 처리기가있는 이유가 명확하지 않으므로 다른 정보를 알려줘야 할 이유가 명확하지 않습니다.

일반적으로 동일한 이벤트에 대해 두 개의 개별 이벤트 처리기를 사용할 이유가 없습니다. 어떤 작업을 하든지 하나의 이벤트 핸들러에서 작업을 수행 할 수 있습니다. 일부 이벤트 중에 일부 작업 만 수행하려는 경우 단일 이벤트 핸들러 내에 논리를 구현하여 이벤트 핸들러가 호출 될 때마다 수행 할 작업을 결정하십시오 (if 문 등 사용).

이벤트 처리기 중 하나만 등록 취소하려면 이벤트 핸들러 $('body').on('mousewheel', funcName);과 함께 명명 된 함수를 사용해야하므로 $('body').off('mousewheel', funcName)을 호출하면 해당 이벤트 처리기 만 등록을 취소 할 수 있습니다. 이름이 지정된 함수를 사용하여

는

---

다음과 같이 작동

$(document).ready(function() { 

    function handleWheel(event) { 
    if (event.deltaY < 0) { 
     if (!$(".both").hasClass('rotated')) { 
     $(".both").css('transform', 'rotate(180deg)'); 
     setTimeout(function() { $(".both").addClass('rotated') }, 1000); 
     } 
    } 
    // disengage just this event handler and no others 
    $("body").off('mousewheel', handleWheel); 
    } 

    $("body").on('mousewheel', handleWheel); 

});