第二十八课:focusin与focusout,submit,oninput事件的修复
focusin与focusout
这两个事件是IE的私有实现,能冒泡,它代表获得焦点或失去焦点的事件。现在只有Firefox不支持focusin,focusout事件。其实另外两个事件focus和blur是用来实现获取焦点和失去焦点的事件,但是由于这两个事件不能冒泡,所以很多浏览器就使用focusin,focusout来代替它,但是火狐不支持这两个事件,所以暂时还不能使用focusin,focusout事件代替focus和blur事件。
那么兼容性写法是怎么样的呢?如下:
if (document.addEventListener) { //如果是W3C的方式,就用捕获的机制(从父元素到目标元素),来实现冒泡的机制(从目标元素到父元素),这样父元素就能获得目标元素的focus和blur事件了
el.addEventListener('focus', focusHandler, true);
el.addEventListener('blur', blurHandler, true);
} else {
el.onfocusin = focusHandler; //IE不支持捕获阶段,但是支持focusin和focusout这两个事件,这两个事件本身就是冒泡的。因此父元素能获得目标元素的focus和blur事件
el.onfocusout = blurHandler;
}
当然另外一种写法是:
if("onfocusin" in form){
addEvent(form,"focusin",focusHandler,false); //第一个参数为绑定的元素,第二个是事件类型,第三个是事件处理函数,第四个是是否捕获阶段,false代表冒泡。
addEvent(form,"focusout",blurHandler,false);
}
else{
addEvent(form,"focus",focusHandler,true); //第一个参数为绑定的元素,第二个是事件类型,第三个是事件处理函数,第四个是是否捕获阶段,true代表捕获。
addEvent(form,"blur",blurHandler,true);
}
submit事件
在IE6-8下,submit不会冒泡到顶层,它只执行form元素的submit回调,冒泡到form元素,就提交跳转。submit事件跟鼠标事件和键盘事件不一样,它是一种复合事件,既可以通过鼠标事件实现,也可以通过键盘事件实现。
如果我们通过鼠标或者键盘来触发submit事件:在IE9+以及其他标准浏览器会触发form元素以及祖先元素一直到window的submit事件,才会跳转。IE8-,只触发到form元素的submit事件就跳转了。它们都不会触发form元素之内的元素绑定的submit事件的回调方法,因此submit事件的回调方法只能放在form元素中。
怎么来解决这个兼容性问题呢:
我们对submit事件进行处理,如果触发submit事件时,使用的是事件代理,那么就在代理元素上绑定两个事件,click,keypress。如果是键盘事件,根据keyCode是否为13(键盘事件keypress,当keyCode=13时,就代表用户按了enter按键,就代表用户正在触发submit事件,提交数据。这里的enter按键需要是在input元素中触发才行,IE下type=file的input也可以。),如果是点击事件,根据input元素的type属性值是否是submit,image(鼠标click事件,当点击的input是submit或image类型时,就代表用户正在触发submit事件,提交数据)。是的话,就手动模拟冒泡(因为submit事件在IE6-8下只能冒泡到form元素,因此手动模拟)。把submit事件一直模拟冒泡到window对象(这时代理元素就能触发submit事件了)。
如果最后都没有阻止默认行为,就通过el.submit()方法提交数据,进行跳转。el.submit()方法,不会执行submit回调的(也就是说执行el.submit方法会提交数据,进行跳转,但是不会执行submit的事件处理函数),而其他的click,blur,focus这样的DOM方法会同时执行回调和默认行为的。
reset事件跟submit事件一样,解决办法也一样,只是keyCode值不一样或者type的属性值不一样而已。
oninput事件
在做搜索框的智能提示,微博发布区@好友出现列表等功能时,我们需要监听输入框内部的变化。如果使用change事件,只能等失去焦点时才会触发回调,如果使用keydown,keypress,keyup,这几个键盘事件来监听,就监听不了右键的复制,剪贴,粘贴这些操作,这时我们就需要oninput事件了。
oninput事件是W3C提出来的,IE9才支持,但IE9对回退键,粘贴复制操作的监听也失灵,解决办法,用onkeydown解决回退键,oncut和onpaste解决粘贴复制操作(也可以通过onselectionchange事件来解决)。IE6-8下通过onpropertychange事件监听元素一切属性与特性的变化,因此可以通过它模拟oninput事件(事件对象的propertyName属性获取当前变动的属性名)。
兼容写法如下:
if(window.addEventListener){ //IE9+,以及其他标准浏览器
element.addEventListener("input",callback);
}
else{
element.attachEvent("onpropertychange",function(e){ //如果是IE6-8,input元素上的任何属性有变化就会触发
if(e.propertyName === "value"){ //如果是value属性有变化,就会触发回调
callback();
}
})
}
if(IE9){ //解决IE9下,input事件对回退,粘贴复制操作的失灵
var selectionchange = function(e){
if(e.type === "focus"){
document.addEventListener("selectionchange",callback);
}else{
document.removeEventListener("selectionchange",callback);
}
}
element.addEventListener("focus",selectionchange); //input获得焦点就绑定document的selectionchange事件,因此在input中的任何操作都会冒泡到document中
element.addEventListener("blur",selectionchange); //input失去焦点,就移除这个绑定事件
}
跟事件相关的操作已经全部讲完了,如果想做兼容性的操作,还是有点复杂的,大家认真看吧。
下面的课程将会讲到异步处理,敬请期待。
加油!
转载于:https://www.cnblogs.com/chaojidan/p/4180415.html
第二十八课:focusin与focusout,submit,oninput事件的修复相关推荐
- NeHe OpenGL第二十八课:贝塞尔曲面
NeHe OpenGL第二十八课:贝塞尔曲面 贝塞尔曲面: 这是一课关于数学运算的,没有别的内容了.来,有信心就看看它吧. 贝塞尔曲面 作者: David Nikdel ( ogapo@ithink. ...
- Java调用大数据接口,学习Hadoop第二十八课(java通过调用接口来操作HBase)
上节课我们一起简单学习了HBase的一些理论,这节课我们一起学习用java调HBase的接口来操作HBase. 我们首先建一个工程,这里我们还用原始的新建一个lib包.然后我们把下载的hbase-0. ...
- 新版标准日本语中级_第二十八课
语法 1. いや,~:いや是否定的表达方式,与いいえ类似,但いや的语气轻微.也用于否定自己刚刚说出的话. いえ也一样,但いえ比较有礼貌,男女都可以使用,而いや多为男性使用.此外,除了否定还可以 ...
- HLS第二十八课(UG871,接口综合)
接口的返回值,入口参数,都是需要用pragma约束的. 首先来回顾一下接口. a clock and reset have been added to the design: ap_clk and a ...
- 第二十八课.AlphaGo实例分析
目录 AlphaGo概述 AlphaGo的Policy Network 网络结构 训练方法 Behavior Cloning预训练 使用Policy Gradient继续训练策略网络 使用策略网络下棋 ...
- 【问链财经-区块链基础知识系列】 第二十八课 区块链如何助力万亿规模的供应链金融蛋糕
编者按:我国经济已由高速增长阶段转向高质量发展阶段.赊销项下的账期占压给实体经济的发展带了很大的束缚,国家近两年来多次发文鼓励和推动应收账款融资的发展.但传统应收类供应链金融模式,如保理.应收账款质押 ...
- python第二十八课——编码小常识
2.内存和硬盘: 内存:计算机硬件组成部分之一,它是一个容器,用来存储数据:处理数据速度快, 存储数据量小:断电死机数据会丢失,短暂性存储数据 硬盘:计算机硬件组成部分之一,它是一个容器,用来存储数据 ...
- 新版标准日本语初级_第二十八课
语法 1. 名1[人]は 名2[人]に 名3[物]を くれます:表示别人给说话人或者说话人一方的人某物.あげます.もらいます.くれます汉语都是给,但是3者之间的表达角度不同. 例如小野さんは森 ...
- JAVA 基础 / 第二十八课:接口与继承 / 如何设计JAVA的接口?
2018-03-19 在设计LOL的时候,进攻类英雄有两种,一种是进行物理系攻击,一种是进行魔法系攻击.这时候,就可以使用接口来实现这个效果. 接口就像是一种约定,我们约定某些英雄是物理系英雄,那么 ...
最新文章
- 手动删除EXCHANGE2010
- 花了一上午,终于完成了作业
- 中国农业科技领域最大一笔融资来了:极飞科技拿下12亿投资,百度&软银领投...
- nginx+tomcat集群负载均衡中的多虚拟主机配置
- 词典建立过程缓慢的解决~~子系统构架重新设计!
- vagrant 简单使用
- sql语句(Oracle和sqlserver)
- VIM下的可视模式的相关知识
- 贷款用途有什么限制?非法用途有什么后果?
- C#数据结构-单链表
- 会议交流 | DataFunCon 线上大会 - 知识图谱专题论坛
- Matrix: android 中的Matrix (android.graphics.Matrix) (转)
- 分省份碳排放量数据(2000-2019年)
- 两个最热门的BI软件:Tableau和Finereport
- json_encode函数参数详解
- 设置Mathtype的粗斜体
- 惠普CEO李艾科的“金刚钻儿”
- 铁柱学习node.js
- 初窥江湖之PhotoShop抠图(二)
- 云图(词云图)实现方式