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. Linux USB (目录)

    1.USB 总线简介 2.USB 协议分析 3.USB Host 详解 4.USB Device 详解 5.usbip (USB Over IP) 使用实例

  2. SpringCloud升级之路2020.0.x版-32. 改进负载均衡算法

    本系列代码地址:https://github.com/JoJoTec/spring-cloud-parent 在前面一节,我们梳理了实现 Feign 断路器以及线程隔离的思路,这一节,我们先不看如何源 ...

  3. 如何系统学习C 语言(下)之 文件篇

    我们所编写的程序源代码以及编译生成的可执行文件都属于文件.所以文件的实质就是存储在外部存储介质上的一段连续的二进制数据. c 语言程序对文件的处理采用文件流的形式,程序运行在内存中,而文件是存储在外部 ...

  4. dotnet templating 定制自己的项目模板

    由于工作需要,研究了一下VS 项目模板生成的相关内容,本文做一下记录借助.NET Core Template Engine创建一个加单的项目模板. 创建项目代码和配置文件 首先创建一个Minimal ...

  5. 在linux 环境下 安装php

    最近打算学写一个php 脚本~ 到了虚拟机环境上发现~没有环境. 只有老老实实去装一个php环境咯. 第一步 去官网下一个包 记得一定要下载tgz格式的 第二步~当然是传上虚拟机上咯~任意目录都可以. ...

  6. 力扣 - 剑指 Offer 55 - I. 二叉树的深度

    题目 剑指 Offer 55 - I. 二叉树的深度 思路1(DFS) 后续遍历吧,先遍历到最深(递归到末尾返回0),然后从后面一步一步比较取大的值返回,每次返回层数都加1, 执行流程是怎样的:比如其 ...

  7. 互联网java面试宝典

    1.为什么使用消息队列啊? 答题: 消息队列的核心功能就是:解耦合,异步,流量削峰解耦:接口调用发送,那如果E系统也要这个数据呢?那如果C系统现在不需要了呢?现在A系统又要发送第二种数据了呢?A系统负 ...

  8. 从零开始学Kotlin第二课

    字符串模板 fun main(args:Array<String>){ //主函数main方法 println(diaryGenerater("天安门")); } // ...

  9. html+css第三篇

    css reset 原则: 但凡是浏览默认的样式,都不要使用. body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;font-size:12px;} ol,ul{margi ...

  10. Insights直播回顾,对话专家,HMS Core 6创新能力解读

    HMS Core Insights第八期直播–对话专家,HMS Core 6创新能力解读,已于11月25日圆满结束,本期直播与小伙伴们一同了解了HMS Core 6在图形.媒体以及连接与通信领域推出的 ...