元素尺寸和位置，scroll事件，事件响应链，事件默认行为
元素的尺寸和位置
元素的尺寸和位置
// 通过元素对象的style属性设置的样式是行内样式，所以通过style获取也是获取的行内样式，并不能获取css设置的样式值。
// 元素对象的clientWidth属性表示元素的宽度，
// console.log(box.clientWidth);
// clientHeight高度。
// console.log(box.clientHeight);
// 带边框的宽高。
// console.log(box.offsetWidth);
// console.log(box.offsetHeight);
// 获得元素相对于浏览器窗口的坐标。
// console.log(box.offsetLeft);
// console.log(box.offsetTop);
// 使用自身相对窗口的坐标减去父元素相对窗口的坐标可以得到自己相对于父元素的坐标。
// 浏览器窗口的宽高（工作区，显示页面的区域）
console.log(window.innerWidth);
console.log(window.innerHeight);
// 整个浏览器窗口的宽高
console.log(window.outerWidth);
console.log(window.outerHeight);
scroll事件
// 元素对象的onscroll事件，当元素内容发生滚动时触发，它是一个频繁出发的事件。
box.onscroll =
function
(){
// console.log("div发生滚动了");
}
// scrollTop属性表示元素纵向的滚动偏移量。
console.log(box.scrollTop);
// scrollHeight属性表示元素的内容高度
console.log(box.scrollHeight);
// 元素内容高度 - 元素本身高度 = 最大偏移量。
// 元素的当前偏移量等于最大偏移量时，说明滚动到底部了。
if
(box.scrollHeight-box.clientHeight==box.scrollTop){
console.log(
"到底了"
);
}
事件响应链
// 事件的传播分为捕获和冒泡两个阶段，通过行内属性和元素对象.onxxxx这两种方式添加的事件监听都是冒泡阶段的事件监听。
outer.onclick =
function
(){
console.log(
"outer被点击了"
);
}
inner.onclick =
function
(e){
console.log(
"inner被点击了"
);
// 事件对象的stopPropagation方法，可以阻止事件的继续传播。
e.stopPropagation();
}
第三种添加事件监听的方法
// 元素对象的addEventListener方法，为元素添加一个事件监听。第一个参数是要监听的事件类型，第二个参数是事件函数，第三个参数可选，是否在冒泡捕获阶段监听，默认为false
// 相比于前两种方法，这种方法可以为同一个元素的同一个事件添加多个事件函数。
outer.addEventListener(
"click"
,
function
(e){
console.log(
"outer捕获阶段"
);
},
true
);
outer.addEventListener(
"click"
,
function
(e){
console.log(
"outer冒泡阶段"
);
},
false
);
// 在事件响应链中任何阶段都可以阻止事件的传播
// removeEventListener移除已经添加过的事件监听
inner.removeEventListener(
"click"
,f1,
true
);
事件的默认行为
// 在浏览器中，某些事件会触发浏览器的默认行为，例如，按下F5，浏览器就会刷新当前页面，点击a标签，页面就会跳转。
var
link = document.getElementById(
"link"
);
link.onclick =
function
(e){
// 事件对象的preventDefault方法，可以阻止本次事件所触发的浏览器默认行为。
e.preventDefault();
}
document.body.onkeydown =
function
(e){
if
(e.keyCode==
116
){
e.preventDefault();
}
}
鼠标事件
var
box = document.getElementById(
"box"
);
// 当鼠标指针进入元素时触发。
box.onmouseenter =
function
(){
// console.log("鼠标进入了");
}
// 当鼠标指针离开元素时触发。
box.onmouseleave =
function
(){
// console.log("鼠标离开了");
}
// 当鼠标指针在元素中移动时触发，属于频繁触发的事件。
box.onmousemove =
function
(){
// console.log("鼠标移动了");
}
box.onmousedown =
function
(e){
console.log(e);
}
box.onmousewheel =
function
(){
console.log(
"滚轮滚动了"
);
}
box.addEventListener(
"DOMMouseScroll"
,
function
(){
console.log(
"滚轮滚动了"
);
})