如何创建用于上下滚动的自定义事件？

Question

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);

谢谢大家。

Answer 1

首先我会使用 "wheel" event 而不是非标准化 "mousewheel" 事件.
我创建了一个 scrollUp 和 scrollDown 自定义事件分派的简单实现。

编辑

我添加了 IE polyfill for the CustomEvent 以支持 IE

// 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>

如何创建用于上下滚动的自定义事件？

How can I create a custom event for scroll up and down?

html

javascript

scroll

mouseevent

pure-js