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

Question

我是JavaScript的新手,我有以下问题.进入JSP页面我有这样的事情:

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

所以你可以看到点击复选框它调用这个changeCheckbox()实际上是非常简单的:

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

    var checkedRowList = new Array();
}

问题是,在这个函数中,我必须检索触发change事件的输入对象是什么(我认为这样的事情)

如何在以前的changeCheckbox()函数中获取对单击复选框的引用？

Answer 1

该元素在事件处理程序内容属性中可用,而不是在changeCheckbox.但你可以将它作为一个参数传递.

• 运用 this

  changeCheckbox(this)
  

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

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

• 使用event:

  changeCheckbox(event.target)
  

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

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

请注意,最好使用addEventListener:

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

然后该函数changeCheckbox将接收事件对象作为其第一个参数,并将当前目标元素作为this值.

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

<input type="checkbox" />