MDN은 (내가 잘하지 않았다)하는 방법을 사용자 정의 이벤트를 만드는 나에게 말했다
var event = new Event('build');
// Listen for the event.
elem.addEventListener('build', function (e) { ... }, false);
// Dispatch the event.
elem.dispatchEvent(event);
마우스 스크롤을 감지하는 방법도 알고 있습니다.
var doScroll = function (e) {
// cross-browser wheel delta
e = window.event || e;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
// Do something with `delta`
document.body.innerHTML = delta;
e.preventDefault();
};
if (window.addEventListener) {
window.addEventListener("mousewheel", doScroll, false);
window.addEventListener("DOMMouseScroll", doScroll, false);
} else {
window.attachEvent("onmousewheel", doScroll);
}
하지만이 두 가지를 서로 혼합하고 사용자 지정 이벤트를 만드는 방법을 모르기 때문에 다음과 같은 것을 가질 수 있습니다.
window.addEventListener('scrollUp', sUpFunction);
window.addEventListener('scrollDown', sDownFunction);
감사합니다.
먼저 표준화되지 않은 "mousewheel"이벤트 대신 "wheel"이벤트 를 사용합니다 . scrollUp 및 scrollDown 사용자 지정 이벤트 전달의 간단한 구현을 만들었습니다.
편집하다
IE도 지원하기 위해 CustomEvent 에 대한 IE polyfill을 추가했습니다.
// For IE support
(function () {
if ( typeof window.CustomEvent === "function" ) return false; //If not IE
function CustomEvent ( event, params ) {
params = params || { bubbles: false, cancelable: false, detail: undefined };
var evt = document.createEvent( 'CustomEvent' );
evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
return evt;
}
CustomEvent.prototype = window.Event.prototype;
window.CustomEvent = CustomEvent;
})();
let element = document.getElementsByClassName("scroll-area")[0],
scrollUpEvent = new CustomEvent("scrollUp"),
scrollDownEvent = new CustomEvent("scrollDown");
function scrollDown(){
console.log("scrolled down");
}
function scrollUP(){
console.log("scrolled up");
}
function scrollHappened(e){
if(e.deltaY < 0){
element.dispatchEvent(scrollUpEvent);
} else {
element.dispatchEvent(scrollDownEvent);
}
}
element.addEventListener("wheel", scrollHappened);
element.addEventListener("scrollUp", scrollUP);
element.addEventListener("scrollDown", scrollDown);.scroll-area {
border: solid 2px black;
height: 30px;
}<div class="scroll-area">Scroll on me</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다