onclick = xxx这种赋值写法绑定事件的原理是什么？-H5 Tutorial-php.cn

onclick = xxx这种赋值写法绑定事件的原理是什么？

WBOY

Release： 2016-06-07 08:42:55

Original

1729 people have browsed it

回复内容：

合理猜测：给onclick赋值的内部操作时，remove掉原来的，add上新的。路过
不同浏览器不一定是这个结果
底层代码肯定不是JS

仅趴了机器上几年前最老的blink代码看了下
EventListenerMap 里靠的是 EventListenerVector
这玩意就是个 Vector
typedef Vector
这么搞的

onclick setting 时候是 vector->find 后没有对应 handle
再 append 进去的
再次 setting 时是 find 有
就先 remove 老的再 append
没见 Vector 有用到（定义过） replace 方法

所以（在这么实现的浏览器上）才有这种现象

最终还是轮子哥猜对了。这个ff和chrome/safari行为是不一致的（edge未测试）。按照现在的规范（https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-attributes:event-handlers-12），blink/webkit的行为是错误的。

嗯，恭喜轮子猜对了一个错误的实现。 js就是猜的人多，而不去看源码或规范，所以有一堆误导大众的文章订阅者模式，内部应该是通过一个列表来维护事件响应的，所以每次为OnClick赋值的时候会替换原来的事件委托。你这是毛病得改，对未在需求文档中定义的行为不要妄加猜测，因为说不定哪天就改了呢。

这个可能是listener和onclick一个是列表，一个是属性，属性赋值自然覆盖。先执行属性，再执行监听器列表。

当然也可以有其它和实现，那表现就不一样了，你依赖这种调用顺序是错误的，我完全可以所有listener并发，符合需求，却让你的程序出bug，你这就是作死，不要学习那些上古遗留的糟粕属性，setter方法，去掉旧的，加上新的……你懂了吧，我猜的跟所谓的主线程队列里面加入子线程是不是一个道理（疑惑轮子哥猜中了。就是队列，出了重新进，就从队尾到队头了