如何在JavaScript中触发事件的情况下检索对html对象的引用？

Question

I am pretty new in JavaScript and I have the following problem. Into a JSP page I have something like this:

    <tbody>
        <c:forEach items="${listaProgetti.lista}" var="progetto" varStatus="itemProgetto">
            <tr id='<c:out value="${progetto.prgPro}" />'>
                <td><input type="checkbox" class="checkbox" onchange="changeCheckbox()"></td>
                .....................................................
                .....................................................
                .....................................................
            </tr>
        </c:forEach>
    </tbody>

So a you can see clicking on the checkbox it is call this changeCheckbox() that actually is something very simple:

function changeCheckbox() {
    alert("INTO changeCheckbox()");

    var checkedRowList = new Array();
}

The problem is that into this function I have to retrieve what is the input object that fire the change event (I think something like the this )

How can I obtain the reference to the clicked checkbox in my previous changeCheckbox() function?

Answer 1

The element is available in the event handler content attribute, not in changeCheckbox . But you can pass it as an argument.

• Using this

   changeCheckbox(this) 

   function changeCheckbox(elem) { elem.style.marginLeft = '100px'; } 

   <input type="checkbox" onchange="changeCheckbox(this)" /> 

• Using event :

   changeCheckbox(event.target) 

   function changeCheckbox(elem) { elem.style.marginLeft = '100px'; } 

   <input type="checkbox" onchange="changeCheckbox(event.target)" /> 

Note it would be better to use addEventListener :

document.querySelector('input').addEventListener('change', changeCheckbox);

Then the function changeCheckbox will receive the event object as its first parameter, and the current target element as the this value.

 document.querySelector('input').addEventListener('change', changeCheckbox); function changeCheckbox(e) { e.target.style.marginLeft = '100px'; } 

 <input type="checkbox" />