Jquery multiple selector with buttons

Using jquery multiple selectors with buttons to show how events and object can be passed

by Riffic

HTML

<div id="testBtn1" class="btn">Click 1</div>
<div id="testBtn2" class="btn">Click 2</div>
<br />
<div id="testBtn3" class="btn">Click 3</div>
<div id="testBtn4" class="btn">Click 4</div>
<br />
<div id="testBtn5" class="btn">Click 5</div>
<div id="testBtn6" class="btn">Click 6</div>
<br />
<div id="testBtn7" class="btn">Click 7</div>
<div id="testBtn8" class="btn">Click 8</div>

CSS

.btn {width: 80px; 
    height: 25px; 
    margin: 5px; 
    text-align: center; 
    line-height: 25px; 
    border: 1px solid #000;
    border-radius: 5px;
    box-shadow: 1px 1px 5px #000;
    cursor: pointer;
}
.btn:hover {
    background: #E1E1E1;
}

JavaScript

function handleBtnClick(obj) {
    console.log(obj.event, obj.button);
}
$('#testBtn1, #testBtn2').on('click', function(ev) {
    handleBtnClick({
        event: ev,
        button: this
    });
});

var btnThree = $("#testBtn3");
var btnFour = $("#testBtn4");
//Directly pass jq elements //Notice only accepts first arg
$( btnThree, btnFour ).on('click', function(ev) {
    handleBtnClick({
        event: ev,
        button: this
    });
});

var btnFive = $("#testBtn5");
var btnSix = $("#testBtn6");
//Pass the DOM selection //Same results as jq elements
$( btnFive[0] , btnSix[0] ).on('click', function(ev) {
    handleBtnClick({
        event: ev,
        button: this
    });
});

var btnSev = $("#testBtn7");
var btnEit = $("#testBtn8");

//Now pass each DOM ELEMENT as an array, 
//note Dom means using either the [0] array format
//or .get(0) - btnSev.get(0)
$( [ btnSev[0] , btnEit[0] ] ).on('click', function(ev) {
    handleBtnClick({
        event: ev,
        button: this
    });
});