如何检索在 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();
}

问题是，在这个函数中，我必须检索触发更改事件的 input 对象是什么（我认为类似于 this)

如何在我之前的 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" />

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

How to retrieve the reference to an html object the fired an event in JavaScript?

javascript

html

javascript-events