如何让JS为一个div处理多个事件

Question

我对如何在Javascript中处理事件一无所知，并且希望避免使用在html标记中带有"onclick"的模块化函数。基本上，我想写一个函数，在点击时滚动到页面中包含该元素的部分，但我对如何做到这一点一无所知。

我有一个这样的模块化功能：

var elmnt = $("#links").on("click", function() {
elmnt.scrollIntoView;
console.log;
});

现在，我将参数传递给a href标记，但是如何让JS查找这些事件并滚动到它们？我是否为单击的每个链接编写一个函数？有更好的方法吗？提前谢谢。

Answer 1

以下是一些更正：

1( scrollIntoView是函数

2( 点击回调处理程序应该引用元素

检查以下代码。

var elmnt = $("#links").on("click", function(ele) {
ele.scrollIntoView();
//console.log;
});

Answer 2

JS的想法不是"搜索事件"，而是使用init脚本中的循环绑定按钮和目的地。然后你所需要做的就是用一个属性定义一个按钮的目标，JS会自动处理剩下的

因此，您可能希望使scrollIntoView()成为一个全局函数，并让它接受您希望滚动到的元素作为参数，就像这样。

function scrollIntoView(target) {
// Scroll code here
}

有关滚动代码示例，请参阅此处

Edit：somethinghere指出，scrollIntoView((实际上是本机支持的，因此不再需要编写自己的函数。

假设您的DOM中有3个按钮和3个目的地(为了清晰起见，我将使用button代替a(：

<button class="button_type_a" type="button">Scroll to destination A</button>
<button class="button_type_a" type="button">Scroll to destination B</button>
<button class="button_type_k" type="button">Scroll to destination C</button>
...
<div id="dest_A">Destination A</div>
<div id="dest_B">Destination B</div>
<div id="dest_C">Destination C</div>

首先准备按钮：

1. 添加任意类(goto_button(以指示按钮的预期操作
2. 添加任意属性(target(以指示它们各自的目的地

类似这样的东西：

<button class="button_type_a goto_button" type="button" target="dest_A">Scroll to destination A</button>
<button class="button_type_a goto_button" type="button" target="dest_B">Scroll to destination B</button>
<button class="button_type_k goto_button" type="button" target="dest_C">Scroll to destination C</button>

其中CCD_ 6的值是目的地的CCD_。

然后在你的JS中，首先找到你所有的按钮：

var gotoButtons = document.getElementsByClassName("goto_button");

然后循环浏览您的按钮，针对每一个按钮搜索并绑定到其目的地：

for (let btn of gotoButtons) {
let target = btn.getAttribute("target");
let destination = document.getElementById(target);
btn.addEventListener("click", () => {
destination.scrollIntoView();
});
}

将这个JS作为页面的init脚本加载，您应该已经做好了准备。