$(function () {
var buttonView = {
label : 'サンプル',
onClick: function(){ alert('clicked: ' + this.label); },
onHover: function(elem){
var id = elem.toElement.getAttribute("id");
var tar = document.getElementById(id);
tar.setAttribute("style", "color:red");
}
};
_.bindAll(buttonView, 'onClick', 'onHover');
var btn = document.querySelectorAll(".btn");
for(var i = 0, il = btn.length; i < il; i++) {
btn[i].addEventListener('click', buttonView.onClick, false);
btn[i].addEventListener('mouseover', buttonView.onHover, false);
}
});
<p>_.bindAll Practice</p>
<div id="wrapper">
<ol>
<li class="btn" id="b1">button</li>
<li class="btn" id="b2">button</li>
</ol>
</div>
p, div {
margin: 20px 20px 0px;
clear:both;
}
div.trigger2{
color:red;
}
External resources loaded into this fiddle: