js学习笔记（三大家族—client家族、冒泡机制）
client家族
1.概念
clientWidth:网页可见区域的宽
clientHeight:网页可见区域的高
clientLeft、clientTop:元素边框的宽
2.offset、client、scroll的区别分析
（1）left和top
（2）width和height
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习title>
<style type="text/css">
#box{
width: 200px;
height: 200px;
background-color: red;
padding: 20px;
border: 10px solid #000;
margin: 20px;
}
p{
line-height: 200px;
}
style>
head>
<body>
<div id="box">
<p>hahap>
<p>hahap>
<p>hahap>
<p>hahap>
div>
<script>
var box= document.getElementById('box');
console.log(box.clientWidth, box.clientHeight); //240,240,内容+内边距
console.log(box.offsetWidth, box.offsetHeight); //260,260,内容+内边距+边框
console.log(box.scrollWidth,box.scrollHeight); //240,884,里面内容的宽度和高度
//距离有定位的父盒子左边/上边的距离
console.log(box.offsetLeft, box.offsetTop);//28,20
//左/上边框的宽度
console.log(box.clientLeft, box.clientTop);//10,10
console.log(box.scrollLeft, box.scrollTop);//左/上滚动的长度
script>
body>
html>
3.获取屏幕的可视区域
（1）ie9及其以上版本、最新浏览器
window.innerWidth, window.innerHeight
（2）标准模式
document.documentElement.clientWidth, document.documentElement.clientHeight
（3）怪异模式
document.body.clientWidth, document.body.clientHeight
（4）封装
client: function() {//页面可视区域
if (window.innerWidth !== null) {
return {
"width": window.innerWidth,
"height": window.innerHeight
};
} else if (document.compatMode === "CSS1Compat") {
return {
"width": document.documentElement.clientWidth,
"height": document.documentElement.clientHeight
};
} else {
return {
"width": document.body.clientWidth,
"height": document.body.clientHeight
};
}
},
onresize
1.作用
用来监听页面大小是否发生改变。当窗口或框架的大小发生改变的时候就会调用。
<script>
window.onresize = function (ev) {
console.log('尺寸发生改变');//改变就会有
}
</script>
2.应用：背景颜色的改变
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onresizetitle>
head>
<body>
body>
<script src="工具/Tool.js">script>
<script>
/*
当屏幕宽度>=960时，页面的背景颜色变为红色；
当屏幕宽度>=640时，页面的背景颜色变为蓝色；
当屏幕宽度<640时，页面的背景颜色变为绿色。
*/
window.addEventListener('load',function (ev) {
changecolor();//一开始就要调用，要不然打开时没有背景颜色
window.addEventListener('resize',changecolor);
function changecolor(ev1) {
//获取可视区域的宽度
if (Tool.client().width >= 960){
document.body.style.backgroundColor = 'red';
}
else if (Tool.client().width < 640){
document.body.style.backgroundColor = 'green';
}
else{
document.body.style.backgroundColor = 'blue';
}
}
})
script>
html>
setTimeout和setInterval的区别
setTimeout(表达式,延时时间)在执行时,是在载入后延迟指定时间后,去执行一次表达式,记住,次数是一次。
setInterval(表达式,交互时间)则不一样,它从载入后,每隔指定的时间就执行一次表达式，是重复执行。
js事件传递机制
1.冒泡机制
事件冒泡：就是从事件目标一层层（从里到外）传到最外边。
注意
（1）冒泡顺序：div -> body -> html -> document -> window
（2）不是所有的事件都能冒泡，以下事件不冒泡：blur、focus、load、unload
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习title>
<style type="text/css">
#father{
width: 400px;
height: 400px;
background-color: red;
}
style>
head>
<body>
<div id="father">
<button id="btn">点我button>
div>
<script>
var btn = document.getElementById('btn');
var father = document.getElementById('father');
btn.addEventListener('click',function (ev) {
alert('点击了按钮');
//因为有冒泡机制，所以在点击了按钮后会将点击事件自动添加到father
});
father.addEventListener('click',function (ev1) {
alert('点击了father');
})
script>
body>
html>
2.阻止冒泡的方法
（1）标准浏览器和ie浏览器
w3c：ev.stopPropagation();
ie：ev.cancelBubble = true;
（2）兼容的写法
if (ev && ev.stopPropagation){ //w3c标准
ev.stopPropagation();
}else{ //ie系列
ev.cancelBubble = true;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习title>
<style type="text/css">
#father{
width: 400px;
height: 400px;
background-color: red;
}
style>
head>
<body>
<div id="father">
<button id="btn">点我button>
div>
<script>
var btn = document.getElementById('btn');
var father = document.getElementById('father');
btn.addEventListener('click',function (ev) {
//阻止冒泡
if (ev && ev.stopPropagation){ //w3c标准
ev.stopPropagation();
}else{ //ie系列
ev.cancelBubble = true;
}
alert('点击了按钮');
//点了按钮之后不会将点击事件传给father
});
father.addEventListener('click',function (ev1) {
alert('点击了father');
})
script>
body>
html>