此文章主要总结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);