什么是事件代理(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', blurHandler, true);
那对于 IE ,我们如何实现呢?
非常幸运,IE 下支持 focusin 和 focusout 事件,非常类似于 focus 和 blur 事件,唯一不同的是,这两种事件支持事件冒泡(Event Bubbling)。
el.onfocusin = focusHandler;
el.onfocusout = blurHandler;
很完美的解决方案:
if (document.addEventListener) {
el.addEventListener('focus', focusHandler, true);
el.addEventListener('blur', blurHandler, true);
} else {
el.onfocusin = focusHandler;
el.onfocusout = blurHandler;
}
当你下次看到 YUI 2.8 的 event/event-debug.js 源码中下面几段代码时,一定会清晰很多:
// String constants used by the addFocusListener and removeFocusListener methods
FOCUSIN = "focusin",
FOCUSOUT = "focusout";
....
_specialTypes: {
focusin: (isIE ? "focusin" : "focus"),
focusout: (isIE ? "focusout" : "blur")
},
....
addListener: function (el, sType, fn, obj, overrideContext) {
var capture = ((sType == FOCUSIN || sType == FOCUSOUT) && !YAHOO.env.ua.ie) ? true : false;
return this._addListener(el, this._getType(sType), fn, obj, overrideContext, capture);
}
分享到:
相关推荐
jQuery中blur和focus事件的应用,相关事例和代码
一、需求原因在填写表单时需要实现如下效果二、具体实现 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTDHTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”><html><head><...
jquery插件-表单验证 根据focus blur
在开发中我们会经常遇到blur和click冲突的情况。下面叙述了开发中常遇到的“下拉框”的问题,并提供了两种解决方案。 一、blur和click事件简述 blur事件:当元素失去焦点时触发blur事件;其为表单事件,blur和focus...
首先上代码说总结: 卡号 v-model=card.cardNo blur....使用@blur.native.capture=””即可实现。 另一种方法: 使用vue-directive指令实现。这种方法有个问题没解决,不推荐使用。 卡号 v-model=card.cardNo> V
Miller同学发现的IE6 bug:如以下代码,点击textarea时,引发window的blur,导致focus与blur配对混乱
在无focus情况,触发blur事件
2.在实例中添加指令 directives: { 'mtfocus' (el, binding, vnode) { let mtinput = el.querySelector('input') mtinput.onfocus = function () { ...//如果要对节点的数据进行更改,且更改要映射到页面上,则...
今天小编就为大家分享一篇layui动态绑定事件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
并不是所有的事件都有冒泡现象,比如如下几个:blur事件 ,focus事件, load事件 2、事件委托:事件捕获恰好与事件冒泡相反,它从顶层祖先元素开始,直到事件触发元素。 js事件捕获一般通过DOM2事件模型...
为了界面的美观,有些时候可能需要为文本框(TextBox)装饰个水印;它有两种状态,一是blur和focus。因此,我们可以在Javascript写两个事件,感兴趣的朋友可以了解下
blur stuio公司使用的3dsmax脚本,版本为9至2008
我们都知道在vue2中获取焦点为,然后调用focus方法 this.$nextTick(()=>{ this.$refs.XXX.focus() }) 现在我们的vue3怎么获取焦点,请看附件,已经正常使用。 请放心下载
onblur事件,鼠标离开表单input框时触发的事件
RevisionFX ReelSmart Motion Blur 这个是破解版本,无红叉水印亲测
每一种画笔都根据笔者多年绘画经验制作而成,开发目的主要以解决和改变数字绘画中的各种难题与创作方式为目的,让Photoshop变为一款专业级别的绘画工具,使用Blur's Good Brush将极大改变作画者的创作体验和充分的...
主要给大家介绍了关于Javascript中click与blur事件顺序的相关资料,文中介绍的非常详细,对大家学习或者使用Javascript中的click与blur事件具有一定的参考学习价值,需要的朋友可以下面来一起看看吧。