Capture mouse wheel event as native HTML attribute

Question

I'm about to start working with the mousewheel event but the only thing I can find online uses addEventListener(). I am wanting to detect is with native HTML and CSS. In other words I'm looking for something like:

<span id='fooBar' onmousewheel='alert("fooBar")'></span>

I am creating spans dynamically and injecting them into the DOM and it would work a lot better if I didn't have to run javascript to do so. Every other event I can seem to get working natively but not mousewheel. Is this possible?

Answer 1

The reason you are only finding references to addEventListener() is because that is the standard and correct way to do it (it appears that onmousewheel isn't even supported in Firefox).

While this can be made to work (in browsers that support it) using the code you show in your question (except that your span is empty so you can't initiate the event with it since the element won't have any rendered size) and I have an example of that below, the use of inline HTML event handling attributes hearkens back to the time before we had standards and should not be used. Here's a link to another answer of mine that explains why.

<span id='fooBar' onmousewheel='alert("fooBar")'>Use the mousewheel while mouse is over this</span>

Answer 2

Inline vs. Delegation

In the demo the A side uses the standard addEventListener and registers the wheel event which is the replacement for the deprecated mousewheel event. Using the addEventListener is not only the standard but it's the most efficient if event delegation is used.

The use of onwheel as an attribute event has limited support due to the fact that using any attribute event is non-standard and discouraged. Despite this, I have included side B which uses the deprecated non-standard onmousewheel event for an attribute inline event handler. Because it's an awkwardly coded <span>, I used insertAdjacentHTML on a string that used all three quotes (i.e.', ", `). The use of a string literal was used on the a 2nd level of nested quotes, it's very messy.

Refer to this post on how the Event Object properties are utilized in event delegation.

Details are commented in the demo

Demo

// Reference the buttons 
const btnA = document.getElementById('addA');
const btnB = document.getElementById('addB');

// Reference the parent nodes
const secA = document.querySelector('section:first-of-type');
const secB = document.querySelector('section:last-of-type');

// Register the click event on buttons
btnA.addEventListener('click', addNodeA, false);
btnB.addEventListener('click', addNodeB, false);

/* Register the wheel event on section A 
|| which is the parent node of the wheeled
|| nodes. Event delegation involves one 
|| event handler for multiple event targets.
|| This is far more efficient than multiple 
|| inline event handlers.
*/
secA.addEventListener('wheel', markNode, false);

let cnt = 0;

/* Add node A to section A
|| ex. <span id="A1" class="A">A1</span>
*/
function addNodeA(e) {
  cnt++;
  var nodeA = document.createElement('span');
  nodeA.id = 'A' + cnt;
  nodeA.textContent = nodeA.id;
  nodeA.className = 'A';
  secA.appendChild(nodeA);
  return false;
}

/* Add node B to section B
|| ex. <span id="B3" class="B" onmousewheel="this.style.outline = `5px dashed red`">B3</span>
*/
function addNodeB(e) {
  cnt++;
  /* This string is wrapped in single quotes,
  || double quotes for the attributes values,
  || and backticks for the property value of
  || an attribute value. Very messy, confusing,
  || and inefficient.
  */
  var nodeB = '<span id="B' + cnt + '" class="B" onmousewheel="this.style.outline = `5px dashed red`">B' + cnt + '</span>';

  // insertAdjacentHTML is innerHTML on steroids
  secB.insertAdjacentHTML('beforeend', nodeB);
  return false;
}

function markNode(e) {

  /* If the wheeled node (i.e. e.target) is not the 
  || registered node (i.e. e.currentTarget), then...
  */
  if (e.target !== e.currentTarget) {
    var node = e.target;
    if (node.className === 'A') {
      node.style.outline = '5px dashed blue';
    } else {
      return false;
    }
  }
}

html,
body {
  width: 100%;
  width: 100%
}

fieldset {
  height: 10%;
}

main {
  border: 3px solid lime;
  height: 90%;
  min-height: 250px;
  display: flex;
}

section {
  width: 50%;
  min-height: 250px;
  outline: 3px dashed gold;
  padding: 10px 25px;
}

span {
  height: 50px;
  width: 50px;
  padding: 2px;
  text-align: center;
  font-size: 12px;
  margin: 5px;
  display: inline-block;
}

.A {
  background: rgba(0, 100, 200, .3);
}

.B {
  background: rgba(200, 100, 0, .3);
}

#addB {
  margin-left: 35%
}

<fieldset>
  <legend>addNode</legend>
  <button id='addA'>nodeA</button>
  <button id='addB'>nodeB</button>
</fieldset>
<main>
  <section></section>
  <section></section>
</main>

Answer 3

You can dynamically create elements with listeners pretty easily. You just need to understand the DOM and how to attach event listeners.

The example below creates 10 spans and attaches a listener to each of them. Just hover over a span and scroll the mouse-wheel. The ID of the span will be logged to the console.

// Create 10 spans with a scroll listener.
var count = 10;
for (var i = 0; i < count; i++) {
  var span = document.createElement('SPAN');
  span.id = 'foo-bar-' + i;
  span.innerHTML = 'Foo #' + i;
  addEventListener(span, 'mousewheel', performEvent);
  document.body.appendChild(span);
}

// Event function.
function performEvent(e) {
  console.log(e.target.id);
}

// IE 8+ via http://youmightnotneedjquery.com/
function addEventListener(el, eventName, handler) {
  if (el.addEventListener) {
    el.addEventListener(eventName, handler);
  } else {
    el.attachEvent('on' + eventName, function(){
      handler.call(el);
    });
  }
}

.as-console-wrapper { max-height: 5em !important; }

span[id^="foo-bar-"] {
  border: thin solid black;
  margin: 0.25em;
}

Answer 4

Try the following:

::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}

<!DOCTYPE HTML>
<html>
  <body style="overflow: auto;
max-height: 100vh;" onscroll="alert('hi')">
    <div style="height:2000px;width:100%"></div>
  </body>
</html>

Answer 5

The reason you find "addEventListener" examples only is because you need to handle this cross-browser:

var supportedWheelEvent = "onwheel" in HTMLDivElement.prototype ? "wheel" : document.onmousewheel !== undefined ? "mousewheel" : "DOMMouseScroll";

Also, it's best to do this on one element only! Use delegated event listener to handle this for all of the elements that you need.

HTML Example:

<div id="delegator">
   <div class="handleWheel">handle wheel event here</div>
   <div> no wheel event handled here </div>
   <div class="handleWheel">handle wheel event here</div>
   <div> no wheel event handled here </div>
</div>

JS:

var supportedWheelEvent = "onwheel" in HTMLDivElement.prototype ? "wheel" : document.onmousewheel !== undefined ? "mousewheel" : "DOMMouseScroll";

function handler(e){
    if(e.target.classList.contains('handleWheel')){
        // handle the event here
    }
}

var d = document.getElementById('delegator');
d.addEventListener(supportedWheelEvent, handler);

Working codepen sample: https://codepen.io/Mchaov/pen/zwaMmM