“此" HTML属性的内部事件处理程序 [英] "this" inside event handler from HTML attribute
问题描述
我以为我会理解"this"关键字，直到看到以下代码:
I thought I understood wel the "this" keyword until I saw this code :
<body>
<button onclick="go()">clic1</button>
<button id="btn">clic2</button>
<script>
function go() {
console.log(this);
}
var btn = document.getElementById("btn");
btn.onclick = function() {
console.log(this)
}
</script>
</body>
我有一个带有两个按钮的HTML文档，这些按钮在单击时执行相同的操作:它们记录了"this"关键字.
I have a HTML document with two buttons that do the same thing when clicked :they log the "this" keyword.
我很惊讶他们没有显示出相同的结果:
I'm very surprised they don't show the same result :
对于"clic1"按钮:this = Window
For the button "clic1" : this = Window
对于按钮"clic2":这= ID为"btn"的按钮对象
For the button "clic2" : this = the button object with id "btn"
对此有什么解释吗?
谢谢
推荐答案
TLDR:
go是不是第一个按钮的事件处理程序.事件处理程序是由HTML解析器生成的匿名函数.在该示例中，生成的处理程序恰好在调用 go.
TLDR:
go is not the event handler of the first button. The event handler is an anonymous function generated by the HTML parser. In the example, the generated handler just happens to call go.
JavaScript代码被编译为表单功能
JavaScript code provided in HTML for an onEventName attribute is compiled into a function of form
function(event) {
// code written in the attribute value
}
解析器以这种方式生成的
函数具有相当奇怪的作用域链，其中包括生成的处理程序是其属性的元素，该元素所在的任何外部 form 元素，和 document 对象.范围链的原因可以追溯到DOM标准化之前.较旧的IE版本提供了window.event而不是event参数.
Functions generated by the parser in this way have a rather strange scope chain which includes the element the generated handler is a property of, any outer form element the element is within, and the document object, at least. Reasons for the scope chain date back to before the DOM was standardized. Older IE releases provided window.event instead of the event parameter.
第一个按钮
<button onclick="go()">clic1</button>
在当前浏览器中
生成按钮的onclick处理程序为:
in current browsers generates the button's onclick handler as:
function( event) {
go()
}
- onclick处理程序是采用
event参数的函数.通过按钮的this值调用它. -
go是普通的函数调用-调用者的this值尚未应用.例如，您可以通过调用go(this)来传递this作为参数. -
go是使用function关键字声明的，默认情况下具有全局对象的this值. - the onclick handler is the function taking the
eventparameter. It is called with athisvalue of the button. gois an ordinary function call - thethisvalue of the caller has not been applied. You could, say, pass onthisas a parameter by callinggo(this)if you wanted to.gowas declared using thefunctionkeyword and by default has athisvalue of the global object.-
使用按钮作为其
this值调用附加函数，该值可以记录到控制台. the attached function is called with the button as its
thisvalue which can be logged to the console.
在第二个示例中，您正常地编译了一个匿名函数表达式(不使用HTML解析器)，并将其直接附加到第二个按钮元素上.
In the second example, you compile an anonymous function expression normally (not using the HTML parser) and attach it directly to the second button element.`
附加函数没有wierdo范围链.
the attached function does not have a wierdo scope chain.
这篇关于“此" HTML属性的内部事件处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
