JavaScript函数收集
dobeco 2019-12-31
JavaScript
# 插入文本浏览器兼容
function getInnerText(element) {
return typeof element.textContent == "string"
? element.textContent
: element.innerText;
}
function setInnerText(element, text) {
if (typeof element.textContent == "string") {
element.textContent = text;
} else {
element.innerText = text;
}
}
setInnerText(div, "Hello World!");
console.log(getInnerText(div)); // "Hello World"
这两个函数都接收一个函数作为参数,然后检查这个元素是不是有 textContent 属性。如果有,那么 typeof element.textContent 应该是‘string’;如果没有,那么这两个后汉书就会改为使用 innerText
# 确认元素的大小
function getRoundingClientRect(element) {
var scrollTop = doucment.documentElement.scrollTop;
var scrollLeft = doucment.documentElement.scrollLeft;
if (element.getRoundClientRect) {
if (element.getRoundingClientRect) {
var temp = document.createelement("div");
temp.style.cssText = "position:absolute;left:0;top:0";
document.body.appendChild(temp);
arguments.callee.offset = -temp.getRoundingClientRect().top - scrollTop;
document.body.removeChild(temp);
temp = null;
}
var rect = element.getRoundingClientRect();
var offset = arguments.call.offset;
return {
left: rect.left + offset,
right: rect.right + offset,
top: rect.top + offset,
bottom: rect.bottom + offset
};
} else {
var actualLeft = getElementLeft(element);
var actualTop = getElementTop(element);
return {
left: actualLeft - scrollLeft,
right: actualLeft + element.offsetWidth - scrollLeft,
top: actualTop - scrollTop,
bottom: actualTop + element.offsetHeight - scrollTop
};
}
}
# 跨浏览器事件处理程序
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;
}
},
removeHandler: function (element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
},
// 获取event对象
getEvent: function (event) {
return event ? event : window.eventt;
},
// 获取目标节点
getTarget: function (event) {
return event.target || event.srcElement;
},
// 阻止事件默认行为
preventDefault: function (event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
// 阻止事件冒泡
stopPropagation: function (event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
},
getRekatedTarget: function (event) {
if (event.realtedTarget) {
return event.relatedTarget;
} else if (event.toElement) {
return event.toElement;
} else if (event.fromElement) {
return event.fromElement;
} else {
return null;
}
},
// 鼠标按键类型
getButton: function (event) {
if (document.implementation.hasFeature('MouseEvents', '2.0')) {
return event.button;
} else {
switch (event.button) {
case 0:
case 1:
case 3:
case 5:
case 7:
return 0;
case 2:
case 6:
return 2;
case 4:
return 1;
}
}
},
//滚轮事件
getWheelDelta: function (event) {
if (event.wheelDelta) {
return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
} else {
return -event.detail * 40;
}
},
// 字符编码
getCharCode: function (event) {
if (typeof event.charCode == 'number') {
return event.charCode;
} else {
return event.keyCode
}
},
// 获取剪贴板数据
getClipboardText: function (event) {
var clipboardData = event.clipboardData || window.clipboardData;
return clipboardData.getData('text')
},
setClipboardText: function (event, value) {
if (event.clipboardData) {
return event.clipboardData.setData('text/plain', value)
} else if (window.clipboardData) {
return window.clipboardData.setData('text', value)
}
}
};
var btn = document.getElementById("myBtn");
var handler = function() {
alert("Clicked");
};
EventUtil.addHandler(btn, "click", handler);
//这里省略了其他代码
EventUtil.removeHandler(btn, "click", handler);
# 跨浏览器CORS
function createCORSRequest(method, url) {
var xhr = new XMLHttpRequet();
if('withCredentials' in xhr) {
xhr.open(method, url, true);
} else if(typeof XDommnRequest != 'undefiined') {
vxhr = new XDomainRequet();
xhr.open(method, url)
} else {
xhr = null;
}
return xhr;
}
var request = createCORSRequet('get',)
# 类型检测
function type(o) {
var s = Object.prototype.toString.call(o);
return s.match(/\[object (.*?)\]/)[1].toLowerCase();
}