Question

在hyperapp代码库中，我们能够看到这一行：

https://github.com/hyperapp/hyperapp/blob/master/src/app.js#L135

显示：

  try {
    element[name] = value
  } catch (_) {}

显然，element是一个HTMLElement而value是一个函数！这里有趣的部分是，如果说name例如onclick而value是一个向控制台输出内容的函数，则上面的代码正确地为{{添加了事件监听器1}}。

我想知道这是onclick的短手还是我错了？

Answer 1

我想知道这是否是addEventListener ...
的简写

没有。这是早期的DOM0风格事件处理。如果您将函数分配给element.onclick或element.onmouseover等，则会将该函数设置为事件处理程序。

addEventListener的不同之处在于，只有一个功能可以这样设置;如果你第二次使用第二个函数，它将替换第一个函数。相比之下，addEventListener可以用来与其他人很好地玩，允许多个处理程序。

（另一个区别是onxyz样式适用于旧IE，它不支持addEventListener [但确实支持其仅限Microsoft的前任attachEvent]。 -browser代码经常使用onxyz样式，如果没有必要与其他人一起玩.FWIW，如果你仍然需要在他们破碎的“兼容模式”中支持IE8或IE9-IE11，你可以使用{ {1}} {{}}}中的{1}}功能，如果可能，使用hookEvent或addEventListener。）

Answer 2

是#!/usr/bin/perl use strict; use warnings; use Email::Sender::Simple qw(sendmail); use Email::Sender::Transport::SMTPS; use Email::Simple (); use Email::Simple::Creator (); my $smtpserver = 'smtp.gmail.com'; my $smtpport = 587; my $smtpuser = 'myuser@gmail.com'; my $smtppassword = 'myuser@gmail.com password'; my $transport = Email::Sender::Transport::SMTPS->new( { host => $smtpserver, ssl => 'starttls', port => $smtpport, sasl_username => $smtpuser, sasl_password => $smtppassword, debug => 1, } ); my $email = Email::Simple->create( header => [ To => 'xxxxx@gmail.com', From => 'myuser@gmail.com', Subject => 'Hi!', ], body => "This is my message\n", ); sendmail( $email, { transport => $transport } );的简写，但有一个主要缺点：你只能有一个处理程序。

addEventListener

function firstHandler() {
  console.log('#1');
}

function secondHandler() {
  console.log('#2');
}

let onclickEl = document.getElementById('onclick');
let addEventListenerEl = document.getElementById('addEventListener');

// We can bind multiple event handlers using addEventListener
addEventListenerEl.addEventListener('click', firstHandler);
addEventListenerEl.addEventListener('click', secondHandler);

// But watch what happens when we do the same with onclick
onclickEl.onclick = firstHandler;
onclickEl.onclick = secondHandler;

出于这个原因，在您自己的代码中，我建议始终使用<button id="addEventListener">addEventListener</button> <button id="onclick">onclick</button>。

[]如何附加事件监听器？

2 个答案: