标签：并且 代码 chrome function luks element com 下拉 onload
此文章主要总结UIEvent相关的事件，如有不对的地方，欢迎指正。
var fixs = { ‘focusin‘: { standard: ‘focus‘, ie: ‘focusin‘ }, ‘focusout‘:{ standard: ‘blur‘, ie: ‘foucsout‘ }, ‘input‘: { standard: ‘input‘, ie: ‘propertychange‘ } } var uitls = { bindEvent: function(dom, eventType, fun, useCapture){ var fix = fixs[eventType]; if(document.addEventListener){ dom.addEventListener( fix ? fix.standard : eventType, fun, useCapture); }else{ dom.attachEvent(‘on‘ + ( fix ? fix.ie : eventType ), fun); } } };
主要做一些事件名的兼容性处理。
| 事件名 | 说明 |
| load | 在内容或页面加载完成后触发。此节点应用于document的节点上（但不能在document上绑定此事件），可以绑定元素：body、img、frame、frameset、iframe、link、script。js对象：image、windows、layer（h5的） |
| unload | 在页面或内容被移除时触发。元素：body、frameset；Js对象：window。 |
| onbeforeunload | 提示用户是否关闭当前网页 |
| abort | 图片加载完成之前被用户终止时触发，元素：img；js对象：image |
| error | 资源加载出错被触发，元素：script、img、style；js对象：window，image |
| select | 文本被选中触发，js对象：window |
var img = document.getElementById(‘img‘); var btn = document.getElementById(‘btn‘); uitls.bindEvent(img, ‘load‘, function(event){ console.log(‘load img‘); }); uitls.bindEvent(btn, ‘click‘, function(event){ img.src = ‘../../img/bck.png‘; }); window.onload = function(event){ console.log(‘window‘); } window.onbeforeunload = function(event){ console.log(‘window onbeforeunload‘); return false; } window.onunload = function(evet){ console.log(‘window unload‘); } img.src=‘../../img/a.jpg‘;
不是所有的标签都支持焦点事件，如div（不可编辑状态）、span、p等这类布局和显示内容的标签不支持焦点事件，主要form、以及form下的标签支持焦点事件。
| 事件名 | 说明 |
| focus | 获得焦点，不冒泡 |
| blur | 失去焦点，不冒泡 |
| focusin | 获得焦点，冒泡 |
| focusout | 失去焦点，冒泡 |
| DOMFocusin | 获得焦点，不冒泡，遗留方案 |
| DOMFocusout | 失去焦点，不冒泡，遗留方案 |
<form id="form" > <input type="text" /> <input type="text" /> </form> <script src="./uitls.js"></script> <script> var _form = document.getElementById(‘form‘); uitls.bindEvent(_form, ‘focusin‘, function(event){ console.log(‘focusin: ‘ + ( event.target || event.srcElement )); }, true); </script>
设置了addEventListener的第三个参数为true，表示在捕获阶段执行。
我们这里需要做一个兼容方案处理，在现代浏览器下需要用focus来触发，因为我们绑定是focus事件。
var inputone = document.getElementById(‘inputone‘); var focusinEvent = document.createEvent(‘UIEvents‘); focusinEvent.initUIEvent(‘focus‘,true,true); //后面两个参数为true或false都没有影响， 因为focusin发生在捕获阶段 _form.dispatchEvent(focusinEvent); //inputone也可以
实现输入内容的动态监测。
<select id="sel" >
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
</select>
var sel = document.getElementById(‘sel‘);
uitls.bindEvent(sel, ‘input‘, function(event){
var target = event.target || event.srcElement;
console.log("sel:" + target.value);
});
| 事件名 | 说明 |
| compositionstart | ime输入开始 |
| compositionupdate | ime接受输入框值改变 |
| compositionend | ime输入结束 |
说明：
示例代码：
<input id="input" type="text" /> <script src="./uitls.js"></script> <script> var input = document.getElementById(‘input‘); uitls.bindEvent(input, ‘compositionstart‘, function(event){ //英文不行，中文可以（识别的是输入法），开始输入状态 console.log(‘compositionstart: ‘ + event.target + " " + event.data); }); uitls.bindEvent(input, ‘compositionend‘, function(event){ //输入结束状态 console.log(‘compositionend: ‘ + event.target + " " + event.data) }); uitls.bindEvent(input, ‘compositionupdate‘, function(event){ //输入过程中， console.log(‘compositionupdate: ‘ + event.target + " " + event.data) }); uitls.bindEvent(input, ‘input‘, function(event){ console.log(‘input: ‘ + input.value); }); </script>
说明：
var compositionstartEvent = document.createEvent(‘UIEvents‘); compositionstartEvent.initUIEvent(‘compositionstart‘, false, false); input.dispatchEvent(compositionstartEvent);
标签：并且 代码 chrome function luks element com 下拉 onload
原文地址：http://www.cnblogs.com/cqhaibin/p/6885433.html
