javascript - dom 事件为什么这样写呢？

Question

因为我要判断浏览器监听的兼容性，所以写的下边这个

element["on"+type]=handler;

我的理解是，这个式子得到的是下边这样的句式

element[onclick]=function(){};

但是实际我是想要的是(我认为这样才是对的)

element.onclick=function(){}

问题：为什么他要用[]号，而不用.()来将里边的内容包住呢？？这个是哪一块的知识呢？？

Answer 1

JavaScript为属性访问定义了两种语法：

expression.identifier  // 表达式指定对象，标识符指定需要访问的属性的名称
expression[expression] // 这种方法适用于对象和数组，[]内的表达式指定要访问的属性的名称或者代表要访问数组元素的索引

.identifier的写法只适用于要访问的属性名称是合法的标识符，并且需要知道要访问的属性的名字。
当属性名是通过运算得出的值而不是固定的值的时候，必须使用方括号写法。
（摘自《JavaScript权威指南》4.4节-属性访问表达式）

element["on"+type]=handler;//这里的type是个字符串，所以此属性是字符串拼接而成，是通过运算得出的，所以访问此属性只能用方括号写法。 

当事件类型（如click事件）是确定的时候，你可以直接这样注册: element["onclick"]=handler;(题主的代码少了引号)或者element.onclick=handler;

Answer 2

element["on"+type]=handler; 不是 element[onclick]=function(){}; 而是 element['onclick']=function(){}; 就是 element.onclick=function(){}; 就是你想要的

Answer 3

歪楼。这个回答对问题没有任何作用，只是由on想到的。
对于事件监听的封装。

var Event = {
    addHandler: function (oElement, sEvent, fnHandler) {
        oElement.addEventListener ? oElement.addEventListener(sEvent, fnHandler, false) : oElement.attachEvent("on" + sEvent, fnHandler)    
    }
}