JavaScript事件处理程序的分配方式如何影响其执行？请考虑下面的代码。 <!DOCTYPE html> <title>Question</title> <script> function report(handler, _this) { alert( "handler:\n" + handler + "\n" + "this: " + _this + "\n" + "event: " + event + "\n" ) } </script> <input type=button id=A value=A onclick="report(A.onclick, this)"> <script>function f() {report(B.onclick, this)}</script> <input type=button id=B value=B onclick="f()"> <input type=button id=C value=C> <script>C.onclick = function () {report(C.onclick, this)}</script> <!DOCTYPE html> <title>Answer</title> <script type=module>function f() {alert(1)}</script> <input type=button value=1 onclick=f()> <input type=button value=2 id=button> <script type=module>button.onclick = function () {alert(2)}</script>_Javascript_Eventhandler

JavaScript事件处理程序的分配方式如何影响其执行？请考虑下面的代码。 <!DOCTYPE html> <title>Question</title> <script> function report(handler, _this) { alert( "handler:\n" + handler + "\n" + "this: " + _this + "\n" + "event: " + event + "\n" ) } </script> <input type=button id=A value=A onclick="report(A.onclick, this)"> <script>function f() {report(B.onclick, this)}</script> <input type=button id=B value=B onclick="f()"> <input type=button id=C value=C> <script>C.onclick = function () {report(C.onclick, this)}</script> <!DOCTYPE html> <title>Answer</title> <script type=module>function f() {alert(1)}</script> <input type=button value=1 onclick=f()> <input type=button value=2 id=button> <script type=module>button.onclick = function () {alert(2)}</script>

javascript

JavaScript事件处理程序的分配方式如何影响其执行？请考虑下面的代码。 <!DOCTYPE html> <title>Question</title> <script> function report(handler, _this) { alert( "handler:\n" + handler + "\n" + "this: " + _this + "\n" + "event: " + event + "\n" ) } </script> <input type=button id=A value=A onclick="report(A.onclick, this)"> <script>function f() {report(B.onclick, this)}</script> <input type=button id=B value=B onclick="f()"> <input type=button id=C value=C> <script>C.onclick = function () {report(C.onclick, this)}</script> <!DOCTYPE html> <title>Answer</title> <script type=module>function f() {alert(1)}</script> <input type=button value=1 onclick=f()> <input type=button value=2 id=button> <script type=module>button.onclick = function () {alert(2)}</script>,javascript,eventhandler,Javascript,Eventhandler,通过单击按钮，我看到： A.onclick和B.onclick被包装在函数中 onclickevent{…}。在B.onclick中，这是窗口而不是一个按钮。还有其他考虑吗？还有另一个考虑。考虑下面的代码。 <!DOCTYPE html> <title>Question</title> <script> function report(handler, _this) { alert( "hand

通过单击按钮，我看到：

A.onclick和B.onclick被包装在函数中 onclickevent{…}。在B.onclick中，这是窗口而不是一个按钮。

还有其他考虑吗？

还有另一个考虑。考虑下面的代码。

<!DOCTYPE html>
<title>Question</title>
<script>
    function report(handler, _this) {
        alert(
            "handler:\n" + handler + "\n" +
            "this: " + _this + "\n" +
            "event: " + event + "\n"
        )
    }
</script>
<input type=button id=A value=A onclick="report(A.onclick, this)">
<script>function f() {report(B.onclick, this)}</script>
<input type=button id=B value=B onclick="f()">
<input type=button id=C value=C>
<script>C.onclick = function () {report(C.onclick, this)}</script>

<!DOCTYPE html>
<title>Answer</title>
<script type=module>function f() {alert(1)}</script>
<input type=button value=1 onclick=f()>
<input type=button value=2 id=button>
<script type=module>button.onclick = function () {alert(2)}</script>

对于值为1的按钮，在onclick中未定义f，因为f是在模块中定义的。因此，当事件处理程序必须执行模块中的代码（例如，使用导入的代码）时，必须在模块中分配事件处理程序。

当从on事件处理程序调用代码时，它的值设置为放置侦听器的DOM元素：

展示这个但是，请注意，只有外部代码以这种方式设置了它的值。在这种情况下，内部函数的this没有设置，因此它返回全局/窗口对象，即非严格模式下的默认对象，而这不是由调用设置的

在和中检查此项

显示内在的这一点另一个注意事项是使用addEventListener时

在中使用and和this检查事件侦听器

请注意，尽管匿名函数和箭头函数类似，但它们具有不同的此绑定。虽然匿名和所有传统JavaScript函数都创建自己的this绑定，但箭头函数继承包含上下文的this绑定

展示这个 const btn=document.getElementByIdmy_按钮 btn.addEventListenerclick，函数{ //这将是按钮控制台，logthis } btn.addEventListenerclick，=>{ //这将是一扇窗户控制台，logthis }

下面是我写的一篇关于的简单文章，但它没有提到事件处理程序。

在HTML中设置事件侦听器没有特别的好处。此外，它被认为是有害的，例如CSP禁止它

内联侦听器没有任何好处，相反，将事件侦听器添加到HTML元素是一种非常有缺陷的方法

执行上的差异

1属性代码中的这个值通过JavaScript绑定到元素。在名为function或任何全局变量的内联代码中，首先从元素中搜索。如果未找到通常情况下的函数，则内联侦听器将从元素的原型链中搜索该函数。如果未找到匹配的属性名称，则搜索将到达窗口，并运行调用的全局函数。但是，如果函数名与查找路径上的任何属性名冲突，则会触发错误或执行意外函数

内联侦听器如何查找包装表单的操作属性的示例，只需单击输入：

功能作用{ console.log“不是函数！？”； }

注意：由于JavaScript的作用域，在报告中定义了事件。您希望查看JavaScript中的事件循环。javascript中的所有事件都是异步的。因为它们是异步的，所以它们被窗口对象回调。研究javascript和事件循环中的异步操作以理解这个概念；可能f绑定到窗口是因为它是在脚本的顶层定义的。通常，事件中的回调函数绑定到触发事件的元素的对象。但是在B的例子中，回调函数被包装在一个函数中，并且它释放了它的上下文。这回答了你的问题吗？