focus与blur事件:不支持冒泡

focusin与focusout:支持冒泡

事件触发顺序:

对于同时支持这4个事件的浏览器,事件执行顺序为focusin(聚焦) > focus > focusout(失焦) > blur

HTML代码:

<div class="parent">
<input type="text" />
</div>
<div class="log"></div>

JavaScript代码:

function log(str){
$('.log').append($('<div/>').text(str));
} $('.parent')
.focusin(function(){log('div focusin');})
.focusout(function(){log('div focusout');})
.focus(function(){log('div focus');})
.blur(function(){log('div blur');});
$('input')
.focusin(function(){log('input focusin');})
.focusout(function(){log('input focusout');})
.focus(function(){log('input focus');})
.blur(function(){log('input blur');});

结果:

从执行结果可以看到4个事件的执行顺序,同时也可以看到 focus/blur是不支持冒泡的,所以.parent 元素绑定的focusblur事件回调并没有触发。

jQuery - focusin/focusout/focus/blur事件的区别与不同的更多相关文章

  1. 搜索提示時jquery的focusout和click事件沖突問題完美解决

          在主流的搜索引擎上搜索時,輸入內容,往往會彈出智能提示.輸入框为input,智能提示區域为suggest.接下來一般有兩種操作:        1.選擇某一提示,則把內容复制到input中 ...

  2. jquery中mouseout和mouseleave 事件的区别

    今天用jQuery写了一个选项卡的效果,用mouseout事件控制了鼠标的移出,结果发现在移出时div会发生闪动,于是网上各种查资料觉得用mouseleave更合适一些,

  3. jQuery中ready与load事件的区别

    1.摘要 大家在编程中使用jQuery还有JS的时候一定会在使用之前这样: //document ready $(document).ready(function(){ ...code... }) / ...

  4. jquery四种监听事件的区别

    最近找工作被问到了jquery有哪些事件监听,都有什么区别,忽然有点想不起来了... 然后上网上查看了相关的资料,总结一下,方便大家查看,也方便自己复习! 1.bind()方法: bind(type, ...

  5. jQuery中四个绑定事件的区别 on,bind,live,delegate

    1.jQ操作DOM元素的绑定事件的四种方式       jQ中提供了四种事件监听方式,bind.live.delegate.on,对应的解除监听的函数分别是unbind,die,undelegate, ...

  6. input输入框的的input事件和change事件以及change和blur事件的区别

    input输入框的 oninput事件 ,在用户输入的时候触发,只要元素值发生变化就会触发 input输入框的 onchange事件 ,要在输入框失去焦点的时候触发事件,当鼠标在其他地方点击一下才会触 ...

  7. div,span等标签支持focus/blur事件

    <div tabindex="0" hidefocus="true" onfocus='alert("得到焦点");' onblur= ...

  8. 说说focus /focusin /focusout /blur 事件

    事件触发时间 focus:当focusable元素获得焦点时,不支持冒泡:focusin:和focus一样,只是此事件支持冒泡:blur:当focusable元素失去焦点时,不支持冒泡:focusou ...

  9. focus /focusin /focusout /blur 事件

    事件触发时间 focus:当focusable元素获得焦点时,不支持冒泡:focusin:和focus一样,只是此事件支持冒泡:blur:当focusable元素失去焦点时,不支持冒泡:focusou ...

随机推荐

  1. java 雪花算法实现获取分布式id

    import java.lang.management.ManagementFactory; import java.net.InetAddress; import java.net.NetworkI ...

  2. not noly go —— 运行轨迹[一]

    前言 学习一下go 语言,也不完全是go,几乎是所以语言通用的部分,主要在于巩固一下基础,几乎不会涉及到语法相关的东西. 正文 前置内容 说起语言,很多人喜欢谈论解释型语言和编译型语言,其实对语言谈论 ...

  3. [hdu4747]Mex

    首先计算出以1为左端点的所有区间的mex,考虑删除左端点仍然维护这个序列:设当前删除点下一次出现在y,y~n的mex不变,从左端点到y的点中大于删除值的点要变成删除值,因为这个是不断递增的,所以是一段 ...

  4. 听说你想把对象存储当 HDFS 用,我们这里有个方案...

    传统的大数据集群往往采用本地中心化的计算和存储集群.比如在谷歌早期的[三驾马车]中,使用 GFS 进行海量网页数据存储,用 BigTable 作为数据库并为上层提供各种数据发现的能力,同时用 MapR ...

  5. 【POJ1961 Period】【KMP】

    题面 一个字符串的前缀是从第一个字符开始的连续若干个字符,例如"abaab"共有5个前缀,分别是a, ab, aba, abaa, abaab. 我们希望知道一个N位字符串S的前缀 ...

  6. Codeforces 1188B - Count Pairs(思维题)

    Codeforces 题面传送门 & 洛谷题面传送门 虽说是一个 D1B,但还是想了我足足 20min,所以还是写篇题解罢( 首先注意到这个式子里涉及两个参数,如果我们选择固定一个并动态维护另 ...

  7. TVB斜率限制器

    TVB斜率限制器 本文参考源程序来自Fluidity. 简介 TVB斜率限制器最早由Cockburn和Shu(1989)提出,主要特点是提出了修正minmod函数 \[\tilde{m}(a_1, a ...

  8. 【7】基于NGS检测体系变异解读和数据库介绍

    目录 解读相关专业术语 体系变异解读规则 体系变异和用药解读流程 主要数据库介绍 解读相关专业术语 2个概念:胚系.体系突变 4种变异类型:SNV.Indel.融合/SV(大的易位/倒位/缺失).CN ...

  9. linux命令行快速统计文件(压缩文件)的行数

    统计(文件|压缩文件)的行数 zcat file.gz | sed -n '$='                                         #迅速.直接打印出多少行.-n 取消 ...

  10. 4.Reverse Words in a String-Leetcode

    class Solution { public: void reverseWords(string &s) { vector<string> data; string word; ...