Jquery有live函数,那,如何用原生的Js绑定还未出现的元素的事件呢?

JavaScript020

Jquery有live函数,那,如何用原生的Js绑定还未出现的元素的事件呢?,第1张

.live()背后神奇的地方就在于它并不将事件绑定到你选定的elements上,而实际上是绑定到了DOM树的跟节点,而是在element中就像一个参数一样进行传递。

那么当你点击一个元素时,事件就会在DOM树上往上传递,直至到达根节点。这个事件的触发器已经在根节点被.live()创建。这个触发方法将首先检测被点击的目标看是否和.live()调用的选择器相匹配。如果匹配,那么绑定的方法就会执行了。

因为不管你在根节点内点击了什么,根节点的事件都会被触发,当你点击加入到根节点的任何元素时这个检查都会发生。

比如你要给一个还没有添加在页面中的id为“ABC”元素添加click事件。

实际上你要给document元素添加click事件。

并且在document的click回调函数中,判断事件源event.target。然后判断它的ID是“ABC”则执行相应的事件函数。类似这样。

原因比较多,我个人分析认为主要有以下两大方面的原因

历史遗留原因

javascript在当时设计之初,是带着商业竞争目的的,js前身为livescript,主要是使得浏览器初步具备客户端能力,因此并不是特别完善。

网页端js开发在相当一段时间内,由于浏览器的js解释引擎性能并不高,而且网络带宽也比较小,因此绝大多数站点的代码规模并不大,主要针对页面内容一些简单交互逻辑,在此前提下,浏览器厂商以及工业界都没有强大的动力去实现面向对象版本的js。

技术实现原因

考虑到到网页环境的特殊性,使用原型继承而不是类继承的方式,更节约内存空间,而且解释器的实现更为简单。

js开源界在不断的技术积累中,开发者已经逐渐适应了没有类的js开发模式,在js中实现真正的类反而显得有些鸡肋。

最后:虽然现在ES6标准中已经有class关键字了,但是归根到底类还是一个语法糖,其底层还是基于原型继承的。