1、梳理知识点
内置对象
Array 数组操作方法 数组扩展方法 forEach filter reduce map indexOf
栈和堆
数组去重 :
数组排序
String
操作方法 str.split arr.join
Date
获取日期 设置日期 时间差
Math
获取随机整数公式
DOM
增 : createElement() appendChild() insertBefore()
删 : remove() removeChild()
改 :
改样式
obj.style.样式 =
obj.style.cssText = ""
obj.className = ""
改属性
obj.src =
obj.setAttribute( "" , "" )
obj.getAttribute( "" );
改内容
obj.innerHTML = innerText
obj.value
查 :
getElementById() ByTagName() ByName() ByClassName() querySelector()
BOM :
window document location event history navigation screen
2、事件对象event (重点)
事件 : 对页面元素的某种操作(比如 :onclick onmouseover.... )
事件对象 : 当对页面元素进行某种操作时,会产生一个对象,这个对象就是事件对象
不同类型的事件产生的事件对象就不同 比如 鼠标事件 就会产生鼠标事件对象 键盘事件 就会产生键盘事件对象
事件对象的兼容写法 :
document.onclick = function(e){
var evt = e || event;
}
3、鼠标事件对象的属性(重点)
坐标属性 :
pageX pageY 获取鼠标在文档中的位置 (相对于文档,有滚动条时算上滚动条滚动的距离)
clientX clientY 获取鼠标在文档中的位置 (相对于 window窗口,不算滚动条滚动距离)
page 和 client 在没有滚动条时,值相等
offsetX offsetY 获取鼠标在某个对象内部的偏移量
限制用户操作鼠标
button (扩展) : 0 --左键 1---滚轮 2---右键
4、键盘事件对象的属性(重点)
获取键盘的按键值 :
keyCode 字母以大写字母的编码值为准
兼容 :e.keyCode || e.which
ctrlKey 指的是 ctrl键 altKey 指的是 alt键 shiftKey 指的是 shift键 功能键 返回的都是布尔值 按下的是某个功能键 返回true
5、事件流
当触发某个事件时,事件从子元素到父元素 或 从父元素 到子元素的过程 称为事件流
事件流有两种模式 : (重点)
事件冒泡:事件传递方式 -- 从子元素 到 父元素
事件捕获: 事件传递方式 -- 从父元素 到 子元素
6、事件冒泡
当触发某个事件时,同样的事件会向父元素触发,这个过程称为 事件冒泡
高版本浏览器下 对象的包含关系 : window -- document --- body -- div---img
不是所有的事件都会产生冒泡现象 : 比如 onload onblur onfocus..
常见的事件冒泡所涉及的事件 : onclick onmouseover
7 、阻止事件冒泡 (重点)
stopPropagation() 事件对象的方法
事件冒泡兼容 :
e.stopPropagation?e.stopPropagation():e.cancelBubble = true
8、事件捕获
通过事件监听方法来实现 addEventListener()
用法 :
对象.addEventListener("事件",function(){
注意 : 这里的事件 去掉on
})
要想实现事件捕获 第三个参数是true,默认是false 冒泡
9、事件监听
为元素绑定事件
1、obj.事件 = function(){}
2、在标签上直接添加事件 <input onclick>
3、事件监听 addEventListener()
事件监听的作用 :
1、可以通过事件监听的方式实现捕获或冒泡的效果
2、可以为同样的元素添加多次同样的事件 事件都会被触发