Javascript 避免为每个子元素编写事件

我的脚本是管理文本，在文本中，单词以跨距分隔，其中将使用一些鼠标事件。有没有一种方法可以使它更加优雅，而不必在每个标记上调用events函数

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

或者你可以这样做。如果你的功能相同

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

您的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>

您可以在其文档中阅读关于jQuery和其他原型的功能

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