原生JS学习笔记(三)
程序员文章站
2022-06-10 14:45:11
...
本周学习总结如图。
同时要注意各种兼容问题,
1、兼容的封装:正常浏览器和IE8及以下:非行内样式的操作
function getStyle(ele,attr){
if(Element.currentStyle){
return ele.currentStyle[attr];
}else{
return getComputedStyle(ele,false)[attr];
}
}
2、赋值式事件的绑定的兼容:
eve || window.event
3、获取键盘按键的兼容:
e.keyCode || e.which
4、事件冒泡的兼容
function stopBubble(e){
if(e.stopPropagation){
e.stopPropagation() //正常
}else{
e.cancelBubble = true; //IE
}
}
5、取消浏览器默认事件的兼容
function stopDefault(e){
if(e.preventDefault){
e.preventDefault(); //正常
}else{
e.returnValue = false; //IE
}
}
6、事件监听的兼容
function addEvent(ele,myevent,cb){
if(ele.attachEvent){
ele.attachEvent("on"+myevent,cb) //IE
}else{
ele.addEventListener(myevent,cb,false) //正常
}
}
7、事件委托的兼容
e.target || e.srcElement
8、事件委托的封装
function eveEnt(ele,cb){
return function(eve){
var e = eve || window.event;
var target = e.target || e.srcElement;
for(var i=0;i<ele.length;i++){
if(target === ele[i]){
cb.bind(target)();
}
}
}
}
同时若是使用事件委托,尽量使用监听式事件绑定
上一篇: 前端JavaScript之Promise
下一篇: Python进阶多线程爬取网页项目实战