UI事件指的是那些不一定与用户操作有关的事件，这些事件在DOM规范出现之前，在DOM规范中保留了向后兼容
- DOMActivate：
表示元素已经被用户操作（通过鼠标和键盘）激活。DOM3已经弃用，不建议使用 - load
当页面完全加载后在window上面触发，当所有框架都加载完毕时在框架集上面触发，当图片加载完毕时在<img>元素上面触发或者当嵌入的内容加载完毕时在<object>元素上面出发 - unload
当页面完全卸载后在window上面触发，当所有框架都卸载后在框架集上面触发，当嵌入的内容卸载完毕时在<object>元素上面出发 - abort
在用户停止下载过程时，如果嵌入的内容没有加载完，则在<object>元素上面触发 - error
当发生js错误时在window上面触发，当无法加载图像时在<img>元素上面触发，当无法加载嵌入的内容时在<object>元素上面触发，或者当有一个或多个框架无法加载时在框架集上触发 - select
当用户选择文本框（<input>或者<texterea>）中的一个或者多个字符时触发 - resize
在窗口或框架的大小变化时触发 - scroll：当用户滚动带滚动条的元素中的内容时，在该元素上触发，<body>元素中包含所加载的滚动条
多数这些事件都与window对象或表单控件有关
- load事件
var EventUtil = { addHandler: function(element,type,handler){//添加事件 if (element.addEventListener) { element.addEventListener(type,handler,false); }else if (element.attachEvent) { element.attachEvent('on'+type,handler); }else { element['on'+type] = handler; } }, getEvent: function(event){//获得事件对象 return event || window.event; }, getTarget: function(event){//获得事件元素 return event.target || event.srcElement; }, preventDefault: function(){//取消默认事件行为 if (event.preventDefault) { event.preventDefault(); }else { event.returnValue = false; } }, removeHandler: function(element,type,handler){//取消事件 if (element.removeEventListener) { element.removeEventListener(type,handler,false) }else if (element.dettchEvent) { element.dettchEvent('on'+type,handler); }else { element['on'+type] = null; } }, stopPropagation: function(event){//取消冒泡机制 var event = event || window.event; if (event.stopPropagation) { event.stopPropagation(); }else { event.cancleBubble = true; } } } EventUtil.addHandler(window,'load',function(){//当页面加载完 var oImg = document.createElement('img'); EventUtil.addHandler(oImg,'load',function(event){//当img加载完 event = EventUtil.getEvent(event); alert(EventUtil.getTarget(event).src); }); document.body.appendChild(oImg); oImg.src = '1.jpg'; });
必选要在整个页面加载完毕才能，用DOM方法在页面中添加元素，如果没有加载完毕就添加，会出现错误。
或者可以先把对象加载出来（DOM树中没有节点），然后再添加到DOM树中EventUtil.addHandler(window,'load',function(){ var oImg = new Image(); console.log(oImg.__proto__); EventUtil.addHandler(oImg,'load',function(event){ console.log('Image loaded'); }); oImg.src = '1.jpg'; //document.body.appendChild(oImg); });
动态加载<script>
-
EventUtil.addHandler(window,'load',function(){ var script = document.createElement('script'); EventUtil.addHandler(script,'load',function(){ alert('script loaded'); }); script.src = 'example.js'; document.body.appendChild(script); });
2.unload
与load事件对应的是unload事件，这个事件在文档被完全卸载后触发，只要用户从一个页面切换到另一个页面，就会发生unload是事件。而利用这个事件最多的情况是清楚引用，以避免内存泄露
EventUtil.addHandler(window,'unload',function(event){ alert('Unload'); });
3.resize事件
IE,Safari,Chrome,Opear会在浏览器窗口变化1像素就会触发resize事件
Firefox则会在用户停止调整窗口大小时才会触发resize事件
EventUtil.addHandler(window,'resize',function(event){ alert('Resized'); console.log(EventUtil.getEvent(event).target); });
4.scroll事件
5.焦点事件
var input = document.getElementById('inp1'); var oSpan = document.getElementById('span'); EventUtil.addHandler(input,'DOMFocusIn',function(){//添加事件 /* //DOMFocusIn（DOM3废弃）和focusin等价,但是这个事件冒泡 */ oSpan.innerHTML= 'DOMFocusIn获得焦点'; }); /* EventUtil.addHandler(input,'focus',function(){//添加事件 //focus这个事件冒泡 oSpan.innerHTML= 'focus获得焦点'; }); */ /* EventUtil.addHandler(input,'blur',function(){//添加事件 oSpan.innerHTML= 'blur失去焦点';//blur失去焦点，但是这个事件不冒泡 }); */ EventUtil.addHandler(input,'DOMFocusOut',function(){//添加事件 /* //DOMFocusOut失去焦点，但是这个事件冒泡,DOMFocusOut（DOM3废弃）和focusout等价 */ oSpan.innerHTML= 'DOMFocusOut失去焦点'; });
不冒泡的焦点事件
blur 失去焦点触发
focus 获得焦点触发
冒泡焦点事件
DOMFocusIn（DOM3弃用） 获得焦点触发
DOMFocusOut（DOM3弃用） 失去焦点触发
focusin 获得焦点触发
focusout 失去焦点触发
当一个焦点从一个元素移动到另一个元素
- focusout 在失去焦点的元素上触发
- focusin 在获得焦点的元素上触发
- blur 在失去焦点的元素上触发
- DOMFocusOut 在失去焦点的元素上触发
- focus 在获得焦点的元素上触发
- DOMFocusIn 在获得焦点的元素上触发
var oInp1 = document.getElementById('inp1'); var oInp2 = document.getElementById('inp2'); EventUtil.addHandler(oInp1,'DOMFocusIn',function(){ console.log('oInp1 : DOMFocusIn冒泡'); }); EventUtil.addHandler(oInp1,'focus',function(){ console.log('oInp1 : focus不冒泡'); }); EventUtil.addHandler(oInp1,'blur',function(){ console.log('oInp1 : blur不冒泡'); }); EventUtil.addHandler(oInp1,'focusout',function(){ console.log('oInp1 : focusout'); }); EventUtil.addHandler(oInp1,'focusin',function(){ console.log('oInp1 : focusin冒泡'); }); EventUtil.addHandler(oInp1,'DOMFocusOut',function(){ console.log('oInp1 : DOMFocusOut'); }); EventUtil.addHandler(oInp2,'DOMFocusIn',function(){ console.log('oInp2 : DOMFocusIn冒泡'); }); EventUtil.addHandler(oInp2,'focus',function(){ console.log('oInp2 : focus不冒泡'); }); EventUtil.addHandler(oInp2,'blur',function(){ console.log('oInp2 : blur不冒泡'); }); EventUtil.addHandler(oInp2,'focusout',function(){ console.log('oInp2 : focusout'); }); EventUtil.addHandler(oInp2,'focusin',function(){ console.log('oInp2 : focusin冒泡'); }); EventUtil.addHandler(oInp2,'DOMFocusOut',function(){ console.log('oInp2 : DOMFocusOut'); });