Avoid writing events for every child element

Question

My script is managing texts where words are separated in spans, where some mouse events are going to be used. Is there a way to make it more elegant, without calling the events functions on every tag?

<div id="reader">

<span id="2" onmousedown="pushed(this)" onmouseup="released(this)">Hello</span>
<span id="3" onmousedown="pushed(this)" onmouseup="released(this)"> </span>
<span id="4" onmousedown="pushed(this)" onmouseup="released(this)">World</span>
<span id="5" onmousedown="pushed(this)" onmouseup="released(this)"> </span>
<span id="6" onmousedown="pushed(this)" onmouseup="released(this)">of</span>
<span id="7" onmousedown="pushed(this)" onmouseup="released(this)"> </span>
<span id="8" onmousedown="pushed(this)" onmouseup="released(this)">Giants</span>
<span id="9" onmousedown="pushed(this)" onmouseup="released(this)"> </span>

score 0 · Answer 1 · edited Jun 11 '19 at 13:30

$(document).ready(function() {
    $('.buttons-mouse-thing').on('mousedown', function() {
       //DO the magic.
    });

    $('.buttons-mouse-thing').on('onmouseup', function() {
       //DO the magic.
    });
});

Or you could do this. If your functions are the same

$(document).ready(function() {
    $('.buttons-mouse-thing').on('mousedown onmouseup', function() {
       //DO the magic.
    });
});

Your html:

<span id="2" class='buttons-mouse-thing'>Hello</span>
<span id="2" class='buttons-mouse-thing'>Hello</span>
<span id="2" class='buttons-mouse-thing'>Hello</span>
<span id="2" class='buttons-mouse-thing'>Hello</span>
<span id="2" class='buttons-mouse-thing'>Hello</span>
<span id="2" class='buttons-mouse-thing'>Hello</span>
<span id="2" class='buttons-mouse-thing'>Hello</span>

You can read about jQuery functionality on and other prototypes at its documentation https://api.jquery.com/

Avoid writing events for every child element

1 Answers1