Question

以下是供参考的代码：https://jsfiddle.net/x0k5dx8w/8/

根据我的理解：事件处理程序（例如; addEventListener）将事件对象传递给调用函数的参数。

(eg; document.getElementbyId("idname").addEventListener("click", function(eventobj),

非常重要

document.getElementbyId("id").addEventListener("click", function(idname));

现在我对两件事情感到困惑，没有给你的事件函数参数一个名字与给它一个名字之间的区别是什么？

最后，为什么你做不到：

function eventFunc() {
    var object1 = document.getElementById("object1");
    if( object1.target =..... ) {
        // do something
    }
}

Answer 1

您发布的语法不是很有效。让我们来看看如何处理一个事件。

event handler是一个以Event对象作为参数的函数：

function handleClick(event) {
  let elementClicked = event.target;
  console.log('You clicked', elementClicked);
}

Event有几个有用的属性和方法。 target是最常访问的，但preventDefault()和stopPropagation()也很重要。

要将侦听器附加到元素，请使用addEventListener：

let someElement = document.querySelector('button')
someElement.addEventListener('click', handleClick)

要删除它，请使用removeEventListener，将传递给addEventListener 的相同函数对象（不是复制，包装或内联函数：SAME函数对象）：< / p>

someElement.removeEventListener('click', handleClick)

为了将来参考，请查看Mozilla的MDN（此答案中的所有链接都来自），这是一个很棒的资源。

干杯！

Answer 2

这样的函数中的第一个变量是＆＃34;事件对象＆＃34; whcih不是事件发生的对象，而是与发生的事件相关的数据集合。

示例：

功能（事件）{ 执行console.log（event.target） }

如果你绑定这个事件来说，点击一个div，事件＆＃39;事件＆＃39;是发生的点击以及与之相关的任何数据。

event.target将列出所有被点击的内容（div，divs父级，正文，文档）

或event.preventDefault（）将停止与事件关联的所有默认操作（例如，链接点击转到其他页面）

Answer 3

我认为你误解了一些事情。

document.getElementbyId("idname").addEventListener("click", function(eventobj)

与

不一样

document.getElementbyId("id").addEventListener("click", function(idname));

添加事件侦听器时，它会在引发时返回事件类型，而不是原始对象。此事件类型包含有关原始对象的一些信息，但也有许多其他属性。

您可以在此处获取有关活动类型的更多信息：Events

1º设置参数之间没有区别。当您需要有关事件的信息时，您可以将参数传递给函数以获取该信息（例如，了解如何触发事件），但如果您不需要任何信息，则可以避免它（例如显示警报）单击按钮时出现错误信息。

2º你不能这样做，因为object1没有属性“target”。该属性来自事件类型。

希望它可以帮到你

Answer 4

我认为你在DOM元素（＆＃34; idname＆＃34;）和事件对象之间感到困惑。

您的陈述

document.getElementbyId("idname").addEventListener("click", function(eventobj)

非常重要

document.getElementbyId("id").addEventListener("click", function(idname));

至少有两个错误：

1）＆＃34; document.getElementbyId（＆＃34; idname＆＃34;）＆＃34;与＆＃34; document.getElementbyId（＆＃34; id＆＃34;）＆＃34;不同。＆＃34; ID＆＃34;和＆＃34; idname＆＃34;是两个不同的ID。它们不能代表相同的元素。

2）＆＃34; .addEventListener（＆＃34;点击＆＃34;，功能（idname））＆＃34;。 Idname（即DOM元素）不会传递给函数。 Event对象被传递给函数。

同样，您无法提出

的建议

function eventFunc(){
var object1 = document.getElementById("object1");
if(object1.target =.....)
//do something
}

因为＆＃34;对象＆＃34;是一个DOM元素，而不是一个事件对象。

在此处查看事件模型的工作示例： https://jsfiddle.net/obqmazzs/3/

另请参阅http://www.w3schools.com/jsref/dom_obj_event.asp

上的一些相当全面的文档

我对事件函数中的参数感到困惑

4 个答案: