第二十八课：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失去焦点，就移除这个绑定事件

}

跟事件相关的操做已经所有讲完了，若是想作兼容性的操做，仍是有点复杂的，你们认真看吧。

下面的课程将会讲到异步处理，敬请期待。

 

 

 

加油！