滚动事件 事件传播 阻止事件传递 window对象`事件 history对象

滚动事件

onscroll 元素的滚动事件, 当元素内容发生滚动时触发,会多次触发

clientHeight 元素本身高度
scrollHeight 元素的内容高度
scrollTop 表示纵向滚动偏移量
document.documentElement 根标签(html)

事件传播

事件传递分为两个阶段 捕获阶段.冒泡阶段
先从上层到下层进行捕获阶段,然后从下层到上层进行冒泡

自己理解:’ 从上到下 先进性捕获阶段 从下到上在冒泡

通过事件监听绑定事件
addEventListener() 三个值
1.事件类型 2. 事件函数 3.布尔值 表示是否在捕获阶段触发 默认为false 不触发

阻止事件继续传播的还有函数 stopPropagation()

阻止事件传递的方法

form表单标签 adcion 属性 就是提交表单的地址
一般form表单提交事件,会导致页面刷新 用户体验不是很好
button type"submit" submit 表示这是一个提交表单按钮
reset 表示这个是一个重置按钮

在表单提交按钮的click事件中,也可终止表单默认提交事件
e.preventDefault() 终止默认的提交事件

onsubmit 表单提交事件
e.preventDefault()
onreset 表单的重置事件
` form.onreset = function(e){

		if (!confirm("确定要清空表单数据？")){
			// 终止表单重置事件
			e.preventDefault()
		}
	}`

当你点击确定重置时 重置表单内容

window对象

DOM 和 BOM
dom 浏览器相当于一个容器,html代码相当于容器中的内容,html页面在放入浏览器显示的时候,会将html代码解析为一个对象DOM
BOM 浏览器对象模型
js除了能够通过DOM操作标签节点外,还可以用来操作浏览器,能够直接操作浏览的对象称之为BOM对象,可以控制打开窗口,在这里插入代码片关闭窗口 window对象就是一个BOM对象
在全局作用域下声明的函数和变量都是添加在window对象上的
window中的事件

window.onoload = function() { }比如:: onload 等待网页所有资源加载完成后执行(图片.音频,css文件,js文件资源文件)

document.ready = function(e){ }

ready 当标签节点加载完成后执行,不会等待资源加载

window.onresize = function(e){ console.("浏览器窗口大小改变了!!")}
onresize 重置浏览器窗口大小  浏览器大小变换是执行

location.href = "http://www.baidu.com"
切换浏览器当前窗口地址
location.reload() 刷新页面
location.replace("http://www.baidu.com")
替换新的网址

navigator对象 记录浏览类型/内核/操作系统等信息
		// 判断浏览器类型
		if (navigator.userAgent.includes("Chrome")){
			console.log("谷歌浏览器！")
		}else{
			console.log("使用的是其他浏览器！")
		}

history对象

backBtn.onclick = function(e){
				// history 对象 用于记录浏览记录
				console.log(history)
				// back() 返回上一页
				history.back()
			}
			用于记录历史记录的上一页 下一页    可以用go页可以用forward
				forward.onclick = function(e){
				// forward() 前进
				// history.forward()
				history.go(1)
			}