为什么我的点击事件处理程序是（YES“is”）工作？

我知道这有点有趣，因为人们经常要求解决某些不起作用的解决方案，在这种情况下，情况恰恰相反。为什么我的点击事件处理程序是（YES“is”）工作？

我在玩JavaScript，发现了让我感到困惑的东西！我尝试过在线寻找帮助，但找不到任何有用的主题。

问题是这样的：在函数bar只调用一次后，onclick事件工作正常。这怎么可能！？

但是，当我问类型的变量x的返回undefined，而不是Number，这是正常的，因为x里面bar。

function bar() { 
    var p = document.getElementById("foo"); 
    p.onclick = showAlert; 
    var x = 5; 
    alert("bar function was called !"); 
    } 
    bar();

任何人都可以启发我究竟发生了什么，一个详细的解释将非常赞赏。

全码：（的jsfiddle链路：https://jsfiddle.net/ge4gj5nw）

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
     #foo { 
     border: solid blue 1px; 
     width: 30%; 
     padding: 10px; 
     } 
    </style> 
    </head> 
    <body> 
    <p id="foo">My Event Element</p> 
    <p>Click on the above element..</p> 
    </body> 
</html> 

<script> 
    function bar() { 
    var p = document.getElementById("foo"); 
    p.onclick = showAlert; 
    var x = 5; 
    alert("bar function was called !"); 
    } 
    bar(); 
    function showAlert(event) { 
    alert("onclick Event detected!"); 
    } 
</script>

来源

2017-09-13 Elight7

我不很明白你在这里问的问题。你在问为什么事件处理程序被调用？或者给定的范围如何在这里工作？或者你问为什么showAlert'可用？ – Nit

JavaScript是一种垃圾收集语言。变量或对象在未被使用时会被垃圾收集。这是通过查看该变量的执行上下文来完成的。 – liontass

JavaScript中有函数声明。 – acdcjunior

即使p被限制在条形函数的范围内getElementById将返回对DOM中的节点的引用（其范围较高）。通过调用p.onclick = showAlert;，您可以在该函数内改变onclick属性（更高范围）。

只调用一次函数“bar”后，“onclick”事件是工作得很好。这怎么可能？

它可能是因为调用bar突变了一个更高范围的对象。

var global = {specialKey: 'I am global scoped'} 

function testingFunctionScope() { 
    global.specialKey = 'Not function scoped!'; 
    console.log(global.specialKey); // Not function scoped! 
} 

testingFunctionScope(); 
console.log(global.specialKey); // Not function scoped!

来源

2017-09-13 21:00:25 Maxwelll

“这可能是因为调用bar变更了更高范围的对象。” 先生，您正在处理我正在寻找的内容:) 最后一个问题：变量“p”的范围是什么？（全球？） – Elight7

'p'只在'bar'范围内可用。这意味着p的值（由bar指定）将始终在'bar'之外引发一个参考错误。很高兴能够帮助！ – Maxwelll

“更高范围的对象”是否是鼠标点击事件？ – Elight7

当 '酒吧' 功能被调用时，它更新的 'p' 元素的onclick属性。该属性保持设置直到页面刷新，然后需要再次调用“bar”函数才能设置属性。链接的'onclick'属性的范围是页面的生命周期。这是页面的全局。

'x'是一个局部变量，其范围在声明时开始，在函数结束时结束。在函数外部，页面不知道变量'x'。

欲了解更多信息，查找全局变量与局部变量。

来源

2017-09-13 20:59:46

这就是所谓的“吊装”，并在你的例子是提升优先级，其功能是变量声明之前访问。我建议你阅读JavaScript中的提示。关于变量x，它是“闭包”。如果我正确理解你的问题，你试图从另一个函数调用变量“x”。

来源

2017-09-13 21:00:26 proti

onclick事件正在工作，因为在bar函数中设置了元素的onclick参数。

var p = document.getElementById("foo"); 
p.onclick = showAlert;

您可以将这两条线移动到条形函数之外，并获得相同的效果，而不必具有单独的功能。

var p = document.getElementById("foo"); 
p.onclick = showAlert; 

function showAlert(event) { 
    alert("onclick Event detected!"); 
}

这是您在脚本标记中需要的全部内容。

单击该元素时，将调用showAlert函数。

来源

2017-09-13 21:02:27 jptime

好吧，我想我知道你不明白，我准备了一小段代码来说明。使用p.onclick的地方并不重要，当函数被绑定到那里时，它将一直保留在DOM元素的整个生命周期中，或者直到解除绑定函数。检查： https://jsfiddle.net/52wq4gdv/1/ 我设置处理程序，并删除它们取决于按下按钮

// set vars globaly for ease of use. 
var p = document.getElementById("foo"); 
var buttonRemove = document.getElementById("remove-handler"); 
var buttonAdd = document.getElementById("add-handler"); 

function bar() { 
    p.onclick = showAlert; 
    buttonRemove.onclick = removeOnClick; 
    buttonAdd.onclick = addOnClick; 
    var x = 5; 
    alert("bar function was called !"); 
} 
bar(); 

function showAlert(event) { 
    alert("onclick Event detected!"); 
} 

function addOnClick(event) { 
    p.onclick = showAlert; 
} 

function removeOnClick(event) { 
    p.onclick = undefined; 
}

和HTML：

<button id="foo">My Event Element</button> 
<p>Click on the above element..</p> 
<button id="remove-handler"> 
    Remove on click handler 
</button> 
<button id="add-handler"> 
    Add back on click handler 
</button>

此URL应该清楚一些事情： https://www.w3schools.com/js/js_htmldom.asp

来源

2017-09-13 21:05:22 pegla

为什么我的点击事件处理程序是（YES“is”）工作？

回答

相关问题