JavaScript中的事件处理(一)

JavaScript事件处理的机制原理，是在阅读《JavaScript高级程序设计(第2版)》第12章事件时得到的思考。

在事件处理程序中this指向的问题是本人比较纠结的。this 知识最初是从《PPK 谈 this 关键字》中学习到的。在我最开始接触 JavaScript 时，是传统事件注册(Traditional event registration)：

var btn=document.getElementById('loginBtn');
btn.onclick=function(){
    alert(this.id);
}

HTMLElement 类型的对象 btn 一个“on+事件名”的属性，赋给它的这个匿名函数表达式中this指向了btn。为什么this指向btn？

下面是一般普通赋了匿名函数表达式的属性：

var btn=document.getElementById('loginBtn');
btn.evtHandler =function(){
    alert(this.id);
}
btn.evtHandler();

事件(上面是click)有意思之处是：不用把调用的代码编写在程序中而却像在执行了函数 evtHandler 它自己一样。

在《PPK谈JS》的事件中强调的传统事件处理必须不带括号，就是这个原因：

function() handlerFn{
    alert(this.id);
}
btn.onclick = handlerFn;