BOM
Location的属性
| 属性 | 描述 |
|---|---|
| href | 设置或返回完整的 URL。 |
| protocol | 设置或返回当前 URL 的协议。 |
| hostname | 设置或返回当前 URL 的主机名。 |
| port | 设置或返回当前 URL 的端口号。 |
| pathname | 设置或返回当前 URL 的路径部分。 |
| search | 设置或返回从问号 (?) 开始的 URL（查询部分）。 |
| hash | 设置或返回从井号 (#) 开始的 URL（锚）。 |
| host | 设置或返回主机名和当前 URL 的端口号。 |
Location的方法
| 属性 | 描述 |
|---|---|
| assign() | 加载新的文档。 |
| reload() | 重新加载当前文档。 |
| replace() | 用新的文档替换当前文档。 |
History的属性
| 属性 | 说明 |
|---|---|
| length | 返回历史列表中的网址数 |
History的方法
| 方法 | 说明 |
|---|---|
| back() | 加载 history 列表中的前一个 URL |
| forward() | 加载 history 列表中的下一个 URL |
| go() | 加载 history 列表中的某个具体页面(-1是上一个url,1是下一个url) |
a标签禁止页面跳转写法
<a href='script:;'></a>
<a href='script:void(0)';></a>
事件对象(event)
Event构造函数
Event对象本身就是一个构造函数，可以用来生成新的实例。
event = new Event(typeArg, eventInit);
typeArg表示事件的名称；- 第二个参数是一个对象，表示事件对象的配置。该参数可以有以下两个属性。
bubbles：布尔值，可选，默认为false，表示事件对象是否冒泡。cancelable：布尔值，可选，默认为false，表示事件是否可以被取消。
var ev = new Event(
'look',
{
'bubbles': true,
'cancelable': false
}
);
document.dispatchEvent(ev);
上面代码新建一个look事件实例，然后使用dispatchEvent()方法触发该事件。IE9以下使用fireEvent()
鼠标/键盘事件常用属性
| 属性 | 描述 | 支持ie9以下吗? |
|---|---|---|
| key | 在按下按键时返回按键的标识符。 | |
| keyCode | 返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。 | |
| charCode | 返回onkeypress事件触发键值的字母代码。 | |
| which | 返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码。 | |
| clientX & clientY | 拿的是鼠标相对视口的水平距离和垂直距离，相对的是视口的左上角（以视口左上角为原点） | |
| pageX & pageY | 拿的是鼠标相对页面的水平距离和垂直距离，相对的是页面的左上角（以页面左上角为原点） | 不支持ie9以下 |
| offsetX & offsetY | 拿的是鼠标相对自身元素的水平距离和垂直距离，相对的是自身元素左上角（以自身元素左上角为原点） | |
| screenX& screenY | 拿的是鼠标相对屏幕的水平距离和垂直距离，相对的是页面的左上角（以页面左上角为原点） | |
| altKey | 返回当事件被触发时，"ALT" 是否被按下。 | |
| ctrlKey | 返回当事件被触发时，"CTRL" 键是否被按下。 | |
| shiftKey | 返回当事件被触发时，"SHIFT" 键是否被按下。 |
拖动事件
| 事件 | 描述 | DOM |
|---|---|---|
| ondrag | 该事件在元素正在拖动时触发 | |
| ondragend | 该事件在用户完成元素的拖动时触发 | |
| ondragenter | 该事件在拖动的元素进入放置目标时触发 | |
| ondragleave | 该事件在拖动元素离开放置目标时触发 | |
| ondragover | 该事件在拖动元素在放置目标上时触发 | |
| ondragstart | 该事件在用户开始拖动元素时触发 | |
| ondrop | 该事件在拖动元素放置在目标区域时触发 |
滚轮事件
| 属性 | 描述 | DOM |
|---|---|---|
| onmousewheel | 滚轮滚动时触发 | |
| DOMMouseScroll | 火狐用的滚轮事件,只在addEventListener里有效 | |
| onscroll | 当页面被滚动条时触发 | |
| onwheel | 当页面被滚轮滚动时触发 |
判断是不是火狐
火狐的onmousewheel返回值是undefined,而谷歌和ie是null
onmousewheel===undefined //可以判断是不是火狐
滚轮属性
| 属性 | 作用 |
|---|---|
| wheelDelta | 判断滚轮是否滚动,正值向上滚动,负值向下滚动 |
| detail | 火狐用的判断滚轮是否滚动,负值向上,正值向下 |
触发事件的节点
| 属性 | 描述 | 返回值 | DOM |
|---|---|---|---|
| target | 事件最初发生的节点 | 返回触发事件的那个节点 |
2 |
| srcElement | IE6—IE8的事件节点写法 |
阻止默认事件
dom0事件，在事件回调中加上 return false;
dom2事件，在事件回调中加上 event.preventDefault();
| 属性 | 描述 | 返回值 | DOM |
|---|---|---|---|
| preventDefault() | 取消浏览器对当前事件的默认行为 | 2 | |
| setCapture() | 低版本ie阻止默认事件写法 | ||
| defaultPrevented | 事件是否要调用preventDefault方法 | 返回一个布尔值 | 2 |
| cancelable | 表示事件是否可以取消默认动作 | 返回一个布尔值 注意:该属性为只读属性，只能在新建事件时改变。 除非显式声明，Event构造函数生成的事件，默认是不可以取消的。 |
2 |
阻止事件传播和阻止事件被同一事件被其他函数监听
| 方法 | 描述 |
|---|---|
| stopPropagation() | 阻止事件在DOM中继续传播 |
| stopImmediatePropagation() | 阻止同一个事件的其他监听函数被调用 |
事件监听的处理程序
我们可以把对象注册为事件处理程序,只要这个对象拥有handleEvent方法
方法
| 方法 | 描述 | DOM |
|---|---|---|
| handleEvent() | 当addEventListener()监听的事件触发时,该事件会被触发 | 2 |
var obj = {
name: 'foo',
handleEvent: function() {
alert('click name='+ this.name);
}
};
document.body.addEventListener('click', obj, false);
创建事件方法
| 方法 | 描述 | DOM |
|---|---|---|
| createEvent() | 2 |
四、定时器
| 方法 | 注意 | ||
|---|---|---|---|
| let timer=setTimeout(fn,time) | 延迟定时器 | 延时time毫秒后执行fn | timer接收的是定时器的返回值,是一个唯一的id |
| clearTimeout(timer) | 清除延迟定时器 | ||
| let timer=setInterval(fn,time) | 循环定时器 | 每隔time毫秒执行一次fn | timer接收的是定时器的返回值,是一个唯一的id |
| clearInterval(timer) | 清除循环定时器 |
无论是延迟定时器还是循环定时器，清除的时候都需要保存设置定时器的编号
定义保存定时器的编号的变量，一定要定义成全局变量
定时器编号的变量必须是全局变量，否则某些场合没办法清除定时器
同步和异步（理解）
所有的定时器事件回调都是异步操作（事件、ajax、生命周期回调都是异步代码）；
对于我们的代码，以后我们可以认为代码分为同步代码和异步代码；
异步代码是要等同步代码执行完成之后才会执行的（js是单线程的）；
四种元素的位置和大小
getBoundingClientRect()方法
获取元素位置，这个方法没有参数
用于获得页面中某个元素的左，上，右和下分别相对浏览器可视窗口的位置。
该函数返回一个DOMRect对象，该对象有6个属性：top,lef,right,bottom,width,height；
<div id="box"></div>
var object=document.getElementById('box');
rectObject = object.getBoundingClientRect();
rectObject.top：元素上边到视窗上边的距离;
rectObject.right：元素右边到视窗左边的距离;
rectObject.bottom：元素下边到视窗上边的距离;
rectObject.left：元素左边到视窗左边的距离;
rectObject.width：是元素自身的宽
rectObject.height是元素自身的高
client系列 只读
clientWidth
拿的是盒子 内容 + padding的宽；
clientHeight
拿的是盒子 内容 + padding的高；
clientLeft
拿的是盒子左边框大小；
clientTop
拿的是盒子上边框大小；
offset系列 只读
offsetWidth
拿的是盒子 内容 + padding + border的宽
offsetHeight
拿的是盒子 内容 + padding + border的高
祖先/父元素有定位时参照物和绝对定位完全一样(祖先的content的左上角))；
offsetLeft
拿的是元素的偏移量：可以认为就是拿的绝对定位left值+元素自身的左margin
offsetTop
拿的是元素的偏移量：可以认为就是拿的绝对定位top值+元素自身的上margin
祖先/父元素没有定位时参照物是htmlborder的外面的左上角；
offsetLeft,offsetTop
拿的是元素content左上角距离htmlborder的外面的左上角的垂直水平距离
scroll系列
scrollWidth 只读
当内容比盒子小的时候，拿的是盒子的clientWidth
当内容比盒子大的时候，拿的是内容的clientWidth + 盒子的左右内边距；
scrollHeight 只读
当内容比盒子小的时候，拿的是盒子的clientHeight
当内容比盒子大的时候，拿的是内容的clientHeight + 盒子的上下内边距；
scrollTop 可读可写
拿的是盒子内容向上滚动的距离
scrollLeft 可读可写
拿的是盒子内容向左滚动的距离
5. 总结
1）元素的大小：宽和高的获取：
以后我们拿元素的宽和高 先看元素有没有边框 如果没有边框 那么clientWidth和offsetWidth是一样的，如果有边框，看你需要不，需要的话就用offsetWidth 不需要就用clientWidth; scrollWidth几乎不用；
2）元素的位置（偏移量）的获取：
以后需要获取元素的位置直接通过offsetLeft和offsetTop去获取，但是注意相对的参照元素是谁；（和绝对定位参照类似）
3）视口宽高求法（固定的）
document.documentElement.clientWidth
document.documentElement.clientHeight
window对象常用的三种事件
| 事件 | 描述 |
|---|---|
| window.onload | 页面加载完成后触发事件 |
| window.onresize | 视口大小改变时事件 |
| window.onscroll | 页面滚动时事件 |
window.onload出现的原因
一般情况我们都是等待页面加载完成之后才去操作dom元素，如果页面没有加载完成就去获取dom元素，有可能获取不到，这时候window.onload就被有了存在的意义了。
window.onload是什么
window.onload是一个事件，在文档加载完成后能立即触发，并且能够为该事件注册事件处理函数。将要对对象或者模块进行操作的代码存放在处理函数中。
window.onload = function (){
// 这里写操作的代码
}
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function () {
var btn = document.getElementById('btn');
btn.onclick = function () {
alert('i love you');
}
}
</script>
</head>
<body>
<button id="btn">按钮</button>
</body>
</html>
浙公网安备 33010602011771号