2021-10-16

JS小白学习笔记（day_10）

一、获取窗口属性,获取dom尺寸

window.pageYOffset//滚动条Y轴
window.pageXOffset
document.body.scrollLeft/Top ie8 ie5
document.documentElement.scorllLeft/Top ie7 ie6

function getScrollOffset(){
	if(window.pageXOffset){
		return{
		    x:windows.pageXOffset,
		    y:windows.pageYOffset
		}
	}else{
	    return{
		x:document.body.scrollLeft+document.documentElement.scorllLeft,
		Y:document.body.scrollTop+document.documentElement.scorllTop
		}
    }
}

二、获取当前页面的宽高

控制台获取，支持ie8以上
window.innerWidth/Height
标准模式
document.documentElement.ClientWidth/clientHeight
怪异模式下
document.body.clientWidth/clientHeight

怎么看标准模式还是怪异模式
控制台输入：document.compatMode
CSS1Compat 标准模式
BackCompat 怪异模式

div.offsetWidth//div看起来是什么样加上padding值
div.offsetHeight
div.offsetLeft//对于有定位父级返回相对于最近的有定位的父级的坐标无定位的父级元素返回相对文档的坐标
dom.offsetParent//有定位的父级

三、获取滚动条位置

1. body里面有默认的8像素
   window.scrool(x,y)//当前位置，不是当前距离
   window.scroolTo(x,y)//与上面功能一样
   window.scroolBy(x,y)//累加滚动距离

实现自动阅读功能

     <script>
    var div = document.getElementsByTagName('div')[0];
    var start = document.getElementsByTagName('div')[1];
    var over = document.getElementsByTagName('div')[2];
    var timer = 0;
    var key = true;
    start.onclick=function(){
        if(key){   
            timer = setInterval(function(){
            window.scrollBy(0,1);
        } ,100);
            key = false;
    }
}
    over.onclick = function(){     
        clearInterval(timer);
            key = true;
    }
  </script>

四、js获取行间样式

obj.style.width
1.复合型变成小头峰式命名
2.div.style.cssFloat=div.style.float//为了避免冲突
3.复合属性必须拆解
4.写入的值必须是字符串格式
除了.style没有任何方法可以写入css
window.getComputedStyle(div,null).width;
//获取元素根据权重问题(获取的最后值是经过计算的),返回是是计算样式，值都是绝对值，null可以获取伪元素的值

//window.getComputedStyle(div,"after").width;
//行内大于样式(如果加width=100px!important;)行内权重大
div.currentStyle.width//获取的不是经过计算的IE独有的属性
封装getStyle()
function getStyle(elem,prop){
	if(window.getComputedStyle){
		return window.getComputedStyle(elem,null)[prop];
}else{
	return elem.currentStyle[prop];
	}
}

//使用原生的js，addeventListener给每一个元素绑定一个click事件并且输出他们的顺序

    var myli = document.getElementsByTagName('li');
    for(var i = 0;i < myli.length;i++){
        (function(n){
            myli[n].addEventListener('click',function(){
            console.log(n+1);
        },false);
      }(i))
    }

五、事件

1.obj.onclick=funcion(){}
兼容性很好，但是只能绑定一个处理程序，基本等同于写在HTML行间上，this指向的是程序跟本身
2.obj.addEventListener('click',function(){},false);
IE9以下不兼容，可以为多个时间处理多个程度序可以给一个对象的一个事件绑定多个处理函数(不能给一个函数绑定多次)this指向的是程序跟本身。
3.obj.attachEvent('on'+type,fn);
只适合ie浏览器this指向window

封装addEvent函数绑定函数

   function addEvent(type,elem,handle){
        if(elem.addEventListener){
            elem.addEventListener(type,handle,false);
        }else{
            if(elem.attachEvent){
                elem.attachEvent("on" + type ,function(){
                    handle.call(elem);
                })
            }else{
                elem["on" + type] = handle; 
            }
        }
    }
    div.onclick=null;
    div.removeEventListener(type,fn,false);
    div.detachEvent('on',type,fn);

