如何找到从中调用函数的元素(Javascript）

How to find out the element where a function was called from (Javascript)

本文关键字：元素 Javascript 函数 调用 何找      更新时间：2023-09-26

这是我的HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
 <link rel = "stylesheet" type="text/css" href="styles/css/style.css" />
</head>
<body>
<div>
    <select class="option_block" size="5" multiple="1">
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
            <option>Option 4</option>
            <option>Option 5</option>
       </select>
       <div class="button_block" multiple="1">
            <button class="move_button" id="MoveAllToRight">>></button>
            <button class="move_button" id="MoveToRight">></button>
            <button class="move_button" id="MoveToLeft"><</button>
            <button class="move_button" id="MoveAllToLeft"><<</button>
       </div>
    <select class="option_block" size="5"></select>
</div>
<script src="scripts/javascript/script.js"></script>
</body>
</html>

Adh这是我的JS脚本：

(function(){
function move(direction) {
..........
}
function moveAll(direction) {
...........
}

document.getElementById("MoveAllToRight").addEventListener("click", function () {
    moveAll('ToRight');
});
document.getElementById("MoveToRight").addEventListener("click", function () {
    move('ToRight');
});
document.getElementById("MoveToLeft").addEventListener("click", function () {
    move('ToLeft');
});
document.getElementById("MoveAllToLeft").addEventListener("click", function () {
    moveAll('ToLeft');
});

})();

我决定不显示move和moveAll函数的包含，因为这显然是多余的信息。

如何访问包含move和moveAll函数中两个元素的"div"？我有一个使用"ID"的解决方案，但它不可扩展。

document.getElementById("MoveAllToRight").addEventListener("click", function(event) {
    moveAll(event, 'ToRight');
});

在函数event.target中，将显示调用事件的元素。

除非将事件侦听器显式绑定到其他对象，否则'this'关键字将成为触发事件的元素。

因此，您应该能够通过执行来访问父div

this.parentElement

或者弄清楚如何使用的任何库在Dom中漫游

相关文章：