DOM元素 - 兼容写法
1. scrollTop
1. chrome document.body.scrollTop
2. IE && firefox document.documentElement.scrollTop
2. 阻止事件默认行为
1. 绑定事件
1. 主流浏览器 e.preventDefault();
2. 低版本 IE e.returnValue = false;
2. 没有绑定事件
return false;
3. 事件绑定 PS:事件绑定后 return false 不能阻止默认行为
1. 主流浏览器 obj.addEventListener('click', function () {}, false);
2. 低版本 IE obj.attachEvent('onclick', function () {});
4. JS 拖拽时 选中文字
1. 主流浏览器 return false;
2. 低版本 IE
1. 捕获 obj.setCapture();
2. 释放 obj.releaseCapture();
5. 事件 - 滚轮
1. firefox
obj.addEventListener('DOMMouseScroll', function (e) {
console.log(e.detail); // e.wheelDelta === undefined;
}, false);
2. chrome && IE
obj.onmousewheel = function (e) {
console.log((e || event).wheelDelta); // (e || event).detail === 0(number)
};
6. 事件 - input,areatext 统计字数 PS:键盘输入就触发
1. 主流浏览器 input.oninput = function () {};
2. 低版本 IE 10- input.onpropertychange = function () {};
7. 获取 HTML 元素的 CSS 样式 PS:css样式表里的样式
1. 主流浏览器 getComputedStyle(obj, false)['属性名'];
2. 低版本 IE obj.currentStyle['属性名'];
8. 事件对象 event
1. 事件源
// chrome && IE e.srcElement
// firefox e.target
2. 从哪来的 (结合 mouseover事件)
// chrome && IE e.fromElement
// firefox e.relatedTarget
3. 要去哪里 (结合 mouseout事件)
// chrome && IE e.toElement
// firefox e.relatedTarget
9. 元素节点
1. (同级中)下一个元素节点 (没有下一个元素节点 返回null)
// chrome && firefox nextElementSibling
// 低版本 IE nextSibling
2. (同级中)上一个元素节点 (没有上一个元素节点 返回null)
// chrome && firefox previousElementSibling
// 低版本 IE previousSibling
3. (父级)里面首个子元素
// chrome && firefox firstElementChild
// 低版本 IE firstChild
4. (父级)里面最后一个子元素
// chrome && firefox lastElementChild
// 低版本 IE lastChild