事件冒泡
结构上存在父子元素存在冒泡功能，结构上(非视觉上)嵌套关系的元素，会存在事件,自子元素冒泡向父元素。(自底向下)一个对象的一个事件类型就只有一个事件模型->捕获/冒泡。
事件捕获:
结构上非视觉上，嵌套关系的元素，会存在冒泡功能事件，自父元素捕获至子元素(事件源元素)。IE上没有捕获事件。触发顺序，先捕获，后冒泡。

focus,blur,change,submit,reset,select等事件不发生冒泡
W3C标准,e.stopPropagation();
IE独有e.cancelBubble=ture;

封装冒泡

div.onclick = function(e){
    stopBubble(e);
}
function stopBubble(event){
    if(event.stopPropagation){
	event.stopPropagation();
}   else{
	event.cancel.Bubble = ture;
	}
}

阻止默认事件oncontentmenu
return false;//以对象属性的方式注册的时间才生效
event.preventDefault();//W3C标准，IE以下不兼容
event.returnValue = false;//兼容IE

封装阻止默认事件的函数cancelHandler(event);

function cancelHandler(event){
    if(event.preventDefault){
	event.preventDefalut();
    }else{
	event.returnValue = false;
    }
}//可以把a标签的默认事件取消<a href="javascript:void(false)"></a>
    //加警告<a href="javascript:alert('a')"></a>

event||window.event用于ie
事件源对象:
event.target 火狐只有这个
event.srcElement ie只有这个
这俩都有chrome

兼容写法

div.onclick = function(e){
	var event = e||window.event;
	var target = event.target||event.srcElement;
	console.log(target);
}

事件委托

	var ul = document.getElementsByTagName('ul')[0];
	ul.onclick = function(e){
	var evant = e || window.event;
	var target = event.targey||event.srcElement;
	console.log(target.innerText);
}

不用for循环写的优点：
1、性能不需要循环所有的元素一个个的绑定事件
2、灵活 当有新的子元素时不需要重新绑定事件

鼠标事件

click、触发点击事件
mousedown、鼠标按下事件
mousemove、鼠标移动事件
mouseup、鼠标抬起事件
contextmenu、阻止默认事件
mouseover、鼠标覆盖事件
mouseout、鼠标移走事件
mouseenter、鼠标覆盖事件
mouseleave、鼠标移走事件

方块跟随鼠标移动

    var disX,disY;
    var div =document.getElementsByTagName('div')[0];
    div.onmousedown = function(e){
        disX = e.pageX - parseInt(div.style.left);
        disY = e.pageY - parseInt(div.style.top);
        document.onmousemove = function(e){
        var event = e || window.event;
        div.style.left = e.pageX - disX + "px";
        div.style.top = e.pageY - disY + "px";
    } 
        document.onmouseup = function(){
        document.onmousemove = null;
        }
}

如何解决mousedown和click冲突问题

  function leaveClick(){
    var key = false;
    var startTime = 0,
        lastTime =0;
    var div = document.getElementsByTagName('div')[0];
    document.onmousedown = function(){
        startTime = new Date().getTime();
    }
    document.onmouseup = function(){
        lastTime = new Date().getTime();
        if(lastTime - startTime < 300){
            key = true;
        }
    }
    document.onclick = function(){
        if(key){
            key = false;
        }
    }
}

移动端
touchstart touchmove touchend
可以类似成一个click=一个mousedown+mouseup

键盘事件

onkeypress
onkeydown 所有键盘键的按键 > keypress 字符类按键(ASCII码有的) > onkeyup
onkeyup

keydown和keypress区别

//keydown可以相应任何键盘按键，keypress只可以找到相应的字符类键盘按键keypress返回相应的ASCII码可以转换成相应的字符
  document.onkeypress = function(e){
      console.log(String.fromCharCode(e.charCode));
  }

input、onchange、onfocus、onblur、onload

1.input事件无论删除还是添加一个字符都出发input事件
2.onchange对比的是鼠标聚焦还有失去焦点触发事件
3.onfocus
4.onload一般不用用来把script加在div前面的一个方法.非常慢，所有的加载项已经全部完成，效率最低
5.程序的执行顺序：
domTree cssTree ->renderTree渲染树

<input type="text" value="姓名" onfocus="if(this.value=='姓名'){this.value='';this.style.color='#424242'}"
 onblur="if(this.value==''){this.value='姓名';this.style.color='#999'}">