Small test of event binding onclick && addEventListener_javascript skills

There should be corresponding functions in the development tools, so I tested it:
Premise: It is just a simple small test, and addEventListener is a standard binding function, which is not compatible with this in IE (the corresponding IE is attachEvent), so this time For testing, abandon IE first and use Firefox 5.0.1, Chrome 14.0, Opera 11.50
Test page:

Copy the code The code is as follows :

TEST1

TEST2

TEST3

页面效果如下截图：

 

测试代码中采用了三种最常见的事件绑定方法

FIREFOX:

1，Firefox 的 Firebug 中选中 test1 元素：

右侧 DOM 标签中选择显示所有属性：

在其中找到了 attributes 数组，如下：

这是因为 test1 元素的两个事件句柄直接写到了元素中，再往下的列表中找不到更多相关的信息，此种绑定模式下只能在 firebug 的 DOM 标签的 attributes 中找到事件句柄。

2，选中 test2 元素：

右侧 DOM 标签：

test2 采用在 javascript 中绑定事件句柄的方式，被作为“用户自定义属性”显示在了 DOM 标签中，右击鼠标可以查看相关信息：

3，选中 test3 元素：

这次在 DOM 标签中没有找到任何相关此元素绑定事件的信息。。。

总而言之，firebug 中在标准绑定事件函数下（addEventListener），并不好检测到某个元素已绑定的事件函数，（不要说尝试打印一下那个元素的 onclick 属性，addEventListener 绑定和 onclick 绑定毫不相干，此种情况下你会得到 nudefined）；如果是在前两种事件绑定下，可以得到一些简单信息。

-----

OPERA：

1，在 Opera 的 Dragonfly 中选中 test1 :

在右方的属性列表中可以找到相关的信息：

点击加号同样可以查看绑定的函数信息：

想查看某个函数体的话，有一种简单的方法，在控制台中直接输入：

直接就打印出函数体，更加的方便！

2，选择 test2 和 test1 几乎相同，就不在赘述了；

3，选择 test3：

Nothing can be found in the attribute tag on the right. The values ​​​​of onclick and onmouseover are both null.

In short, Opera Dragonfly and Firefox Firebug perform similarly, and it is not very clear which events are bound to an element under the standard binding function.

-----

CHROME:

It’s much clearer in Chrome:

1, select test1 (or test2, these two are similar) in the debugging tool

Look at the information bit on the right:

Event Listeners in Chrome is a good little tool that directly lists the listening functions that have been bound to the currently selected element. Click the small black triangle to view the information of the bound functions:

There are two items in click. The first item is div#test1, which is the onclick function information we bound; the second item, document, does not need to be seen (Chrome’s own processing);

isAttribute: true: Indicates that this onclick function handle is treated as an element attribute (because we use onclick = function(){…}, whether it is test1 or test2);

lineNumber: 18: indicates the location of the bound function;

useCapture: false : Indicates that event capture is not used; other semantics are very strong, so I won’t mention them;

Similarly, in the first HTMLDivElement list of Properties, both test1 and test2 can see:

2, select test3:

In Properties both onclick and onmouseover will become null, but Event Listeners will still be:

But notice the div#test3:

isAttribute becomes false because we do not use the onclick attribute, but use addEventListener.

Remember these first! The writing is a bit messy~