BOM和DOM事件

大家好，我还是那个小白，下面是我对bom和dom事件的一些总结，如有不足之处，欢迎各位大佬补充：

BOM（Browser Object Model）：浏览器对象模型

window：
全局对象（属性只能识别var声明的属性，方法只能识别字面量声明的函数）
只要打开一个浏览器，就会创建一个window对象

let全局变量与var全局变量的区别：
let全局变量无法被window使用
var全局变量可以被window使用（即var声明变量（非函数内部）为window的属性）

window的属性和方法:
不支持低版本IE浏览器（IE8）
浏览器距离屏幕左侧的距离：
window.screenX
浏览器距离屏幕顶部的距离：
window.screenY

不支持火狐浏览器：
浏览器距离屏幕左侧的距离：
window.screenLeft
浏览器距离屏幕顶部的距离：
window.screenTop

inner获取的是视口的尺寸：
window.innerWidth
window.innerHeight

outer获取的是浏览器的尺寸：
window.outerWidth
window.outerHeight

获取滚动条移动的距离：
window.pageXOffset
window.pageYOffset

警示框、提醒框：
window.alert(xxx);

确定框：
window.confirm(xxx);

输入框（返回值是用户的输入内容）
window.prompt(xxx);

新打开一个页面：
window.open()

时间函数：
setInterval（多个参数）
第一个参数：函数名（需要执行的代码）
加小括号的书写方法：
例：
function f74(a , b){
console.log(a + b);
}
setInterval(“f74(1 , 2)”,1000)
第二个参数：设定的时间（毫秒）
第三个参数及以后，为第一个参数的实参
功能：根据设定的时间，执行函数
例：
let i = 5;
let stop = setInterval(count, 1000);
function count() {
console.log(倒计时：${i});
i–;
if (i == 0) {
console.log(BOOM!!!);
clearInterval(stop);
return;
}
}
由于JS是有多个时间参数的。
如果想要停止时间函数，需要告知停掉哪个时间函数。
因此在创建时间函数时，用变量接收当前时间函数。
停止时间函数书写格式：
clearInterval（接受时间函数返回值的变量）
例：
let stop = setInterval(count, 1000);
clearInterval(stop);

功能：当达到设置时间后，执行相应的函数（只执行一次）
setTimeout（xxx，xxx）
参数1：执行的函数
参数2：时间
例：
console.log(请稍后，业务进行中……);
function yanchi(){
console.log(成功！);
}
setTimeout(yanchi,3000);

screen
获取屏幕尺寸（不包含任务框）
let pingmukuandu = screen.availWidth;
let pingmugaodu = screen.availHeight;
console.log( pingmukuandu,pingmugaodu);

location
//获取地址栏？后边内容
let info = location.search;
console.log(info);
//获取地址栏所有内容
let info2 = location.href;
console.log(info2);
//获取端口号
let info3 = location.port;
console.log(info3);

//当前页面显示页面新内容（共用一个窗口）（注：没有返回功能）
function fff(){
location.replace(./lianxi.html);
}
//当前页面显示新内容（不共用一个窗口）（注：有返回功能）
function eee(){
location.assign(./lianxi.html);
}

DOM事件：

