jQuery - focusin/focusout/focus/blur事件的区别与不同
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 元素绑定的focus
和blur
事件回调并没有触发。
jQuery - focusin/focusout/focus/blur事件的区别与不同的更多相关文章
- 搜索提示時jquery的focusout和click事件沖突問題完美解决
在主流的搜索引擎上搜索時,輸入內容,往往會彈出智能提示.輸入框为input,智能提示區域为suggest.接下來一般有兩種操作: 1.選擇某一提示,則把內容复制到input中 ...
- jquery中mouseout和mouseleave 事件的区别
今天用jQuery写了一个选项卡的效果,用mouseout事件控制了鼠标的移出,结果发现在移出时div会发生闪动,于是网上各种查资料觉得用mouseleave更合适一些,
- jQuery中ready与load事件的区别
1.摘要 大家在编程中使用jQuery还有JS的时候一定会在使用之前这样: //document ready $(document).ready(function(){ ...code... }) / ...
- jquery四种监听事件的区别
最近找工作被问到了jquery有哪些事件监听,都有什么区别,忽然有点想不起来了... 然后上网上查看了相关的资料,总结一下,方便大家查看,也方便自己复习! 1.bind()方法: bind(type, ...
- jQuery中四个绑定事件的区别 on,bind,live,delegate
1.jQ操作DOM元素的绑定事件的四种方式 jQ中提供了四种事件监听方式,bind.live.delegate.on,对应的解除监听的函数分别是unbind,die,undelegate, ...
- input输入框的的input事件和change事件以及change和blur事件的区别
input输入框的 oninput事件 ,在用户输入的时候触发,只要元素值发生变化就会触发 input输入框的 onchange事件 ,要在输入框失去焦点的时候触发事件,当鼠标在其他地方点击一下才会触 ...
- div,span等标签支持focus/blur事件
<div tabindex="0" hidefocus="true" onfocus='alert("得到焦点");' onblur= ...
- 说说focus /focusin /focusout /blur 事件
事件触发时间 focus:当focusable元素获得焦点时,不支持冒泡:focusin:和focus一样,只是此事件支持冒泡:blur:当focusable元素失去焦点时,不支持冒泡:focusou ...
- focus /focusin /focusout /blur 事件
事件触发时间 focus:当focusable元素获得焦点时,不支持冒泡:focusin:和focus一样,只是此事件支持冒泡:blur:当focusable元素失去焦点时,不支持冒泡:focusou ...
随机推荐
- java 雪花算法实现获取分布式id
import java.lang.management.ManagementFactory; import java.net.InetAddress; import java.net.NetworkI ...
- not noly go —— 运行轨迹[一]
前言 学习一下go 语言,也不完全是go,几乎是所以语言通用的部分,主要在于巩固一下基础,几乎不会涉及到语法相关的东西. 正文 前置内容 说起语言,很多人喜欢谈论解释型语言和编译型语言,其实对语言谈论 ...
- [hdu4747]Mex
首先计算出以1为左端点的所有区间的mex,考虑删除左端点仍然维护这个序列:设当前删除点下一次出现在y,y~n的mex不变,从左端点到y的点中大于删除值的点要变成删除值,因为这个是不断递增的,所以是一段 ...
- 听说你想把对象存储当 HDFS 用,我们这里有个方案...
传统的大数据集群往往采用本地中心化的计算和存储集群.比如在谷歌早期的[三驾马车]中,使用 GFS 进行海量网页数据存储,用 BigTable 作为数据库并为上层提供各种数据发现的能力,同时用 MapR ...
- 【POJ1961 Period】【KMP】
题面 一个字符串的前缀是从第一个字符开始的连续若干个字符,例如"abaab"共有5个前缀,分别是a, ab, aba, abaa, abaab. 我们希望知道一个N位字符串S的前缀 ...
- Codeforces 1188B - Count Pairs(思维题)
Codeforces 题面传送门 & 洛谷题面传送门 虽说是一个 D1B,但还是想了我足足 20min,所以还是写篇题解罢( 首先注意到这个式子里涉及两个参数,如果我们选择固定一个并动态维护另 ...
- TVB斜率限制器
TVB斜率限制器 本文参考源程序来自Fluidity. 简介 TVB斜率限制器最早由Cockburn和Shu(1989)提出,主要特点是提出了修正minmod函数 \[\tilde{m}(a_1, a ...
- 【7】基于NGS检测体系变异解读和数据库介绍
目录 解读相关专业术语 体系变异解读规则 体系变异和用药解读流程 主要数据库介绍 解读相关专业术语 2个概念:胚系.体系突变 4种变异类型:SNV.Indel.融合/SV(大的易位/倒位/缺失).CN ...
- linux命令行快速统计文件(压缩文件)的行数
统计(文件|压缩文件)的行数 zcat file.gz | sed -n '$=' #迅速.直接打印出多少行.-n 取消 ...
- 4.Reverse Words in a String-Leetcode
class Solution { public: void reverseWords(string &s) { vector<string> data; string word; ...