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

内部回调JS语法如下：

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

我明白，第一个语法是由浏览器引擎进行评估第二个语法由JS引擎评估。

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

注：这是很难记住，两个不同的语法

来源

2015-12-15 overexchange

让我们先看看纯js版本。

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

现在在这种情况下，分配一个函数是唯一能够做的事情。你可以明确地指定一些奇怪的东西，像是一个值，但这相当于代码无所作为（甚至没有错误）。重点是你不能指定一个变量“一些JavaScript”来完成，你只能创建一个包含“一些JavaScript”的函数。但是JavaScript本身具有eval()这是能够执行JavaScript字符串版本

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

：换句话说，你不能做到这一点。例如：

eval('changeColor();');

所以，现在的DOM。当你给某个属性赋值时，右边的是一个字符串（不是真正的javascript）。因为它是一个字符串，幕后系统只能做类似eval()的事情。

主要的问题是，在html的情况下，你写属性内的东西是而不是 JavaScript，而只是一个字符串。在运行时获取并转换为javascript的字符串。

而且回答你最后一个问题：“为什么？HTML属性syntax(onMouseOver="changeColor;")是不允许的”，以及在技术上它是允许的。但它等效于在javascript中执行此操作：

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

这显然不能完成很多操作。

来源

2015-12-15 00:36:26

在第一种情况下的回调变成这样：

function onmouseover(event) { 
    changeColor(); 
}

VS第二种情况下，回调只是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>

来源

2015-12-15 00:36:18

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属性必须指定一个函数引用，浏览器将调用它。使用事件处理程序内容属性，您必须分配一个字符串，浏览器将其包装在一个函数中，并会为您调用它。

来源

2015-12-15 01:13:36 Oriol

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

回答

相关问题