Inline versus Delegation
Within the demonstration, side A utilizes the standard addEventListener and registers the wheel event, which serves as the replacement for the deprecated mousewheel event. Employing addEventListener is not only the norm but also the most efficient when event delegation is implemented.
While the usage of onwheel as an attribute event is restricted due to the unconventional and discouraged nature of any attribute event, side B is included, which employs the deprecated non-standard onmousewheel event as an inline event handler attribute. Given that it is coded awkwardly within a <span>, insertAdjacentHTML on a string containing all three types of quotes (i.e., ', ", `) was utilized. The inclusion of a string literal within a secondary level of nested quotes results in a messy implementation.
For insights on how Event Object properties are leveraged in event delegation, refer to this post.
Detailed explanations can be found within the demo
Demo
// Access the buttons
const btnA = document.getElementById('addA');
const btnB = document.getElementById('addB');
// Access the parent nodes
const secA = document.querySelector('section:first-of-type');
const secB = document.querySelector('section:last-of-type');
// Register click event on buttons
btnA.addEventListener('click', addNodeA, false);
btnB.addEventListener('click', addNodeB, false);
/* Register wheel event on section A
|| which serves as the parent node for wheeled
|| nodes. Event delegation entails a single
|| event handler for multiple event targets,
|| presenting a more efficient approach than multiple
|| inline event handlers.
*/
secA.addEventListener('wheel', markNode, false);
let cnt = 0;
/* Include node A within 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;
}
/* Include node B within section B
|| ex. <span id="B3" class="B" onmousewheel="this.style.outline = `5px dashed red`">B3</span>
*/
function addNodeB(e) {
cnt++;
/* This string is enclosed within single quotes,
|| double quotes for the attributes values,
|| and backticks for the property value of
|| an attribute value. The implementation is messy,
|| confusing, and inefficient.
*/
var nodeB = '<span id="B' + cnt + '" class="B" onmousewheel="this.style.outline = `5px dashed red`">B' + cnt + '</span>';
// insertAdjacentHTML encompasses innerHTML
secB.insertAdjacentHTML('beforeend', nodeB);
return false;
}
function markNode(e) {
/* If the wheeled node (i.e. e.target) does not match
|| 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>