Question

内联回调JS语法如下：

<h3 id="h3style" onMouseOver="changeColor();">     
      Rollover
</h3>

内部回调JS语法如下：

<script>
     document.getElementById('h3style').onMouseOver = changeColor;
     function changeColor(){ } 
</script>

我知道第一种语法是由浏览器引擎评估的，第二种语法是由JS引擎评估的。

但是，为什么html属性onMouseOver具有值作为函数调用（带括号）不像第二种方法？为什么不允许使用html属性语法（onMouseOver="changeColor;"）？

注意：很难记住两种不同的语法

Answer 1

让我们先看一下纯粹的js版本。

document.getElementById('h3style').onMouseOver = changeColor;
function changeColor(){ }

现在在这种情况下，分配一个功能是你唯一能做的事情。你可以明显地分配一些奇怪的东西，比如一个值，但这只是代码什么都不做（甚至没有错误）。关键是你不能分配一个变量＆＃34;一些javascript＆＃34;要完成，你只能创建一个包含＆＃34;一些javascript＆＃34;的函数。换句话说，你不能这样做：

elem.onMouseOver = 'changeColor();'; // technically legal but does nothing (just assigns a string)

然而，javascript确实有eval()能够执行javascript的字符串版本。例如：

eval('changeColor();');

现在到了DOM。当您为属性分配内容时，右侧的东西是一个字符串（不是实际的javascript）。因为它是一个字符串，所以在幕后，系统只能执行eval()。

之类的操作

主要的观点是，在html的情况下，你在属性中写的东西是不是 javascript，而只是一个字符串。在运行时进行评估并转换为javascript的字符串。

还要回答你的最后一个问题：＆＃34;为什么不允许使用html属性syntax(onMouseOver="changeColor;")？＆＃34;，从技术上讲，它是允许的。但是它相当于在javascript中执行此操作：

onMouseOver = function(){
    eval('changeColor;');
}

显然没有做很多事情。

Answer 2

在第一种情况下，回调变为：

function onmouseover(event) {
  changeColor();
}

与第二种情况相比，回调只是changeColor

以下是一个例子：

<html>
<body>

<h3 id="test1" onClick="test1();">
      test1
</h3>

<h3 id="test2">
      test2
</h3>

<script>
  function test1() {
    console.log('test1');
  }

  function test2() {
    console.log('test2');
  }

  document.getElementById('test2').onclick = test2;

  console.log(document.getElementById('test1').onclick);
  console.log(document.getElementById('test2').onclick);
</script>

</body>
</html>

Answer 3

有两种event handlers（不要与event listeners混淆）。

Event handler IDL attributes

您可以通过为该属性（也称为IDL属性）分配函数引用来在JS中设置它们，例如
```
myelement.onmyevent = myfunction;
```
请注意，属性名称是小写的。

指定的函数函数将用作事件处理程序。调度事件时，将像往常一样为JS函数调用该函数，将事件作为第一个参数传递，将当前事件目标作为this值传递。
Event handler content attributes

您可以通过setAttribute在HTML或JS中设置它们。对于任何属性，其值必须是字符串。
```
myelement.setAttribute("onMyEvent", "some code here");
```
注意HTML属性不区分大小写。

事件处理程序将是internal raw uncompiled handler，由属性的新值和属性设置为此值的脚本位置组成。

调度事件时，浏览器将get the current value of the event handler。总结一下，这意味着：
1. 该字符串将被解析，就好像它是一个函数体
2. 该函数的范围将是全局范围，由文档，表单所有者（如果有）和元素（如果有）遮蔽。

TL; DR ：使用事件处理程序IDL属性，您必须分配一个函数引用，浏览器将为您调用它。使用事件处理程序内容属性，您必须分配一个字符串，浏览器将把它包装在一个函数中并为您调用它。

内联JS回调语法Vs内部JS回调语法

3 个答案: