BOM基础

BOM基础

location 实现网页的跳转

 console.log(location.href);  
 http://127.0.0.1:8848/DOM/BOM/loaction.html
		 window.location.href = 'https://www.baidu.com'; 
//跳转百度

history() 历史记录的跳转

			history.back(-1) //往历史记录跳一页
			history.go(-1)  //都可以去前一个去 刷新数据上有区别
			
			history.forward(1) //前进1页

screen 打印浏览器的宽度和高度

			console.log(screen.width)    //打印1920
			console.log(screen.height)   //打印1080
			console.log(screen.availWidth)  //打印1920
			console.log(screen.availHeight) //打印1040

open() 打开一个新的页面

btn.onclick=function(){
				window.open('01window.html',"_blank","width=100,height=200")
			
			}

navigator 接口表示用户代理的状态和标识

			console.log(navigator.appName,navigator.appVersion)
//loaction.html:17 Netscape 5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.67 Safari/537.36 打印网景公司 浏览器内核等信息

onresize 如果浏览器大小改变出发函数

	window.onload=function(){
				window.onresize=function(){
					console.log('浏览器大小改变了')
						//只要我变化就执行里面代码 浏览器窗口发生改变就执行这个事件
				}
			}

定时器

setTimeout 只能调用一次定时器

	time=setTimeout(function(){
				console.log('love')
			},1000)  //1秒后输出love

clearInterval(time) 清除多次定时器

setInterval 不清除则调用无数次定时器

	setInterval(function(){
				console.log('love')
			},1000)   //每间隔1秒输出love

time=clearTimeout(time)清除单个定时器

元素位置

offset

width+padding+border 返回元素实际大小

offsetleft 拿到盒子的水平偏移量 可以认为拿的是定位left值

offsettop 拿到盒子的垂直偏移量 可以认为拿的是定位TOP值

clientWidth 获取可视区域的width

width+padding

以后我们拿元素的宽和高先看元素有没有边框 如果没有边框那么 clientWidth 和 offsetWidth 是一样的 如果有边框看你需要，需要就用offsetWidth不需要clientWidth

offsetLeft 拿到盒子的水平偏移量 可以认为拿的是定位left值

offsetTop 拿到盒子的垂直偏移量 可以认为拿的是定位TOP值

scrollLeft

• 内容往左走的距离

• scrollTop 内容往上走的距离

• 可写的 scrollLeft scrollTop

案例：

window.onscroll 浏览器滚动事件

var box=document.querySelector('#nav')
	window.onscroll=function(){
		var getscroll=document.body.scrollTop||document.documentElement.scrollTop   //兼容性处理
		if(getscroll>200){
			box.style.top=0
		 }
		 else{
			box.style.top='-40px'
		}
	}

var ow = document.querySelector('#nav').offsetWidth;
	var oh = document.querySelector('#nav').offsetHeight;
	var pmw = document.documentElement.clientWidth；
	var pmh = document.documentElement.clientHeight;
	var box=document.querySelector('#nav');
	box.style.left=(pmw-ow)/2+'px'
	box.style.top=(pmh-oh)/2+'px';
//让盒子垂直水平居中

鼠标键盘表单事件

• 鼠标事件

btn.addEventListener('click',()=>alert('鼠标点击'))
	btn.addEventListener('mousedown',()=>alert('鼠标按下'))
	btn.addEventListener('mouseup',()=>alert('鼠标抬起'))
	btn.addEventListener('mousemove',()=>alert('鼠标移动'))

• 键盘事件

• btn.addEventListener('keydown',()=>console.log('键盘按下'));
  	btn.addEventListener('keyup',()=>console.log(btn.value+'键盘被释放'))
  	btn.addEventListener('keypress',()=>console.log(btn.value+'键盘被按下然后释放')
  

表单事件

focus 获取焦点事件
blur 失去焦点事件
reset重置事件 事件目标是form
submit事件 表单提交事件 事件目标是form

• keyCode 获取对应的键码

事件冒泡

事件流

1. 捕获事件流 从外到内 最终很少用几乎不用

2. 冒泡事件流IE 从内到外 我们所用的事件传播都是冒泡

3. 标准DOM事件流 false 冒泡 true 捕获 三个阶段 有捕获 获取元素 冒泡 这三个阶段当中的捕获和冒泡可以由程序员自己选择，但是通常情况我们都是默认（冒泡）

   事件冒泡的好处：

   ​ 进行事件委派 (事件委托 事件代理)

   ​ 用法：出现新添加的东西，并且新添加的东西要和老的拥有同样的行为此时我们就使用事件委派

   ​ 做法：给父级添加事件，不给元素本身添加，事件发生后通过父级去找，真正发生的元素是谁进行处理

   onmouseover鼠标移到/onmouseout鼠标离开 有父子元素用这个

   当鼠标移入父元素里面的子元素的时候，事件并没有移出然后在移入，事件元素切换 可实现一些效果

   ​ onmounseenter/onmouseleave 如果是一个父子元素模型，对父元素添加移入和移出，当鼠标移入父元素里面的子元素的时候，事件并没有移出然后在移入，事件元素没有切换

   • 阻止冒泡 event.stopPropagation() 谷歌火狐兼容写法 event.cancelBubble=true
   • return false;
     • 既阻止冒泡事件也阻止默认事件
       • 还有一个方法，虽然不能阻止冒泡，但是可以阻止默认事件

event

event概念：

​ 系统给我们封装的，任何事件都会有这个event对象，就是回调函数第一个形参

​ event兼容处理 event=event||window.event

​ event.target||event.scrElement 兼容性问题 处理事件委派

• event.target 获取事件目标的对象 就是点到那个就获取那个的元素

案例：鼠标跟随

box.onmousedown=function(event){
			
				var elex=box.offsetLeft;
				var eley=box.offsetTop;
				//拿到元素的初始位置
				
				var mousex=event.offsetX;
				var mousey=event.offsetY;
				console.log(mousex,mousey)	
				//获取鼠标于页面的位置
				
				
					box.setCaptrue && box.setCaptrue();
				document.onmousemove=function(event){
					var boxleft=event.pageX;
					var boxtop=event.pageY;
					//获取到鼠标到页面的位置
					box.style.left=boxleft-mousex+'px'
					box.style.top=boxtop-mousey+'px'
					
					
				}
				
				document.onmouseup=function(event){
					document.onmousemove=document.onmouseup=null;
					box.releaseCapture  &&	box.releaseCapture();
					// var boxleft=event.pageX;
					// var boxtop=event.pageY;
					// var mousex=event.offsetX;					
					// var mousey=event.offsetY;
					
					// box.style.Left=boxleft-mousex+'px'
					// box.style.Top=boxtop-mousey+'px'
					
				}
						
						return false
			}
		//dom0 事件取消默认行为
		// return false
			//dom2事件取消默认行为;
			// event.preventDefault()