Day: September 20, 2018

jQuery事件系统详解

我们习惯理所当然的使用jQuery提供的高级事件API,jQuery帮我们处理了事件注册机制在各个浏览器间的兼容性,帮我们实现了高级的事件委托机制,大大的提高了我们的工作效率;然而我从来都不是一个知其然不知其所以然的工程师,你是否一样?如果你同样对其实现细节感兴趣,请仔细阅读本文。本文不涉及jQuery提供的自定义事件。 我将本文组织为如下结构: 1.使用原生API有什么问题 2.大牛是如何解决的 3.jQuery的实现 1. 使用原生API有什么问题 (1) 最原始的方法是直接对dom元素的onclick、onmouseover等属性赋值一个函数: Element.onclick = function(){ //event handler logic }; 然而这种方式一次只能添加一个事件处理函数,不具有通用性。 (2) 对于符合最新W3C标准的浏览器(IE>8,chrome,firefox,android)可以使用element.addEventListener,将事件类型作为一个参数传递。 element.addEventListener(‘click’,function(){ //event handler logic },false); element.addEventListener是支持添加多个事件的,调用顺序是事件添加顺序。并且我们可以通过传递第三个参数来控制事件的触发时机是捕获阶段还是冒泡阶段,默认为冒泡阶段。然而低版本的IE(<=8)不支持element.addEventListener。 (3)对于低版本的IE(<=8)相应的提供了element.attachEvent: element.attachEvent(‘onclick’,function(){ //event handler }); element.attachEvent的事件类型参数格式必须是on+事件类型,但是监听函数内部的this指针指向的却不是触发事件的element。 由此可见,以上三种方法直接使用原生API的方法都是有问题的或者说不完美的。 2.Dean Edwards大牛的实现 Dean Edwards在2005年写的了addevent的库,用于处理对浏览器的兼容性问题。理解了这个addEvent库,我们可以更好的理解jQuery的事件系统。 //事件添加方法 addEvent.guid = 1;… Read More

jQuery: 事件触发器trigger, 事件模型, 默认行为执行顺序, Native click won’t be triggered by jQuery

一般来讲,直接 trigger 一个 a 标签的 click 事件是不被浏览器允许的,正常情况下都是由用户的 click 事件来触发一个「点击动作」,在这个「动作」中,我们可以调用触发其他的 click 事件,就好像用户点在了其他的标签上。按照长期使用 jQuery 的思路,一般就会直接使用下面的方式来触发: $('a').click(); 或者是: $('a').trigger('click'); 很遗憾的是,这样是不行的,jQuery 并不会为 a 标签提供 native click 事件的触发,而我们想要做这件事情就需要用原生的 DOM element 来做: $('a').get(0).click(); 至于为什么?我找到了一个说法,是 Learn jQuery 上的一篇文章:Triggering Event Handlers。它说到: The .trigger() function cannot be used to… Read More

原生替代jQuery, You Don’t Need jQuery

前端发展很快,现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用场景大大减少。本项目总结了大部分 jQuery API 替代的方法,暂时只支持 IE10 以上浏览器。 Query Selector 常用的 class、id、属性 选择器都可以使用 document.querySelector 或 document.querySelectorAll 替代。区别是 document.querySelector 返回第一个匹配的 Element document.querySelectorAll 返回所有匹配的 Element 组成的 NodeList。它可以通过 .slice.call() 把它转成 Array 如果匹配不到任何 Element,jQuery… Read More