1、获取 event 和 target 对象
var e = event || window.event;
var target = e.target || e.srcElement;
2、绑定和移除事件
function addEvent(ele, ev, fn) {
if (ele.addEventListener) {
ele.addEventListener(ev, fn);
} else if (ele.attachEvent) {
ele.attachEvent("on" + ev, fn);
} else {
ele["on" + ev] = fn;
}
}
function removeEvent(ele, ev, fn) {
// 注意,移除事件时,fn必须是声明函数:function fn() {},而不能是匿名函数,否则无效
if (ele.removeEventListener) {
ele.removeEventListener(ev, fn);
} else if (ele.detachEvent) {
ele.detachEvent("on" + ev, fn);
} else {
ele["on" + ev] = null;
}
}
3、添加自定义事件和传参
还有一个与之一致的用法 new Event(type, options)
,但此种方式不支持传参(点击查看详情),所以推荐使用以下方式:
function customEvent(eventName, obj) {
// 构造事件对象
var myEvent = new CustomEvent(eventName, {
detail: obj // detail是固定写法,obj为自定义要传的参数
});
// 触发事件对象
if (window.dispatchEvent) {
window.dispatchEvent(myEvent); // 高级浏览器
} else {
window.fireEvent(myEvent); // IE浏览器
}
}
4、阻止事件冒泡
function clearEventBubble() {
var e = event || window.event;
// e.stopPropagation(); 标准浏览器
// e.cancelBubble = true; IE浏览器
e.stopPropagation && e.stopPropagation() || (e.cancelBubble = true);
}
5、阻止事件默认行为
function stopDefault() {
var e = event || window.event;
// e.preventDefault(); 标准浏览器
// e.returnValue = false; IE浏览器
e.preventDefault && e.preventDefault() || (e.returnValue = false); // IE浏览器
}
6、获取浏览器文档宽高(区别于可视区域)
浏览器整个文档内容的宽/高度,包括滚动条卷去部分+可视部分+底部隐藏部分的宽/高度总和。
function getDocumentSize() {
var w, h;
if (document.compatMode === "BackCompat") {
w = document.body.scrollWidth;
h = document.body.scrollHeight;
} else {
w = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth);
h = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight);
}
return {
width: w,
height: h
}
}
7、获取浏览器可视区域宽高
function getClientSize() {
return {
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
}
}
8、获取元素对象宽高
function getEleSize(ele) {
return {
width: ele.clientWidth || parseInt(getComputedStyle(ele)['width']),
height: ele.clientHeight || parseInt(getComputedStyle(ele)['height'])
}
}
9、获取页面滚动条距离
function getScrollDistance() {
return {
top: document.documentElement.scrollTop || document.body.scrollTop,
left: document.docimentElement.scrollLeft || document.body.scrollLeft
}
}
10、删除元素节点
function removeNode(ele) {
if (!isIE()) {
ele && ele.remove();
} else {
ele && ele.parentNode.removeChild(ele);
}
}
function isIE() {
return ((window.ActiveXObject || "ActiveXObject" in window) || (/Trident\/7\./).test(navigator.userAgent)) && true || false;
}