摘要：在这之前 DOM3 提供了 Mutation events 事件 可以监听到属性、文本内容、节点插入删除、子节点变化等事件。可是该事件 W3C 已废弃，虽然一些浏览器仍然支持，但不建议使用。 MutationObserver目前IE11+及其它浏览器最新版本都已支持。可以通过以下代码判断是否支持 使
阅读全文
摘要：addEventListener 参数如下addEventListener(type, listener[, useCapture]);type，事件名称listener，事件处理器useCapture，是否捕获一直把 listener 记成是响应函数，function 类型。相信很多人也是这么理解...
阅读全文
摘要：matchesSelector用来匹配dom元素是否匹配某css selector。它为一些高级方法的实现提供了基础支持，比如事件代理，parent, closest等。W3C在2006年就提出了该方法草案，Firefox和Safari相继实现，比如 目前除IE6-IE8，Firefox/Chro...
阅读全文
摘要：页面里的img元素，想要获取它的原始尺寸，以宽度为例可能首先想到的就是width，如下这里使用的getWH方法是之前文章里提到的。这时候获取的宽度和图片的原始尺寸是一样的。如果给img加上了width属性，这种方式就不行了，比如图片实际宽度是690，设置了width为400，这时按上面的方式获取则返...
阅读全文
摘要：有时需要获取图片的尺寸，这需要在图片加载完成以后才可以。有三种方式实现，下面一一介绍。一、load事件 img - load event loading... 测试，所有浏览器都显示出了“loaded”，说明所有浏览器都支持img的load事件。二、readystatechange事件 ...
阅读全文
摘要：前端开发工作中，经常需要将HTML的左右尖括号等转义成实体形式。我们不能把，&等直接显示在最终看到的网页里。需要将其转义后才能在网页上显示。转义字符（Escape Sequence）也称字符实体(Character Entity)。定义转义字符串的主要原因是“”等符号已经用来表示HTML TAG，因此不能直接当作文本中的符号来使用。但有时需求是在HTML页面上使用这些符号，所以需要定义它的转义字符串。有些字符在ASCII字符集中没有定义（如版权符号“©”）。因此需要使用转义字符（“©”对应的转义字符是“©”）来表示。这里提供两个函数escape和u
阅读全文
摘要：自定义DOM事件是在DOM3中定义的，它不是由DOM原生触发。自定义事件只能通过addEventListener方式添加，其它如内联到html或DOM0方式（el.onXXX=fn）添加的不能触发。如<!-- 内联事件代码 --><div id="d1" onmyevent="alert(this)">DIV1</div><script> // DOM 0 方式添加 d1.onmyevent = function(){alert(this)}</script>以下方式可以<!DOCTYPE
阅读全文
摘要：以下五种方式添加事件<!doctype html><html> <head> <title>事件处理程序的执行上下文</title> <meta charset="utf-8"> <style> div { background: gold; margin: 10px; } </style> </head> <body> <!-- 内联事件代码 --> <div id="d1" onclick="alert(
阅读全文
摘要：这是sina同事xiaoniu发现的，如下<!DOCTYPE html><html> <head> <meta charset="utf-8"/> </head> <body> <div id="02E503E2A1C011CFC85B7B701A0677EC0900000000000001"></div> <script> var str = '02E503E2A1C011CFC85B7B701A0677EC090000000000000
阅读全文
摘要：事件代理的实现原理很简单：利用浏览器中事件的冒泡（event bubbling）和事件源（target || srcElement）。某些场景中特别适合使用事件代理，它有如下好处需要管理的handler更少。占用的内存更少（创建的驻留在内存中的handler少了）。DOM元素与代码更少的绑定。DOM...
阅读全文
摘要：在之前的event-jq-0.2.js基础上继续提取jQuery的trigger和namespace。实现功能如下// add eventE.bind(el, 'click', fn);E.bind(el, 'click.name', fn);E.bind(el, 'click', fn, data);// remove event : E.unbind(el, 'click', fn);E.unbind(el, 'click.name');E.unbind(el, 'click');E.unbin
阅读全文
摘要：增加了批量添加事件E.on(el, { click : { handler : once : delay : scope : stopEvent : preventDefault : stopPropagation : }, mouseover : {}, mouseout : {}});数据结构：event-0.6.js
阅读全文
摘要：最近看完了添加事件和删除事件的核心方法，忍不住想把jQuery的事件模块抠出来。jQuery的代码是非常内聚的，一环套一环。想独立出来不容易。jQuery的事件模块严重依赖于其数据储存(jQuery.data)，你会发现我的代码中的dataManager对象对应它。这里只提供bind和unbind方法。暂不包含事件命名空间(event namespace)事件代理(event delegation)特殊事件如dom ready接口如下：E.bind(el, 'click', fn); E.bind(el, 'click', fn, data);E.unbind(
阅读全文
摘要：有时需要模仿用户的一些动作（鼠标/键盘操作），最常见的莫过于鼠标点击。一一列举1，dispatchEvent()这是标准的触发事件方法，使用时需要先创建好事件对象。如下var evt = document.createEvent('Event');evt.initEvent('click',true,true);element.dispatchEvent(evt);2，fireEvent()这是IE旧版本中实现的触发事件方法，它无须创建事件对象，直接使用。如下element.fireEvent('onclick');注意：与attachEvent
阅读全文
摘要：最简单的莫过于使用click方法<input id="btn" type="button" value="BUTTON" onclick="alert(1)"/><script> var btn = document.getElementById('btn'); btn.click();</script>所有浏览器都弹出了1。把input换成div呢<div id="d1" style="background:gold;widt
阅读全文
摘要：前面用了8篇回顾浏览器中内置事件，且写出了一个基本完整，功能还算强大的事件模块。如果您愿意，还可以继续添加一些功能如事件代理、一次性添加多个事件、和选择器结合一次性为多个元素添加事件。当然这些都不是必须的，可根据需求自行扩展。这篇开始看看自定义事件，自定义事件有许多应用场景。实际上它实现了“观察者模式”。使用过google（或灵图）地图API的同学应该知道地图有个缩放事件zoom，即地图放大或缩小的时候触发。这个zoom就是自定义事件。感兴趣的可以点击此处看看。自定义事件并不深奥，几行代码就可以实现一个var obj = {};obj['click'] = function()
阅读全文
摘要：这篇为其增加几个功能1，延迟handler的执行2，handler可指定执行上下文，即有时可能需要handler内this不是HTMLElement3，停止事件冒泡和阻止默认行为4，阻止元素默认行为5，停止事件冒泡为此，将添加事件函数on的接口做了修改。第四个参数是个对象，分别可指定以下参数E.on(el, 'click', fn, { once : // true则该handler仅执行一次 delay : // handler延迟执行的时间，以毫秒为单位 scope : // handler执行上下文，默认为el stopEvent : // 阻止el默认行为，停止冒泡 p
阅读全文
摘要：现有的事件管理都挂放在HTMLElement上的，即每个element有个events属性，该属性可以当成个hash对象。里面存储这该element的所有事件及事件handler。比如给element添加了click/mouseover/mouseout 三个事件，响应函数分别是f1/f2/f3。events的结构如下每一个events['click'] 是一个数组，即存放多个handler。给element的click事件添加3个事件handler，其结构如下往HTMLElement上添加了一个对象，该对象中存放了许多事件handler，可能会存在内存泄露的问题尤其在IE6中
阅读全文
摘要：基于“勿重复判断浏览器”的原则，将添加/删除/触发事件的三个分支重写。如下var w3c = !!window.addEventListener, addListener = w3c ? function(el, type, fn) { el.addEventListener(type, fn, false); } : function(el, type, fn) { el.attachEvent('on' + type, fn); }, removeListener = w3c ? function(el, type, fn) { el.removeEventListener
阅读全文
摘要：上一篇正式推出了我的事件模块event-v0.1，已经搭起了它的初始框架。或许有人要说，与众多JS库或框架相比，它还没有解决事件对象的兼容性问题。是的，我故意将此放到后续补充。因为事件对象的兼容性问题太多了，太繁琐了。这篇我将引入一个私有的_fixEvent函数，add中将调用该函数。_fixEvent将修复（或称包装）原生事件对象，返回一个标准的统一接口的事件对象。如下function _fixEvent( evt, el ) { var props = "altKey attrChange attrName bubbles button cancelable charCode c
阅读全文
