WebAPIs③
1. DOM核心总结
1.1 创建
document.write()
element.innerHTML
document.createElement()
1.2 增加
node.appendChild(child)
node.insertBefore(child,指定元素)
1.3 删除
node.removeChild(child)
1.4 修改
主要修改DOM的元素属性,DOM元素的内容、属性,表单的值等
- 修改元素属性:src、href、title等
- 修改普通元素内容:innerHTML、innerText
- 修改表单元素:value、type、disabled等
- 修改元素样式:style、className
1.5 查找
主要获取查询DOM的元素
- DOM提供的API方法:
getELementById
、getElementByTagName
古老方法 不推荐 - H5提供的新方法:
querySelector
、querySelectorAll
提倡 - 利用节点操作获取元素:父(
parentNode
)、子(children
)、兄(previousElementSibling
、nextElementSibling
)提倡
1.6 属性操作
主要针对自定义属性
setAttribute
:设置DOM的属性值getAttribute
:得到DOM的属性值removeAttribute
:移除属性
1.7 事件操作
给元素注册时间,采取 事件源.事件类型 = 事件处理程序
鼠标事件 | 触发条件 |
---|---|
onclick | 鼠标点击左键触发 |
onmouseover | 鼠标经过触发 |
onmouseout | 鼠标离开触发 |
onfocus | 获得鼠标焦点触发 |
onblur | 失去鼠标焦点触发 |
onmousemove | 鼠标移动触发 |
onmouseup | 鼠标弹起触发 |
onmousedown | 鼠标按下触发 |
2. 事件高级
2.1 注册事件
给元素添加事件,称为 注册事件 或 绑定事件
注册事件有两种方式:传统注册方式 和 监听注册方式
传统注册方式:
- 利用on开头的事件,如onclick
- btn.onclick = function(){}
- 特点:注册事件的唯一性
- 同一个元素同一个时间只能设置一个处理函数,最后注册的处理函数会覆盖前面注册的处理函数
监听注册方式:
- W3C标准 推荐方式
- addEventListener() 方法
- IE9之前不支持,可使用attachEvent()代替
- 特点:同一个元素用一个事件可以注册多个监听器
- 按注册顺序依次执行
2.2 事件监听
addEventListener()(IE9以后支持)
eventTaeget.addEventListener(type,listener[,useCapture])
将指定的监听器注册到 eventTarget(目标对象)上,当该对象触发指定的事件时,就会执行事件处理函数。
- type:事件类型字符串(不带on)
- listener:事件处理函数,事件发生时,会调用该监听函数
- userCapture:可选参数,是一个布尔值,默认是false
attacheEvent()(IE6 7 8支持)
eventTarget.attachEvent(eventNameWithOn,callback)
将指定的监听器注册到 eventTarget(目标对象) 上,当该对象触发指定的事件时,指定的回调函数就会被执行。
- eventNameWithOn:事件类型字符串(带on)
- callback:事件处理函数,当目标触发事件时回调函数被调用
事件监听兼容性解决方案
2.3 删除事件
删除传统注册方式:
eventTarget.onclick = null;
删除监听注册方式:
eventTaeget.removeEventListener(type,listener[,useCapture]);
eventTarget.detachEvent(eventNameWithOn,callback);
<div>1</div>
<div>2</div>
<div>3</div>
<script>
var divs = document.querySelectorAll('div');
divs[0].onclick = function() {
alert(11);
// 1. 传统方式删除事件
divs[0].onclick = null;
}
// 2. removeEventListener 删除事件
divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号
function fn() {
alert(22);
divs[1].removeEventListener('click', fn);
}
// 3. detachEvent
divs[2].attachEvent('onclick', fn1);
function fn1() {
alert(33);
divs[2].detachEvent('onclick', fn1);
}
</script>
删除事件兼容性解决方案:
2.4 DOM事件流
事件流 描述的是从页面中接收事件的顺序
事件 发生时会在元素节点之间按照特点的顺序传播,这个传播过程即 DOM事件流
比如:我们给页面中的一个div注册了单击事件,当你单击了div时,也就单击了body,单击了html,单击了document。
- 事件冒泡:IE最早提出,时间开始时由最具体的元素接收,然后逐级向上传播到DOM最顶层节点的过程
- 事件捕获:网景最早提出,由DOM最顶层节点开始,然后逐级向下传播到最具体的元素接收的过程
DOM 事件流会经历3个阶段:
- 捕获阶段
- 当前目标阶段
- 冒泡阶段
注意:
- js代码中只能执行捕获或者冒泡的一个阶段
- onclick 和 attachEvent 只能得到冒泡阶段
- addEventListener(type,listener[,userCapture])第三个参数如果是true,表示在事件捕获阶段调用事件处理函数;如果是false(不写默认false),表示事件冒泡阶段调动事件处理
- 实际开发中很少用事件捕获,更关注事件冒泡
- 有些事件是没有冒泡的,如onblur、onfocus、onmouseenter、onmouseleave
事件冒泡: son->father
<div class="father">
<div class="son">son盒子</div>
</div>
<script>
// onclick 和 attachEvent(ie) 在冒泡阶段触发
// 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略
// son -> father ->body -> html -> document
var son = document.querySelector('.son');
// 给son注册单击事件
son.addEventListener('click', function() {
alert('son');
}, false);
// 给father注册单击事件
var father = document.querySelector('.father');
father.addEventListener('click', function() {
alert('father');
}, false);
// 给document注册单击事件,省略第3个参数
document.addEventListener('click', function() {
alert('document');
})
</script>
事件捕获: father->son
<div class="father">
<div class="son">son盒子</div>
</div>
<script>
// 如果addEventListener() 第三个参数是 true 那么在捕获阶段触发
// document -> html -> body -> father -> son
var son = document.querySelector('.son');
// 给son注册单击事件,第3个参数为true
son.addEventListener('click', function() {
alert('son');
}, true);
var father = document.querySelector('.father');
// 给father注册单击事件,第3个参数为true
father.addEventListener('click', function() {
alert('father');
}, true);
// 给document注册单击事件,第3个参数为true
document.addEventListener('click', function() {
alert('document');
}, true)
</script>
2.5 事件对象
事件发生后,跟事件相关的一系列信息数据的集合都放到这个对象里面,这个对象就是事件对象。
比如:
- 谁绑定了这个事件。
- 鼠标触发事件的话,会得到鼠标的相关信息,如鼠标位置。
- 键盘触发事件的话,会得到键盘的相关信息,如按了哪个键。
使用:
事件对象兼容性处理:
在 IE6~8 中,浏览器不会给方法传递参数,如果需要的话,需要到 window.event 中获取查找。
解决: e = e || window.event;
事件对象的属性和方法:
事件对象属性方法 | 说明 |
---|---|
e.target | 返回触发事件的对象 标准 |
e.srcElement | 返回触发事件的对象 非标准,ie678使用 |
e.type | 返回事件的类型 如click,mouseover等 |
e.cancelBubble | 该属性阻止冒泡 非标准,ie678使用 |
e.returnValue | 该属性阻止默认事件(默认行为) 非标准,ie678使用 如不让链接跳转 |
e.preventDafault() | 该方法阻止默认事件(默认行为) 标准 如不让链接跳转 |
e.stopPropagation() | 阻止冒泡 标准 |
2.6 阻止默认行为
<a href="http://www.baidu.com">百度</a>
<script>
// 2. 阻止默认行为 让链接不跳转
var a = document.querySelector('a');
a.addEventListener('click', function(e) {
e.preventDefault(); // dom 标准写法
});
// 3. 传统的注册方式
a.onclick = function(e) {
// 普通浏览器 e.preventDefault(); 方法
e.preventDefault();
// 低版本浏览器 ie678 returnValue 属性
e.returnValue = false;
// 我们可以利用return false 也能阻止默认行为 没有兼容性问题
return false;
}
</script>
2.7 阻止事件冒泡
- 标准写法:
e.stopPropagation()
- 非标准写法(ie678):
e.cancelBubble = true;
解决兼容性问题:
2.8 事件委托
事件委托的原理:给父元素注册事件,利用事件冒泡,当子元素的事件触发,会冒泡到父元素,然后去控制相应的子元素。
<ul>
<li>知否知否,点我应有弹框在手!</li>
<li>知否知否,点我应有弹框在手!</li>
<li>知否知否,点我应有弹框在手!</li>
<li>知否知否,点我应有弹框在手!</li>
<li>知否知否,点我应有弹框在手!</li>
</ul>
<script>
// 事件委托的核心原理:给父节点添加侦听器, 利用事件冒泡影响每一个子节点
var ul = document.querySelector('ul');
ul.addEventListener('click', function(e) {
// e.target 这个可以得到我们点击的对象
e.target.style.backgroundColor = 'pink';
})
</script>
3. 常用的鼠标事件
鼠标事件 | 触发条件 |
---|---|
onclick | 鼠标点击左键触发 |
onmouseover | 鼠标经过触发 |
onmouseout | 鼠标离开触发 |
onfocus | 获得鼠标焦点触发 |
onblur | 失去鼠标焦点触发 |
onmousemove | 鼠标移动触发 |
onmouseup | 鼠标弹起触发 |
onmousedown | 鼠标按下触发 |
3.1 禁止选中文字和禁止右键菜单
<body>
我是一段不愿意分享的文字
<script>
// 1. contextmenu 我们可以禁用右键菜单
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})
// 2. 禁止选中文字 selectstart
document.addEventListener('selectstart', function(e) {
e.preventDefault();
})
</script>
</body>
3.2 鼠标事件对象
鼠标事件对象 | 说明 |
---|---|
e.clientX | 返回鼠标相对于浏览器窗口可视的X坐标 |
e.clientY | 返回鼠标相对于浏览器窗口可视的Y坐标 |
e.pageX | 返回鼠标相对于文档页面的X坐标 IE9+支持 |
e.pageY | 返回鼠标相对于文档页面的Y坐标 IE9+支持 |
e.screenX | 返回鼠标相对于电脑屏幕的X坐标 |
e.screenY | 返回鼠标相对于电脑屏幕的Y坐标 |
3.3 获取鼠标在页面的坐标
<script>
// 鼠标事件对象 MouseEvent
document.addEventListener('click', function(e) {
// 1. client 鼠标在可视区的x和y坐标
console.log(e.clientX);
console.log(e.clientY);
console.log('---------------------');
// 2. page 鼠标在页面文档的x和y坐标
console.log(e.pageX);
console.log(e.pageY);
console.log('---------------------');
// 3. screen 鼠标在电脑屏幕的x和y坐标
console.log(e.screenX);
console.log(e.screenY);
})
</script>
4. 常用的键盘事件
4.1 键盘事件
键盘事件 | 触发条件 |
---|---|
onkeyup | 某个键盘按键被松开时触发 |
onkeydown | 某个键盘按键被按下时触发 |
onkeypress | 某个键盘按键被按下时触发 不识别功能键,如ctrl、shift、箭头等 |
三个事件的执行顺序: keydown --> keypress --> keyup
4.2 键盘事件对象
键盘事件对象 属性 | 说明 |
---|---|
keyCode | 返回该键的ASCII码值 |
- onkeydown 和 onkeyup不区分字母大小写,但区分功能键
- onkeypress区分字母大小写,但不区分功能键