版权声明:zf版权所有 https://blog.csdn.net/u014381542/article/details/89028800
/**
* ========================事件操作函数========================
*/
var eventUtil = {
/**
* 1.获取屏幕宽: window.screen.width || document.documentElement.clientWidth
2.获取屏幕高: window.screen.height || document.documentElement.clientHeight
IE5-8: document.documentElement.clientWidth || document.body.clientWidth
other: window.innerWidth
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
3.手机旋转事件:
var resizeEvt = 'onorientationchange' in window?'orientationchange':'resize';
window.addEventListener(resizeEvt, function(){
//执行相应操作
switch(window.orientation){
case 0: break; //横屏
case 180: break; //横屏
case 90: break; //竖屏
case -90: break; //竖屏
}
});
4.手机旋转事件兼容性问题:
A.使用(window.innerWidth和window.innerHeight)或者($(window).width()和$(window).height())-----安卓:获取到的值为旋转之前的值--------iphone:正确
B.使用(window.screen.width和window.screen.height)获取屏幕高度和宽度 ------安卓:旋转后值正确 ------iphone:跟旋转无关,保持不变
var isAndroid = navigator.userAgent.indexOf('Android') > -1?true:false;
var w = isAndroid?window.screen.width:$(window).width();
var h = isAndroid?window.screen.height:$(window).height();
*/
/**
* 获取当前事件
* @param e
* @returns {any}
*/
"getEvent" : function(e){
var e = e || window.event;
var ev = e.changedTouches?e.changedTouches[0]:e.targetTouches[0];
//jQuery滑动处理
// var ev = e.originalEvent.changedTouches?e.originalEvent.changedTouches[0]:e;
return ev;
},
/**
* 获取事件类型名称
* @param event
* @returns {string}
*/
"getEventType" : function(event){
var event = event || window.event;
return event.type;
},
/**
* 获取事件目标节点名称
* @param event
* @returns {EventTarget}
*/
"getEventTarget" : function(event){
var event = event || window.event;
if(event.target){
return event.target; //event.target.nodeName,event.target.nodeType
}else{
return event.srcElement;
}
},
/**
* 添加事件
* @param elem //元素节点
* @param type //事件类型
* @param callback //回调
*/
"addHandler" : function(elem,type,callback){
if (elem.addEventListener) { //DOM1级事件
elem.addEventListener(type,callback,"false");
}else if(elem.attachEvent){
elem.attachEvent("on"+type,callback);
}else{ //DOM0级事件
elem["on"+type] = callback;
}
},
/**
* 移除事件
* @param elem
* @param type
* @param callback
*/
"removeHandler" : function(elem,type,callback){
if (elem.removeEventListener) {
elem.removeEventListener(type,callback,"false");
}else if(elem.detachEvent){
elem.detachEvent("on"+type,callback);
}else{
elem["on"+type] = null;
}
},
/**
* 阻止冒泡
* @param event
*/
"stopPropagation" : function(event){
var event = event || window.event;
if (event.stopPropagation) {
event.stopPropagation;
}else{
event.returnValue = false;
}
},
/**
* 阻止默认行为
* @param event
*/
"preventDefault" : function(event){
var event = event || window.event;
if (event.preventDefault) {
event.preventDefault;
}else{
event.cancelBubble = true;
}
},
/**
*在这里我们可以明确DOMContentLoaded所计算的时间,当文档中没有脚本时,浏览器解析完文档便能触发 DOMContentLoaded 事件;如果文档中包含脚本,则脚本会阻塞文档的解析,而脚本需要等位于脚本前面的css加载完才能执行。在任何情况下,DOMContentLoaded 的触发不需要等待图片等其他资源加载完成。
接下来,我们来说说load,页面上所有的资源(图片,音频,视频等)被加载以后才会触发load事件,简单来说,页面的load事件会在DOMContentLoaded被触发之后才触发。
我们在 jQuery 中经常使用的 $(document).ready(function() { // ...代码... }); 其实监听的就是 DOMContentLoaded 事件,而 $(document).load(function() { // ...代码... }); 监听的是 load 事件。
* @param fn //页面加载完成以后回调
* @returns {number}
*/
"documentReady": function(fn){
if(document.addEventListener) {
document.addEventListener('DOMContentLoaded', function() {
document.removeEventListener('DOMContentLoaded',arguments.callee, false);
fn();
}, false);
}
// 如果IE
else if(document.attachEvent) {
// 确保当页面是在iframe中加载时,事件依旧会被安全触发
document.attachEvent('onreadystatechange', function() {
if(document.readyState == 'complete') {
document.detachEvent('onreadystatechange', arguments.callee);
fn();
}
});
// 如果是IE且页面不在iframe中时,轮询调用doScroll 方法检测DOM是否加载完毕
if(document.documentElement.doScroll && typeof window.frameElement === "undefined") {
try{
document.documentElement.doScroll('left');
}
catch(error){
return setTimeout(arguments.callee, 20);
};
fn();
}
}
}
}