在 javascript 中向元素添加多个事件监听器

2024-05-03

我已经设置并运行了一个小型拖放操作,但它使用内联 JavaScript,我更愿意将其全部移动到外部文件中。从理论上讲,这是一个简单的交换,但我在检查器中收到了引用错误,并且我的缩小失败了。

据我所知,问题出在return.

原始 HTML

<section id="titles" ondrop="dropClip(this, event)" ondragenter="return false" ondragover="return false"></section>

所需的 HTML

<section id="titles"></section>

JavaScript

var titles = document.getElementById('titles');

titles
    .addEventListener('drop', dropClip(this, event))
    .addEventListener('dragenter', return false)
    .addEventListener('dragover', return false);

Javascript 是一种函数是“一流对象”的语言。这意味着,可能与您可能使用过的其他编程语言相反,您可以像对待任何其他对象一样对待函数:您可以传递它,您可以返回它,您可以拥有一个内部有一个函数的函数里面的函数等等。

这样做的结果可能是在 Javascript 中取得成功需要一种非常意想不到的编程风格。在其他语言中,UI 事件绑定以多种方式发生(例如 C# 的Button1.Click += new System.EventHandler(this.myEventHandler);,或经典 VB 的Button_Click())。在 C# 中,您可以传递委托,委托是具有专门定义的一组参数和返回值的特殊对象,可以将函数绑定到该委托。但所有这些在 javascript 中都消失了,因为你可以简单地将函数附加到属性上directly。对于浏览器 DOM 事件处理,假定属性是函数引用,并且在该事件的本机事件处理代码期间,它调用附加到与事件同名的属性的函数。

好吧,你说,我们有函数。我们可以传递它们并像对待变量一样对待它们。怎么办?

首先,请特别注意以下两个函数声明:完全相同的。它们产生完全相同的结果,声明一个名为myfun在当前范围内(在浏览器中,window对象或当前正在运行的函数)。

function myfun(param1, param2) {
   //do some stuff
};

var myfun = function (param1, param2) {
   //do some stuff
};

(实际上,第一个最终会是name第二个不会的属性,可能还有其他一些细微的差异,但就所有实际意图和目的而言,它们是相同的).

第一个只是第二个的快捷方式。基本上,您创建一个函数(可能有名称,也可能没有名称)并将其分配给一个变量。程序员使用方便的快捷方式将结果称为“myfun函数”,但实际上情况是“myfun变量——它现在包含一个特定的函数”。

您可以通过将同一函数分配给其他变量来获得对同一函数的多个引用(这是一个真正的对象):

function myfun(param1, param2) {
   //do some stuff
};

var a = myfun, b = myfun, c = myfun;

a(); // runs `myfun`
b(); // runs `myfun`
c(); // runs `myfun`

接下来要注意的是,要调用函数,必须在其名称后使用括号,并且任何参数都位于括号内。

var result = myfun('a', 1); // invoke the `myfun` function
   // and store its return value in variable `result`

但回顾一下我们的赋值语句的制作a, b, and c都是别名myfun函数:在这些情况下我们没有使用括号,因为——这才是真正重要的地方,所以要注意:

To invoke函数(并获取函数的返回值),在其名称后使用括号。

传递一个函数参考,不要使用括号。

如果我们这样做会怎样:

var a = myfun(), b = myfun(), c = myfun();

a, b, and c将不再是指向myfun功能。他们都会是result of myfun并且会包含任何内容myfun返回——或者undefined如果它没有返回任何东西。如果您尝试调用其中之一,请说a()你会得到一些类似于以下内容的错误:

> TypeError: a is not a function

现在我已经画好了所有的背景,有一件简单的事情需要知道,它将让你走上成功的轨道addEventListener:它需要一个函数作为第二个参数。在示例代码中,您放置了要在 addEventListener 调用它们时运行的函数的内容,但没有放置实际的函数。

您可以通过首先实际声明函数来解决这个问题,例如:

function doNothing() {
   return false;
}

titles.addEventListener('dragenter', doNothing);
   // Note: this is not invocation like `doNothing()`, but passing a reference

或者,您可以简单地将函数语句包装到匿名函数。请记住,JavaScript 中的函数实际上没有名称,我们只有包含函数的变量。匿名函数是根本没有名称的函数,它可以通过隐式名称分配(例如作为参数传递——其中它将具有参数的名称)来调用,也可以通过执行魔术调用来直接调用在其后面加上括号的操作。

那看起来像这样:

titles.addEventListener('dragenter', function () { // anonymous function
    return false;
});

如果你想调用一个匿名函数,你必须让 javascript 知道你想把它当作一个值,而不是在当前作用域中创建命名函数的普通快捷方法(其中function myfun被视为var myfun = function)。这是通过将整个内容包裹在另一组括号中来完成的,如下所示:

(function () { // begin a function value containing an anonymous function
    // do something
}()); //invoke it, and close the function value

我希望这可以帮助您更多地了解 javascript、为什么您的代码无法工作以及需要做什么才能使其工作。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 javascript 中向元素添加多个事件监听器 的相关文章

随机推荐