{{JS}}事件句柄

１.作为HTML属性的事件句柄
事件句柄被设置为js代码（在原始事件模型中），作为HTML的属性值。

２.事件句柄的返回值
在多数情况下，事件句柄（无论是HTML属性设置的，还是JS属性设置的）都使用它的返回值说明事件的处理方法。通常若浏览器执行了某种默认动作来响应一个事件，那么可以返回false阻止浏览器执行那个动作。通过返回false阻止执行默认动作的事件句柄包括onsubmit,onclick,onkeydown,onkeypress,onmousedown,onmouseup,onreset。
注：关于返回false的规则有一个例外，即当用户把鼠标移到一个超链接或图像上时，浏览器的默认动作是在状态样上显示链接的URL。要阻止这种情况发生可以让onmouseover事件句柄返回false。如下
<a href="help.html" onmouseover="window.status='Help!';return true;">Help</a>
这个例外的产生是没有任何原因的.大多数浏览器认为隐藏链接的目标的能力是一个安全漏洞，并且关闭了这一功能。

3.事件句柄和this关键字
无论是用HTML属性定义事件句柄，还是用JS属性定义事件句柄，都是把一个函数赋予文档元素的一个属性。即是在定义文档元素的一个新方法。在事件句柄被调用时，它是作为产生事件的元素的方法调用的，故this关键字引用了那个目标元素。

4.事件句柄的作用域
在把一个HTML属性的值设置为JS字符串，以便定义事件句柄时，隐式地定义一个函数。以这种方式定义的事件处理函数的作用域与常规方法定义的全局函数不同。这意味着定义为HTML属性的事件句柄，它所执行的作用域和其它函数的作用域不同。
定义为HTML属性的事件句柄具有复杂的作用域链。它们的作用域链的头是调用对象（call object），但是事件句柄的作用域中的下一个对象却并不是全局对象，而是触发事件句柄的对象。如假定使用<input>标记在HTML表单中定义了一个Button对象，然后使用onclick属性定义了一个事件句柄。如果该事件句柄的代码使用了一个名为form的变量，那么该变量就会被解析为Button对象的form属性。

理解事件句柄的扩展的作用域的另一种方式是，考虑把HTML事件句柄属性的JS文本翻译成一个JS函数，如下
<input id="b3" type="button" value="3" onclick="alert(b4.value);" />
对等的JS代码可能如下所示：
var b3 = document.getElementById("b3");
b3.onclick = function() {
with(document) {
with(this.form) {
with(this) {
alert(b4.value);
}
}
}
}
重复的with语句创建了一个扩展的作用域链。

事件句柄的作用域中有目标对象非常方便，但包括其它文档元素的扩展作用域却非常麻烦。例如，Window对象和Document对象都定义了名为open()的方法。如果没有限定条件，只用标识符open，那么引用的几乎总是window.open()方法。但在定义为HTML属性的事件句柄中，Document对象在作用域中先于Window对象，所以用open引用的是document.open()方法；同样，若给一个Form对象添加一个名为window的属性或name="window"定义的一个输入元素，则在事件句柄中调用window会指向该属性或name="window"的输入元素，而不是全局的Window对象。

所以在定义作为HTML属性的事件句柄时，一定要小心。最安全的方法是，使这种句柄尽量简单。理想的方法是，让它们只调用在别的地方定义的全局函数，尽量避免长作用域链带来的麻烦。

最后，请记住，关于事件句柄作用域的完整讨论只适用于定义为HTML属性的事性句柄。如果把一个函数赋予适当的JS事件句柄属性来设置事件句柄，那么根本不涉及特殊的作用域链，函数在定义它的作用域中执行。

注：分享Ubuntu下iBus中五笔输入法切换中英文符号的快捷键：Ctrl+.