Javascript 如何将事件对象添加到回调函数？_Javascript

Javascript 如何将事件对象添加到回调函数？

javascript

Javascript 如何将事件对象添加到回调函数？,javascript,Javascript,添加事件处理程序非常简单现在我想禁止默认行为，例如在触摸文本一段时间时突出显示文本我找到了默认方法。但是，我不知道如何向myFunction <!DOCTYPE html> <html> <body> <h1>Event Handling</h1> <p ontouchstart="myFunction(true)" ontouchend="myFunction(false)">T

添加事件处理程序非常简单

现在我想禁止默认行为，例如在触摸文本一段时间时突出显示文本

我找到了默认方法。但是，我不知道如何向

myFunction

<!DOCTYPE html>
<html>
<body>
<h1>Event Handling</h1>
<p ontouchstart="myFunction(true)" ontouchend="myFunction(false)">Touch this! </p>
<p id="demo">demo</p>

<script>
function myFunction(state) {
  document.getElementById("demo").innerHTML = (state? "Hello World": " ");
  event.preventDefault();  // how to get access to the event object ?
}
</script>

</body>
</html>


事件处理
点击此按钮
演示
函数myFunction（状态）{
document.getElementById（“demo”）.innerHTML=（状态为“Hello World”：“”）；
event.preventDefault（）；//如何访问事件对象？
}

还是我在错误的搜索路径上

添加事件处理程序非常简单

是的。但是，你是在用25岁以上的传统方式做这件事

当您使用旧式内联事件属性（如

onXyz

）时，

事件

对象不会自动传递给回调

相反，使用现代的事件处理方法，并在JavaScript中单独使用。然后，

事件

对象引用将自动作为第一个参数传递给回调函数

现在，由于您希望将自己的参数传递给回调函数，因此需要将实际回调函数封装在一个匿名函数中，该函数将是“正式”事件处理程序，并且该函数将接收

事件

参数。然后，在该包装器中，您可以调用所需的函数并传递事件以及自定义参数

由于并非所有设备都支持触摸事件，因此在使用之前，您需要检查设备是否支持触摸事件。下面，我已经做了一个基本的功能检测检查，但更全面的方法

此外，您可能还希望防止事件冒泡到可能也注册了事件处理程序的祖先元素。如果是，您还应该添加

此外，您应该尽可能（几乎总是）避免，因为这会影响性能和安全性。由于您实际上没有获取或设置任何HTML，请使用


事件处理
触摸这个
演示
//只获取一次DOM引用，而不是每次函数运行时
const touchP=document.querySelector（“.touch”）；
const demo=document.getElementById（“demo”）；
//并非所有设备都支持触摸事件，您应该首先检查。
如果（touchP.touchstart）{
//已注册的回调函数将自动传递事件引用
touchP.addEventListener（“touchstart”，函数（事件）{
//现在可以调用所需的函数并传递事件和参数
myFunction（事件，true）；
});
touchP.addEventListener（“touchend”，函数（事件）{
myFunction（事件，false）
});
}否则{
demo.textContent=“此设备不支持触摸。”；
}
函数myFunction（事件、状态）{
event.preventDefault（）；
event.stopPropagation（）；//如果不希望事件冒泡
//如果state==false，您可能不希望返回空格字符。
//而是返回一个空字符串：“”
demo.textContent=状态为“Hello World”：“；
}

调用函数时，必须将事件传递给函数

<p ontouchstart="myFunction(event, true)" ontouchend="myFunction(event, false)">Touch this! </p>

function myFunction(event, state) {
  document.getElementById("demo").innerHTML = (state? "Hello World": " ");
  event.preventDefault();  // how to get access to the event object ?
}

点击此按钮

函数myFunction（事件、状态）{ document.getElementById（“demo”）.innerHTML=（状态为“Hello World”：“”）； event.preventDefault（）；//如何访问事件对象？ }

事件存在于事件声明中。

您在语句中忘记了一些单词。应该是“我认为今天不应该使用”。@kaladin_storm我没有。内联事件属性的使用会导致真正的问题，这一点首先可以从这个问题得到证明，并记录在我共享的链接中。而且，如果您阅读了该链接，您会发现另一个链接指向内联事件属性的文档，该文档明确指出。这不是一个观点。@kaladin_storm，自从它被发明以来，我一直在编码和教授所有这些。关于内联事件属性的普遍误解是，当您开始使用它们做简单的事情时，它们似乎工作得很好。然后，当您开始编写真正的生产代码时，您会发现它们会带来各种各样的问题。不幸的是，它们不会消失，因为浏览器不能因为遗留的原因停止支持它们，而大多数新手只是复制别人使用它们的代码，而没有真正了解它们是如何工作的（或不工作的）。这绝对是一个观点。如果大人物说不要用它。内联事件绝对没有错。@kaladin_storm绝对没有错，以我的经验（并表示尊重），数百万没有达到完全理解这一点的编码经验水平的开发人员都有你的观点。仅仅因为浏览器支持某些东西，并不意味着它是正确的。这是因为BOM和DOM的发展方式早在我们有标准之前。内联事件属性可以追溯到DOM级别0的时代（在标准DOM出现之前）。如果你不愿意听取权威人士的意见（MDN是JavaScript语言的管理者），那么很抱歉，谢谢，效果很好。（即使是在我的带触摸屏的笔记本电脑上，Scott的解决方案显示“

此设备不支持触摸”

”），我也尝试过这种方法（或类似的方法），但遇到的错误现在在新的测试设置中消失了。