事件三要素：
1.事件源：绑定事件的节点
2.事件处理函数：当事件触发后需要执行的代码（函数体）
3.事件类型：（单击、hover、move）
DOM2：
书写格式：
元素节点.addEventListener(事件类型，事件处理函数，Boolean/事件流）
参3（事件流）：捕获型（true）、冒泡（false）
删除事件：
节点名.removeEventListener(‘click’,事件处理函数名)
DOM 0和DOM 2的区别：
DOM 0的优缺点：
优点：兼容性好
缺点：
1.同一个事件类型只能绑定一个事件函数处理器
2.事件流（冒泡）
DOM 2的优缺点：
优点：
1.同一个事件类型可以绑定多个事件函数处理器
2.事件流（冒泡、捕获）
缺点：兼容性不高
事件对象：事件处理函数的参数
例：function（e） e就是事件对象
事件委托
例：
let olEle = document.querySelector(ol);
olEle.addEventListener(‘click’, function (e) {
if (e.target.nodeName == ‘LI’) {
e.target.classList.toggle(box);
}
if (e.target.localName == ‘p’) {
e.target.classList.toggle(box1);
}
})
适用场景：
1.多个子元素，绑定相同事件类型、执行同一个事件函数
2.子元素是动态

DOM表单事件：

let inEle = document.querySelector(input);
let bodyEle = document.querySelector(body);
//输入事件（只要输入就触发）
inEle.addEventListener(‘input’,function(e){
let str = e.target.value;
console.log(A);
let re = /3/;
if(re.test(str)){
window.alert(请重新输入！);
e.target.value = ``;
}
});

//焦点事件
inEle.addEventListener(‘focus’, function (e) {
e.target.style.outline = 1px solid red;
let spanEle = document.createElement(span);
spanEle.innerText=请输入！;
bodyEle.appendChild(spanEle);
});

//失去焦点
inEle.addEventListener(‘blur’, function (e) {
e.target.style.outline = ``;
});

//内容发生变化时（失去焦点后内容是否发生变化,只触发一次）
inEle.addEventListener(‘change’, function (e) {
console.log(666);
});

DOM键盘事件：

let inEle = document.querySelector(input);

//键盘按下时
document.addEventListener(‘keydown’,function(e){
console.log(cao);
console.log(e.key);
});

//键盘抬起时
document.addEventListener(‘keyup’,function(e){
console.log(gan);
});

//按：keypress只识别字符键（数字、字母、标点、回车）
document.addEventListener(‘keypress’,function(e){
console.log(ri);
});

DOM鼠标事件：

鼠标事件(dblclick鼠标双击)
arEle.addEventListener(‘dblclick’, function () {
console.log(dblclick);
});

鼠标移入(不考虑子元素:鼠标移入子元素,不会触发父元素的事件)
arEle.addEventListener(‘mouseenter’, function () {
console.log(mouseenter);
this.style.backgroundColor = ‘red’;
});
鼠标移出
arEle.addEventListener(‘mouseleave’, function () {
console.log(mouseleave);
this.style.backgroundColor = ‘burlywood’;
});

鼠标移入(会考虑子元素)
arEle.addEventListener(‘mouseover’, function () {
console.log(mouseover);
this.style.backgroundColor = ‘red’;
});
鼠标移出
arEle.addEventListener(‘mouseout’, function () {
console.log(mouseout);
this.style.backgroundColor = ‘burlywood’;
});

鼠标按下
divEle.addEventListener(‘mousedown’, function () {
console.log(mousedown,div);
});
鼠标抬起
divEle.addEventListener(‘mouseup’, function () {
console.log(mouseup,div);
});
鼠标移动
divEle.addEventListener(‘mousemove’, function () {
console.log(mousemove,div);
});

鼠标在浏览器水平和垂直的距离
console.log(event.clientX, event.clientY);

阻止默认事件:event.preventDefault();
let aEle = document.querySelector(a);
arEle.addEventListener(‘click’,function(e){
let event=e||window.event;
window.alert(a被点击了!);
event.preventDefault();
})

阻止冒泡：event.stopPropagation();
arEle.addEventListener(‘click’, function () {
console.log(article);
});
divEle.addEventListener(‘click’, function () {
event.stopPropagation();
console.log(div);
});
pEle.addEventListener(‘click’, function () {
event.stopPropagation();
console.log(p);
});

阻止事件捕获:event.stopImmediatePropagation();
arEle.addEventListener(‘click’, function () {
event.stopImmediatePropagation();
console.log(article);
},true);
divEle.addEventListener(‘click’, function () {
event.stopPropagation();
console.log(div);
},true);
pEle.addEventListener(‘click’, function () {
event.stopPropagation();
console.log(p);
},true);

event1.offsetX获取鼠标在事件源的水平位置
event1.offsetY获取鼠标在事件源的垂直位置

页面加载时触发
window.addEventListener(‘load’,function(){
console.log(xxx);
});

页面滚动条事件
window.addEventListener(‘scroll’,function(){
if(window.pageYOffset>500){
F70.style.display = ‘none’;
}else {
F70.style.display=‘block’;
}
});

页面尺寸发生变化触发事件
window.addEventListener(‘resize’,function(){
console.log(window.innerWidth,window.innerHeight);
})