相关标签

哥俩好: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 : //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 条评论 »
? ?
  • 凰家街采:你期待的长江时代 ——凤凰网房产武汉 2018-07-26
  • 反思顾雏军案,营造可预期的法治环境 2018-07-26
  • 广图:神“摄”手初养成计划:摄影师爸爸成长篇 2018-07-26
  • 女性之声——全国妇联 2018-07-25
  • 习近平与人民日报那些事 2018-07-25
  • 新IP--河北频道--人民网 2018-07-25
  • 新时代领导干部应急管理能力提升的实践与思考 2018-07-25
  • 证监会答复投资者信息检索库 2018-07-24
  • 款款粽子情,深深敬老人 2018-07-24
  • 李鹏国的行为是对善良的一种打击,暴露了资本主义的道貌岸然的虚伪本质,女白领的同情心是值得赞扬的,只有不够,没有毛病 2018-07-24
  • 邓紫棋首任明星制作人 吴亦凡身兼二职 2018-07-23
  • 地铁上索座不成 蛮横老汉掌掴大妈 2018-07-23
  • 发现食品安全问题拨打12331投诉 2018-07-23
  • 莆田市:建立“网上大调解中心”经验做法 2018-07-22
  • 火锅店推120元月卡11天被吃垮:8点就排队,一卡全家用 2018-07-22
  • 473| 293| 119| 550| 374| 551| 584| 37| 693| 103|