# 兼容集合(js)
+ scrollTop
- document.documentElement.scrollTop DTD
- window.pageYOffset safari
- document.body.scrollTop
+ e.stopPropagation?e.stopPropagation():e.cancelBubble=true;
+ e.preventDefault?e.preventDefault():e.returnValue=false;
# event target
oBox.onclick = function (ev) {
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
}
# className方法 IE浏览器
思路
- 首先判断浏览器是否至此getElementsByClassName方法
- 如果不支持，则获取该元素下所有的子元素， 并对每个元素的className进行查询，这里要考虑多个类名的情况 因此对每个子元素的类名通过split(' ');进行类名的拆封，split返回的是一个数组，因此需要一次遍历，如果匹配，则通过push方法存放到数组中，如果不匹配进行下次循环 最后返回获得的数组
function getClassName(obj, className) {
// 没有传递 obj 参数，则默认使用 document
var ele = obj || document;
//兼容ie浏览器
if (!ele.getElmentsByClassName) {
var result = [];
var elmemets = ele.getElementsByTagName("*");
for (var i = 0; i < elements.length; i++) {
//使用split函数将元素中含有的多个类名分开，并一个个查找
var classNames = elements[i].className.split(" ");
// 遍历当前元素的每个类名
for (var j = 0; j < classNames.length; j++) {
//如果该元素中存在要获取的类明，则加入到数组中
if (classNames[j] == className) {
result.push(elements[j]);
}
}
}
} else {
return ele.getElementsByClassName(className);
}
return result;
}
# scrollTop
var scrollTop = document.documentElement.scrollTop ||
window.pageYOffset ||
document.body.scrollTop;
IE6/7/8：
+ 对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 ；
+ 对于有doctype声明的页面则可以使用 document.documentElement.scrollTop；
Safari:
+ safari 比较特别，有自己获取scrollTop的函数 ： window.pageYOffset ；
Firefox:
+ 火狐等相对标准些的浏览器就省心多了，直接用 document.documentElement.scrollTop ；2021年测试window.pageYOffset也会生效
页面具有 DTD，或者说指定了 DOCTYPE 时，使用 document.documentElement。页面不具有 DTD，或者说没有指定了 DOCTYPE，时，使用 document.body。(Edge、谷歌和火狐都是这种情况2021年) [另外一个不被用的值始终为0]
- IE10以上，三个值都相等，无DTD;当设置DTD时，document.body.scrollTop=0
- IE9不管设置与否，document.body.scrollTop=0;剩下两值相等
- IE7,8不管设置与否，document.body.scrollTop=0;window.pageYOffset=undefined
- IE5 不管设置与否，document.documentElement.scrollTop=0;window.pageYOffset=undefined
<!DOCTYPE html>
<html>
<style>
#test{
width:400px;
height:400px;
border:1px solid red
}
</style>
<body class="m-2">
<div id="test">1111</div>
<div id="test">1111</div>
<div id="test">1111</div>
<div id="test">1111</div>
<div id="test">1111</div>
<div id="test">1111</div>
<div id="test">1111</div>
<div id="test">1111</div>
<script>
setInterval(function(){
var scrollTop = document.documentElement.scrollTop||
window.pageYOffset ||
document.body.scrollTop;
console.log(document.documentElement.scrollTop,window.pageYOffset,document.body.scrollTop)
},1000)
</script>
</body>
</html>
# scrollHeight
- document.body.scrollHeight
- document.documentElement.scrollHeight IE8以上二者相等，以下会有兼容问题(而且不一样)
# addEventListener()
document.getElementById("myBtn").addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
});
element.addEventListener(event, function, useCapture)
/*您可以在同一个元素中添加不同类型的事件。*/
/*useCapture
可选。布尔值，指定事件是否在捕获或冒泡阶段执行。
可能值:
true - 事件句柄在捕获阶段执行
false- false- 默认。事件句柄在冒泡阶段执行*/
// 移除 <div> 元素的事件句柄
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
# 为什么要用addEventListener
- 允许给一个事件注册多个监听器,可以是同一个类型，比如两个click事件.
- 它提供了一种更精细的手段控制 listener 的触发阶段。（即可以选择捕获或者冒泡）。
- 它对任何 DOM 元素都是有效的，而不仅仅只对 HTML 元素有效。
var t1=document.getElementById("test")
t1.addEventListener("click",function(){
console.log(1)
})
t1.addEventListener("click",function(){
console.log(2)
})
//1 2
# 低版本的浏览器 attachEvent detachEvent
这两个方法都接受两个相同的参数。
- 事件处理程序名称
- 事件处理程序方法
- 注意事件名与addEventListener不同要加 on
//IE只支持事件冒泡
let box = document.querySelector('.box')
function xxx(){console.log('box clicked...')}
box.attachEvent('onclick',xxx)
# e.keycode||e.which
利用navigator对象的appName属性，当然也可以用userAgent属性，这里用appName来实现判断浏览器类 型，IE和Maxthon的appName是“Microsoft Internet Explorer” ,而FireFox和Opera的appName"Netscape"：
function keyUp(e) {
if(navigator.appName == "Microsoft Internet Explorer")
{
var keycode = event.keyCode;
var realkey = String.fromCharCode(event.keyCode);
}else
{
var keycode = e.which;
var realkey = String.fromCharCode(e.which);
}
alert("按键码: " + keycode + " 字符: " + realkey);
}
document.onkeyup = keyUp;
比较简洁的方法是[2]：
function keyUp(e) {
var currKey=0,e=e||event;
currKey=e.keyCode||e.which||e.charCode;
var keyName = String.fromCharCode(currKey);
alert("按键码: " + currKey + " 字符: " + keyName);
}
document.onkeyup = keyUp;
# 兼容阻止冒泡事件
对象.事件=function(e){
var e = e || event;
e.stopPropagation?e.stopPropagation():e.cancelBubble=true;
}
# 兼容阻止默认行为
对象.事件=function(e){
var e = e || event;
e.preventDefault?e.preventDefault():e.returnValue=false;
}
# 兄弟元素的兼容写法
← for-in for-of 冒泡和捕获 →