相关标签

哥俩好:oninput & onpropertychange

传统对于文本框(input)的输入可通过键盘的 onkeydown / onkeypress / onkeyup 来监测,但在处理较多细节时存在诟病比如: cut(剪切) / paste(复制) / undo(撤销) / redo(重做) / drag & drop(拖拽)/ 输入法等。 而 oninput & onpropertychange 事件基本可以解决上面的诟病: oninput 事件作为 HTML5 中的标准事件,基本除了IE6 / IE7 / IE8 外的最新浏览器均支持(注:1、原先的 Opera 的虽支持,但依然存在部分传统的诟病,从 Opera 11+ 开始,已修复,更加完美;2、IE9 也支持)。 function(input, callback){ if (“onpropertychange” in input) { //IE6/IE7/IE8 input.onpropertychange = function(){ if (window.event.propertyName == “value”){ callback.call(this, […]

... 20 条评论 »

DOM 元素如何获得焦点

首先让我们看看哪些元素可以直接获得焦点(element..focus()): // Form : http://www.w3.org/TR/html5/editing.html#focusable a elements that have an href attribute link elements that have an href attribute button elements that are not disabled input elements whose type attribute are not in the Hidden state and that are not disabled select elements that are not disabled textarea elements that are not disabled command elements […]

... 4 条评论 »

浅谈 Mousewheel 事件

当需要制作转动鼠标滚轮放大页面字体这样的交互效果时,会用到 Mousewheel 事件。其实在大多数浏览器(IE6, IE7, IE8, Opera 10+, Safari 5+)中,都提供了 “mousewheel” 事件。但杯具的是 Firefox 3.5+ 却不支持此事件,不过庆幸 Firefox 3.5+ 中提供了另外一个等同的事件:”DOMMouseScroll” (事件和事件属性的测试案例)。 OK,我们现在已经知道了不同浏览器之间实现的差别,兼容代码如下: var addEvent = (function(){ if (window.addEventListener) { return function(el, sType, fn, capture) { el.addEventListener(sType, fn, (capture)); }; } else if (window.attachEvent) { return function(el, sType, fn, capture) { el.attachEvent(“on” + sType, fn); }; } else { […]

... 9 条评论 »

如何在事件代理中正确使用 focus 和 blur 事件

什么是事件代理(Event Delegation)? 如果不太了解的朋友,可详细阅读:《Event delegation in JavaScript》,这里不再累述。 首先让我们一起来回顾一些常识: 通常支持事件冒泡(Event Bubbling)的事件类型为鼠标事件和键盘事件,例如:mouseover, mouseout, click, keydown, keypress。 接口事件则通常不支持事件冒泡(Event Bubbling),例如:load, change, submit, focus, blur。 很明显:focus 和 blur 都属于不支持冒泡的接口事件。既然都不支持冒泡,那又如何实现事件代理呢? 可以换个角度,逆向思维,尝试事件捕获(Event Capturing,除了IE,现在流行的标准浏览器均支持)。 测试后会发现,如果你捕获 focus 或 blur 事件,目标元素的祖先元素均执行事件函数。至于为什么?或许是实现的一个 BUG。 el.addEventListener(‘focus’, focusHandler, true); el.addEventListener(‘blur’, blur... 23 条评论 »

模拟兼容性的 addDOMLoadEvent 事件

由于 window.onload 事件需要在页面所有内容(包括图片等)加载完后,才执行,但往往我们更希望在 DOM 一加载完就执行脚本。其实在现在大部分主流浏览器上(Firefox 3+,Opera 9+,Safari 3+,Chrome 2+)都提供了这一事件方法:addDOMLoadEvent。 document.addEventListener(“DOMContentLoaded”, init, false); 那对于 IE 我们如何模拟 addDOMLoadEvent 事件呢? Matthias Miller 最早提供了如下的解决方案: // for Internet Explorer (using conditional comments) /*@cc_on @*/ /*@if (@_win32) document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>"); var script = document.getElementById(“__ie_onload”); script.onreadystatechange = function() { if (this.readyState == “complete”) { init(); // call the onload handler } […]

... 13 条评论 »

JavaScript 获取事件对象的一个注意点

平时我们获取事件对象一般写法如下: function getEvent(event) { return event || window.event // IE:window.event } 如果没有参数,也可写成(非IE :事件对象会自动传递给对应的事件处理函数,且为第一个参数): function getEvent() { return arguments[0] || window.event // IE:window.event } 这样的写法在除 Firefox(测试版本:3.0.12,下同) 外的浏览器上运行都不会有问题,但 Firefox 为什么例外呢?让我们这样一种情形: <button id=”btn” onclick=”foo()”>按钮</button> <script> function foo(){ var e = getEvent(); alert(e); } </script> 运行结果在 Firefox 中是 undefined,为什么呢? 在 Firefox 中调用其实是这样的,先调用执行的是: function onclick(event) { foo(); } 然后调用执行的是: function […]

... 21 条评论 »