元素的内联事件处理函数的特殊作用域在各浏览

无。

问题描述

在一个元素的属性中绑定事件,实际上就创建了一个内联事件处理函数(如<h1...>...</h1>),内联事件处理函数有其特殊的作用域链,并且各浏览器的实现细节也有差异。

造成的影响

如果在元素的内联事件处理函数中使用的变量或调用的方法不当,将导致脚本运行出错。

受影响的浏览器 所有浏览器  
问题分析 1. 内联事件处理函数的作用域链

与其他函数不同,内联事件处理函数的作用域链从头部开始依次是:调用对象、该元素的 DOM 对象、该元素所属 FORM 的 DOM 对象(如果有)、document 对象、window 对象(全局对象)。

如以下代码:

<form action="." method="get"> <input type="button" value="compatMode"> </form>

相当于1:

<form action="." method="get"> <input type="button" value="compatMode"> </form> <script> document.getElementsByTagName("input")[0].onclick=function(){ with(document){ with(this2.form)3{ with(this2){ alert(compatMode); } } } } </script>

以上两种写法的代码在所有浏览器中都将弹出 document.compatMode 的值。

将上述代码中的 'compatMode' 替换为 'method',则在各浏览器中都将弹出 'get',即 INPUT 元素所在表单对象的 method 属性值。

注:
1. 这段代码仅为说明问题而模拟各浏览器的行为,并非表示所有浏览器都是如此实现的。
2. 是使用 this 关键字还是直接使用这个 DOM 对象,在各浏览器中有差异,详情请看本文 2.1 中的内容。
3. 是否添加 FORM 对象到作用域链中,各浏览器在实现上也有差异,详情请看本文 2.2 中的内容。

2. 内联事件处理函数的作用域链在各浏览器中的差异

参考 WebKit 的源码:

void V8LazyEventListener::prepareListenerObject(ScriptExecutionContext* context) { if (hasExistingListenerObject()) return; v8::HandleScope handleScope; V8Proxy* proxy = V8Proxy::retrieve(context); if (!proxy) return; // Use the outer scope to hold context. v8::Local<v8::Context> v8Context = worldContext().adjustedContext(proxy); // Bail out if we cannot get the context. if (v8Context.IsEmpty()) return; v8::Context::Scope scope(v8Context); // FIXME: cache the wrapper function. // Nodes other than the document object, when executing inline event handlers push document, form, and the target node on the scope chain. // We do this by using 'with' statement. // See chrome/fast/forms/form-action.html // chrome/fast/forms/selected-index-value.html // base/fast/overflow/onscroll-layer-self-destruct.html // // Don't use new lines so that lines in the modified handler // have the same numbers as in the original code. String code = "(function (evt) {" \ "with (this.ownerDocument ? this.ownerDocument : {}) {" \ "with (this.form ? this.form : {}) {" \ "with (this) {" \ "return (function(evt){"; code.append(m_code); // Insert '\n' otherwise //-style comments could break the handler. code.append( "\n}).call(this, evt);}}}})"); v8::Handle<v8::String> codeExternalString = v8ExternalString(code); v8::Handle<v8::Script> script = V8Proxy::compileScript(codeExternalString, m_sourceURL, m_lineNumber); if (!script.IsEmpty()) { v8::Local<v8::Value> value = proxy->runScript(script, false); if (!value.IsEmpty()) { ASSERT(value->IsFunction()); v8::Local<v8::Function> wrappedFunction = v8::Local<v8::Function>::Cast(value); // Change the toString function on the wrapper function to avoid it // returning the source for the actual wrapper function. Instead it // returns source for a clean wrapper function with the event // argument wrapping the event source code. The reason for this is // that some web sites use toString on event functions and eval the // source returned (sometimes a RegExp is applied as well) for some // other use. That fails miserably if the actual wrapper source is // returned. DEFINE_STATIC_LOCAL(v8::Persistent<v8::FunctionTemplate>, toStringTemplate, ()); if (toStringTemplate.IsEmpty()) toStringTemplate = v8::Persistent<v8::FunctionTemplate>::New(v8::FunctionTemplate::New(V8LazyEventListenerToString)); v8::Local<v8::Function> toStringFunction; if (!toStringTemplate.IsEmpty()) toStringFunction = toStringTemplate->GetFunction(); if (!toStringFunction.IsEmpty()) { String toStringResult = "function "; toStringResult.append(m_functionName); toStringResult.append("("); toStringResult.append(m_isSVGEvent ? "evt" : "event"); toStringResult.append(") {\n "); toStringResult.append(m_code); toStringResult.append("\n}"); wrappedFunction->SetHiddenValue(V8HiddenPropertyName::toStringString(), v8ExternalString(toStringResult)); wrappedFunction->Set(v8::String::New("toString"), toStringFunction); } wrappedFunction->SetName(v8::String::New(fromWebCoreString(m_functionName), m_functionName.length())); setListenerObject(wrappedFunction); } } }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdfxyz.html