1.阻止事件冒泡
function stopBubble(e){ if(e.stopPropagation){ e.stopPropagation(); }else{ e.cancelBubble = true; // 兼容IE } }
2.阻止默认事件执行
if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; }
3.获取事件对象
标签对象.事件类型 = function(e){ e = e || window.event }
4.获取非行内样式 (实际效果是获取标签执行的样式属性值)
if(window.getComputedStyle){ console.log(window.getComputedStyle(oDiv).width); }else{ // 兼容IE的方法 console.log(oDiv.currentStyle.width); }
5.获取浏览器滚动高度
var height = document.documentElement.scrollTop || document.body.scrollTop; // 兼容IE写法// 文档显示的宽/高 只能取值,不能赋值; // (document.body.clientWidth/clientHeight)兼容低版本,存放在body里面; // var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
6.添加事件监听
function myAddEvent( ele , type , fun){ // 判断 addEventListener这个方法是否存在 if(ele.addEventListener){ ele.addEventListener(type , fun); }else{ ele.attachEvent('on'+type , fun); } }
7.删除事件监听
function delFun(ele , type , fun){ if(ele.removeEventListener){ ele.removeEventListener(type , fun); }else{ ele.detachEvent( 'on' + type , fun); } }
8.getElementsByClassName(IE8以下兼容问题)
var allEles = document.all; // var allEles = document.getElementsByTagName("*"); var list = []; for (var i = 0; i <= allEles.length - 1; i++) { var ele = allEles[i]; var className = ele.getAttribute("class"); // console.log(className); if (className) { // list[list.length] = className; var classList = className.split(" ");// 生成包含所有class属性名的属性值的数组 if (indexOf(classList, "first") != -1) { list.push(ele); // list[list.length] = ele; } } } console.log(list); // indexOf也不支持,需要封装 function indexOf(list, item) { var index = -1; for (var i = 0; i <= list.length - 1; i++) { if (item === list[i]) { index = i; break; } } return index; }
9.建立ajax对象
let xhr = {}; if(XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject('Microsoft.XMLHTTP'); }
10.获取ajax响应体
xhr.onload = function(){}; // 常规浏览器
xhr.onreadystatechange = function(){}; // 低版本浏览器