1 DOM 简介
文档对象模型（Document Object Model），处理可扩展标记语言的标准编程接口，通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）
- 文档：一个页面就是一个文档，DOM 中使用 document 表示
- 元素：页面中所有标签都是元素，DOM 中使用 element 表示
- 节点：页面中的所有内容（标签、属性、文本、注释等），DOM 中使用 node 表示
DOM 把以上内容都看作是对象
1.1 获取元素
-
根据 ID 获取
使用 getElementById() 获取带有 ID 的元素对象
<body> <div id="box1">你好</div> </body> <script> var box = document.getElementById('box1') console.log(box); // <div id="box1">你好</div> console.dir(box) </script>- 返回的是一个元素对象
- console.dir() 打印我们返回的元素对象，更好的查看里面的属性和方法
-
根据标签名
使用 getElementsByTagName() 获取带有指定标签名的对象的集合
var lis = document.getElementsByTagName('li') for(var i = 0; i < lis.length; i++) { console.log(lis[i]) } // 还可以获取某个元素（父元素）内部所指定标签名的子元素：element.getElementsByTagName('标签名') var lis = document.getElementsByTagName('ol') console.log(lis[0].getElementsByTagName('li')); //必须是单个对象（指明是哪一个元素对象）- 获取过来元素对象的集合，是以伪数组的形式存储的
- 想要打印里面的元素对象，可以采取遍历的方式
- 如果页面中没有这个元素，返回空的伪数组的形式
-
通过 HTML5 新增的方法
-
document.getElementsByClassName(‘类名’) 根据类名返回元素对象集合
console.log(document.getElementsByClassName('box')); -
document.querySelector(‘选择器’) 根据指定选择器返回第一个元素对象
console.log(document.querySelector('.box')) console.log(document.querySelector('#box1')) console.log(document.querySelector('ul')) -
document.querySelectorAll(‘选择器’) 根据指定选择器返回所有元素对象
-
特殊元素获取（body, html）
-
获取 body 元素：document.body
console.log(document.body); //<body>...</body> -
返回 html 对象：document.documentElement
console.log(document.documentElement); //<html><body>...</body><html>
-
-
1.2 事件基础
网页中每个元素都可以产生某些可以触发 Javascript 的事件，例如，可以再点击某个按钮时产生一个事件，然后去执行某些操作
<button id="btn">点击登录</button>
<script>
// 1. 获取事件源（事件被触发的对象）
var btn = document.getElementById('btn')
// 2. 绑定事件（如何触发，什么事件，比如鼠标点击？鼠标经过？还是键盘按下？）
// 3. 添加事件处理程序（通过函数赋值的方式）
btn.onclick = function(){
console.log('登录成功')
}
</script>
常见的鼠标事件
| 鼠标事件 | 触发事件 |
|---|---|
| onclick | 鼠标点击左键出触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onfocus | 获得鼠标焦点触发 |
| onblur | 失去鼠标焦点触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
1.3 操作元素
可以利用 DOM 操作元素改变元素里面的内容、属性等，注意以下都是属性
1.3.1 改变元素内容
-
element.innerText
从起始位置到终止位置的内容，会去除 html 标签，同时空格和换行也会去掉（不识别 html 标签）
<div> <p>你好</p> <span>一段文字</span> </div> <script> div = document.querySelector('div') p = div.querySelector('p') p.innerText = '<strong>你好</strong>' console.log(div.innerText); </script>
-
element.innerHtml
起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行（识别 html 标签）
<div> <p>你好</p> <span>一段文字</span> </div> <script> div = document.querySelector('div') p = div.querySelector('p') p.innerHTML = '<strong>你好</strong>' console.log(div.innerHTML); </script>
<button id="btn">获取当前时间</button>
<p></p>
<script>
var btn = document.querySelector('#btn')
btn.onclick = function() {
document.querySelector('p').innerText = getDate()
}
function getDate() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var arr = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
var week = arr[date.getDay()];
return '今天是：' + year + '年' + month + '月' + day + '日' + week;
}
</script>
1.3.2 常用元素的属性操作
- innerText、innerHTML 改变元素内容
- src、href
- id、alt、title
<!--点击按钮，切换图片-->
<button id="pic1">图片1</button>
<button id="pic2">图片2</button>
<img src="imgs/picture_1.jpg" alt="" title="草莓">
<script>
pic1 = document.getElementById('pic1')
pic1.onclick = function() {
img = document.querySelector('img')
img.src = 'imgs/picture_1.jpg'
img.title = '草莓'
pic1.innerText = '当前图片'
pic2.innerText = '图片2'
}
pic2 = document.getElementById('pic2')
pic2.onclick = function() {
img = document.querySelector('img')
img.src = 'imgs/picture_2.jpg'
img.title = '小猫'
pic2.innerText = '当前图片'
pic1.innerText = '图片1'
}
</script>
1.3.3 表单元素的属性操作
利用 DOM 可以操作一下表单元素的属性：
type、value、checked、selected、disabled
<!--显示/隐藏密码 -->
<label for="psw">密码</label>
<input type="password" name="" id="psw" class="inp">
<img src="imgs/eye.png" alt="" id="eye">
<script>
psw = document.getElementById('psw');
eye = document.getElementById('eye');
flag = 0;
eye.onclick = function(){
if(flag === 0) {
psw.type = 'text';
// this：当前调用者对象
this.src = 'imgs/eye-blocked.png';
flag = 1;
} else {
psw.type = 'password';
this.src = "imgs/eye.png";
flag = 0;
}
};
</script>
1.3.4 样式属性操作
JS 可以修改元素的大小、颜色、位置等样式。
- element.style 行内样式操作
- 里面的样式采取驼峰命名法，比如 fontSize、backgroundColor
- JS 修改 style 样式操作，产生的是行内样式，CSS 权重比较高
- element.className 类名样式操作
- 如果样式修改比较多，可以采取操作类名方式更改元素样式
- className 会直接更改元素的类名，会覆盖原先的类名
- 如果想要保留原先的类名，可以在类名值内设置多个类名
<!-- 密码验证框信息:失去焦点提示错误信息 -->
<label for="psw">密码</label>
<input type="password" name="" id="psw" class="inp">
<img src="imgs/eye.png" alt="" id="eye">
<span class="psw_error"><i class="error_icon"></i> 密码不少于6位数</span>
<!-- js 样式 -->
<script>
psw = document.getElementById('psw');
psw.onblur = function() {
psw_error = document.querySelector('.psw_error')
if(this.value.length < 6) {
this.style.color = 'pink';
psw_error.className = 'psw_error show'; // 保留原先类名
} else {
this.style.color = '#666';
psw_error.className = 'psw_error';
}
};
</script>
<!-- css 样式 -->
<style>
.psw_error {
display: none;
color: #d82217;
}
.show {
display: inline-block;
}
.error_icon{
display: inline-block;
height: 20px;
width: 20px;
background-color: pink;
background: url(../imgs/error.png) no-repeat;
/* 图片和文字垂直居中对齐 */
vertical-align: middle;
margin-top: -4px;
}
</style>
1.3.5 自定义属性的操作
- 获取属性值
- element.属性
- element.getAttribute(‘属性’);
- 前者获取内置属性值（元素本身自带的属性）、后者主要获得自定义的属性（程序员自定义的属性）
- 设置属性值
- element.属性 = ‘值’
- element.setAttribute(‘属性’, ‘值’)；
- 前者设置内置属性值，后者主要设置自定义的属性
- 移除属性
- element.removeAttribute(‘属性’)
<div id="pink" index='1'></div>
<script>
div = document.querySelector('div');
// 获取属性值
console.log(div.id); // pink
console.log(div.getAttribute('index')); // 1
// 设置属性值
div.id = 'purple'
div.setAttribute('class', 'blue') // 这里面写的就是 class，不是 className
// 移除属性
console.log(div);
div.removeAttribute('index')
console.log(div);
</script>
1.3.6 H5 自定义属性
自定义属性目的：为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中
自定义属性获取是通过 getAttribute(‘属性’) 获取的
但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性，所以 H5 给我们新增了自定义属性：
- H5 规定自定义属性以 data- 开头
- <div data-index=‘2’></div>
- JS 设置：element.setAttribute(‘data-index’, 2)
- 获取 H5 自定义属性
- 兼容性获取：element.getAttribute(‘data-index’);
- H5 新增 element.dataset.index 或者 element.dataset[‘index’] （ie 11才支持）
<div data-index='2' data-list-name='andy'></div>
<script>
var div = document.querySelector('div')
console.log(div.getAttribute('data-index'))
// dataset 是一个集合，里面存放了所有以 data 开头的自定义属性
console.log(div.dataset); // DOMStringMap {index: '2', listName: 'andy'}
console.log(div.dataset.index)
console.log(div.dataset['index'])
// 如果自定义属性里面有多个-链接的单词，获取的时候采用 驼峰命名法
console.log(div.dataset.listName);
</script>
1.4 tab 栏切换（重点案例）
当鼠标点击上面相应的选项卡（tab）时，下面内容跟随变化
- 核心思路：给上面的 tab_list 里面所有的 li 添加一个自定义属性，属性值从 0 开始编号，然后将对应编号的 item 显示出来
<style>
ul li {
list-style: none;
}
.tab_list {
height: 45px;
}
.tab_list ul li {
float: left;
height: 45px;
padding: 0 20px;
line-height: 45px;
}
.tab_list .current {
background-color: bisque;
}
.tab_con .item {
display: none;
}
</style>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价</li>
<li>手机社区</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;">商品介绍模块内容</div>
<div class="item">规格与包装模块内容</div>
<div class="item">售后保障模块内容</div>
<div class="item">商品评价模块内容</div>
<div class="item">手机社区模块内容</div>
</div>
</div>
<script>
var tab_list = document.querySelector('.tab_list')
var lis = tab_list.querySelectorAll('li')
var items = document.querySelectorAll(('.item'))
console.log(lis);
for(var i = 0; i < lis.length; i++) {
// 给 li 设置索引号
lis[i].setAttribute('index', i)
lis[i].onclick = function() {
for(var i = 0; i < lis.length; i++) {
lis[i].className = ''
}
this.className = 'current'
var index = this.getAttribute('index')
for(var j = 0; j < items.length; j++) {
items[j].style.display = 'none'
}
items[index].style.display = 'block'
}
}
</script>
</body>
1.5 节点操作
获取元素有两种方式：
- 利用 DOM 提供的方法获取元素
- document.getElmentById()
- document.getElementsByTagName()
- document.querySelector 等
- 逻辑性不强、繁琐
- 利用节点层级关系获取元素
- 利用父子兄弟节点关系获取元素
- 逻辑性强，但是兼容性稍差
1.5.1 节点概述
网页中所有内容都是节点（标签、属性、文本、注释等），在 DOM 中，节点用 node 来表示
一般来说，节点至少拥有 nodeType（节点类型）、nodeName（节点名称）和 nodeValue（节点值）这三个基本属性
- 元素节点 nodeType 为 1
- 属性节点 nodeType 为 2
- 文本节点 nodeType 为 3 （文本节点包含文字、空格、换行等）
在实际开发中，节点操作主要操作的是元素节点
1.5.2 节点层级
-
父级节点：node.parentNode
- parentNode 属性可以返回某节点的父节点，最近的一个父节点（亲爸爸）
- 如果指定的节点没有父节点就返回 null
<div> <ul> <li class="li"></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <script> var li = document.querySelector('.li') console.log(li.parentNode); // ul </script> -
子节点
-
parentNode.childNodes
-
返回值里包含了所有的子节点：元素节点和文本节点等
-
如果想要获得里面的元素节点，需要进行专门的处理
var ul = document.querySelector('ul') lis = ul.childNodes console.log(lis); // NodeList(11) [text, li.li, text, li, text, li, text, li, text, li, text] // 进行处理 for(var i = 0; i < lis.length; i++) { if(lis[i].nodeType == 1) { // 元素节点的 nodeType=1、文本节点的 nodeType=3 console.log(lis[i]); } }
-
-
parentNode.children
- 只读属性，返回所有的子元素节点，他只返回子元素节点，其余节点不返回（重点掌握）
var ul = document.querySelector('ul') lis = ul.children console.log(lis); // HTMLCollection(5) [li.li, li, li, li, li] -
**parentNode.firstChild **和 parentNode.lastNode
- 返回第一个和最后一个子节点（子节点里包含所有的节点）
var ul = document.querySelector('ul') console.log(ul.firstChild); // #text console.log(ul.lastChild); // #text -
parentNode.firstElementChild 和 parentNode.lastElementChild
- 有兼容性问题，IE9 以上才支持
var ul = document.querySelector('ul') console.log(ul.firstElementChild); // li.li console.log(ul.lastElementChild); // li
实际开发中，firstChild 和 lastChild 包含其他节点，操作不方便，而 firstElementChild 和 lastElementChild 又有兼容性问题，所以一般使用 parentNode.children[0]、parentNode.children[parentNode.children.length - 1]
var ul = document.querySelector('ul') console.log(ul.children[0]); // li.li console.log(ul.children[ul.children.length - 1]); //li -
-
兄弟节点
- node.nextSibling 返回当前元素的下一个兄弟节点，找不到就返回 null（包含所有节点）
- node.previousSlinling 返回当前元素的上一个兄弟节点，找不到就返回 null（包含所有节点）
- node.nextElementSibling 返回当前元素下一个兄弟元素节点，找不到返回 null（存在兼容性问题，IE9 以上才支持）
- node.previousElementSibling 返回当前元素下一个兄弟元素节点，找不到返回 null（存在兼容性问题，IE9 以上才支持）
var div = document.querySelector('div'); console.log(div.nextSibling); // #text console.log(div.previousSibling); // #text console.log(div.nextElementSibling); // <span>span</span> console.log(div.previousElementSibling); // <p>p</p>如何解决兼容性问题？
-
自己封装一个兼容性的函数
function getNextElementSinling(element) { var e = element; while(e = e.nextSibling) { if(e.nodeType == 1) { return e; } } return null; }
1.5.3 创建和添加节点
-
创建节点
document.creatElement(‘tagName’)
-
添加节点
- node.appendChild(child) 将一个节点添加到指定夫节点的子节点列表末尾，类似 CSS 里的 after
- node.insertBefore(child, 指定元素) 将一个节点添加到父节点的指定节点前面，类似 CSS 里的 before
<ul>
<li>旧元素</li>
</ul>
<script>
ul = document.querySelector('ul')
// 创建节点元素
lili = document.createElement('li')
lili.innerHTML = '新加的元素'
// 添加节点
ul.appendChild(lili)
// 创建节点元素
li = document.createElement('li')
// 添加节点
ul.insertBefore(li, ul.children[0]) // 这里用父节点的第几个孩子的语法
</script>
1.5.4 删除节点
node.removeChild(child)
1.5.5 复制节点
**node.cloneNode() **返回调用该方法节点的一个副本
- 如果括号参数为空或者为 false，只克隆复制节点本身，不克隆里面的子节点（浅拷贝）
- 如果括号参数为 true，会复制节点本身以及里面所有的子节点（深度拷贝）
<ul>
<li>nihao<a href="#">lianjie</a></li>
</ul>
<script>
var ul = document.querySelector('ul');
var li = ul.children[0];
ul.appendChild(li.cloneNode(true));
ul.appendChild(li.cloneNode());
</script>
运行结果：
1.5.6 三种动态创建元素的区别
- document.write()
- 直接将内容写入到页面的内容流，但是文档流执行完毕，他会导致页面全部重绘
- element.innerHTML
- 将内容写到某个 DOM 节点里，不会导致页面全部重绘
- 创建多个元素效率更高（采取数组形式拼接，不要拼接字符串），结构稍微复杂
- element.creatElement()
- 创键多个元素效率稍低，但是结构清晰
不同浏览器下，innerHTML 效率要比 creatElement 高
1.6 下拉菜单（案例）
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
li {
float: left;
list-style: none;
height: 35px;
line-height: 35px;
}
a {
display: inline-block;
height: 35px;
padding: 0 13px;
text-decoration: none;
color: #606060;
}
a:hover {
background-color: #edeef0;
color: #fc8b15;
}
.nav li {
position: relative;
}
.nav ul {
position: absolute;
top: 35px;
left: 0;
display: none;
}
.nav ul li {
float: none;
width: 64px;
text-align: center;
}
</style>
</head>
<body>
<div>
<ul class="nav">
<li><a href="#">登录</a></li>
<li>
<a href="#">微博</a>
<ul class="first">
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
<li>
<a href="#">博客</a>
<ul class="second">
<li>博客评论</li>
<li>未读提醒</li>
</ul>
</li>
<li>
<a href="#">邮箱</a>
<ul class="third">
<li>免费邮箱</li>
<li>VIP邮箱</li>
<li>企业邮箱</li>
<li>新浪邮箱客户端</li>
</ul>
</li>
<li><a href="#">网址导航</a></li>
</ul>
</div>
<script>
var nav = document.querySelector('.nav');
lis = nav.children
for(var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function() { // 鼠标经过
this.children[1].style.display = 'block';
}
lis[i].onmouseout = function() { // 鼠标移开
this.children[1].style.display = 'none';
}
}
</script>
</body>
1.7 发布留言（案例）
- 在给文本域里面的值赋值给 li 时，多添加一个删除的链接
- 阻止链接跳转需要添加 javascript:void(0); 或者 javascript:;
<textarea name="" id="" cols="30" rows="10"></textarea>
<button>发布留言</button>
<ul></ul>
<script>
var button = document.querySelector('button');
var textarea = document.querySelector('textarea');
var ul = document.querySelector('ul');
button.onclick = function() {
var value = textarea.value;
if(value == '') {
alert('发布的留言不能为空哦~~')
} else {
var li = document.createElement('li');
li.innerHTML = value + '<a href="javascript:;">删除</a>';
// ul.appendChild(li); // 新的留言在后面
ul.insertBefore(li, ul.children[0]); // 新的留言在前面
li.children[0].onclick = function() {
ul.removeChild(li); // 删除节点
}
}
}
</script>
1.8 动态生成表格（案例）
- 模拟数据：定义好数据，在 js 中采取对象形式存储
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>总成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
var data = [{
name: 'zhangsan',
age: 19,
grade: 279
}, {
name: 'lisi',
age: 19,
grade: 267
}, {
name: 'wangwu',
age: 20,
grade: 284
}];
var tbody = document.querySelector('tbody');
for (var i = 0; i < data.length; i++) {
// 创建 tr 行
var tr = document.createElement('tr');
tbody.appendChild(tr);
for (var k in data[i]) { // 用 for...in 循环，这里 k 取到的是属性名
// 创建单元格
var td = document.createElement('td');
td.innerHTML = data[i][k];
tr.appendChild(td);
}
// 额外增加删除操作单元格
var ad = document.createElement('td');
ad.innerHTML = '<a href="javascript:;">删除</a>';
tr.appendChild(ad);
// 删除操作
ad.children[0].onclick = function() {
// 点击 a 删除当前 a 所在的行（链接父节点的父节点）
tbody.removeChild(this.parentElement.parentElement);
};
}
</script>
</body>
1.9 DOM 重点核心
关于 DOM 操作，主要针对的是元素的操作，主要有创建、增、删、改、查、属性操作、事件操作。
-
创建
- document.write
- innerHTML
- creatElement
-
增
- appendChild
- insertBefore
-
删
- removeChild
-
改
- 修改元素属性：src、href、title 等
- 修改普通元素内容：innerHTML、innerText
- 修改表单元素：value、type、disabled 等
- 修改元素样式：tyle、className
-
查
- DOM 提供的 API 方法：getElementById、getElementsByTagName 古老用法不太推荐
- H5 提供的新方法：querySelector、querySelectorAll 提倡
- 利用节点操作获取元素：父（parentNode）、子（children）、兄（previousElementSibling、nextElementSibling）
-
属性操作（主要针对自定义属性）
- setAttribute：设置 dom 属性值
- getAttribute：获取 dom 属性值
- removeAttribute 移除属性
-
事件操作（事件源.事件类型 = 事件处理程序）
鼠标事件 触发事件 onclick 鼠标点击左键出发 onmouseover 鼠标经过触发 onmouseout 鼠标离开触发 onfocus 获得鼠标焦点触发 onblur 失去鼠标焦点触发 onmousemove 鼠标移动触发 onmouseup 鼠标弹起触发 onmousedown 鼠标按下触发
2 高级事件
2.1 注册事件（绑定事件）
给元素添加事件，称为注册事件和绑定事件。
注册事件有两种方式：传统方法和方法监听注册方式
-
传统注册方式——利用 on 开头的事件，例如 onclick
btn.onclick = function() {}
- 注册事件的唯一性（同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数）
-
方法监听注册方式——addEventListener()（W3 推荐）
eventTarget.addEventListener(type, listener, useCapture) 将指定的监听器注册到 eventTarget 上，当该对象触发指定的事件时，就会执行事件处理函数
type：事件类型字符串，像 click、mouseover（这里不带 on）
listener：事件处理参数，事件发生时，会调用这个监听函数
useCapture：可选参数，默认为 false，处于冒泡阶段，设为 true 时，处于事件捕获阶段
- IE9 之前不支持这个方法，可以使用 attachEvent() 代替
- 同一个元素同一个事件可以注册多个监听器
- 按注册顺序依次执行
-
事件监听方式——attachEvent
eventTarget.attachEvent(eventNameWithOn, callback)
eventNameWithOn：事件类型字符串，如 onclick、onmousrover，这里要带 on
callback：事件处理函数，当目标触发事件时回调函数被调用
- 支持 IE9 以前的版本
var btn = document.querySelector('button');
// 传统方式（只弹出 hello）
btn.onclick = function() {
alert('你好~~');
};
btn.onclick = function() {
alert('hello~~');
};
// 监听注册方法（两个都弹出）
btn.addEventListener('click', function() { // 事件类型是字符串，需要加引号，并且不带 on
alert('你好~~');
})
btn.addEventListener('click', function() {
alert('hello~~');
})
// attachEvent 事件监听
btn.attachEvent('onclick', function() {
alert('hello~~');
})
-
注册事件兼容性解决方案
function addEventListener(element, eventName, fn) { // 判断当前浏览器是否支持 addEventListener 方法 if(element.addEventListener) { element.addEventListener(eventName, fn); } else if(element.attachEvent) { element.attachEvent('on'+eventName, fn); } else { // 相当于 element.onclick = fn; element['on' + eventName] = fn; } }
2.2 删除事件（解绑事件）
-
传统注册方式
eventTarget.onclick = null;
-
方法监听注册方式
① eventTarget.removeEventListener(type, listener, useCapture)
② eventTarget.detachEvent(eventNameWithOn, callback);
-
删除事件兼容性解决方案
function removeEventListener(element, eventName, fn) { // 判断当前浏览器是否支持 addEventListener 方法 if(element.removeEventListener) { element.removeEventListener(eventName, fn); } else if(element.detachEvent) { element.detachEvent('on'+eventName, fn); } else { // 相当于 element.onclick = fn; element['on' + eventName] = null; } }
2.3 DOM 事件流
事件流描述的是从页面接收事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播，这个传播的过程就是 DOM 事件流
DOM 事件流分为了 3 个阶段：
- 捕获阶段：由 DOM 最顶层节点开始，然后逐级向下传播到最具体的元素接收的过程
- 当前目标阶段
- 冒泡阶段：事件由最具体的元素接收，然后逐级向上传播到 DOM 最顶层结点的过程
以 div 注册了点击事件为例：
btn = document.querySelector('button')
// 捕获阶段（document -> html -> body -> button）
btn.addEventListener('click', function() {
alert('button');
}, true);
document.body.addEventListener('click', function() {
alert('body');
}, true);
// 冒泡阶段（button -> body -> html -> document）
btn.addEventListener('click', function() {
alert('button');
});
document.body.addEventListener('click', function() {
alert('body');
})
- JS 代码中只能执行捕获或者冒泡其中的一个阶段
- onclick 和 attachEvent 只能得到冒泡阶段
- addEventListener 第三个参数是 true 时，处于捕获阶段，否则处于冒泡阶段（实际开发中，更关注的是事件冒泡阶段）
- 有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave
2.4 事件对象
eventTarget.onclick = function(event) {}
eventTarget.addEventListener(‘click’, function(event) {})
- 事件发生后，跟事件相关的一系列信息数据的集合，都放到这个事件对象 event 里面，他有很多属性和方法：
- 谁绑定了这个事件
- 鼠标触发事件的话，会得到鼠标的相关信息，比如鼠标的位置
- 键盘事件触发的话，会得到键盘的相关信息，比如按了哪个键
- 这个 event 是个形参，系统帮我们设定为事件对象，不需要传递实参过去，当我们注册事件时，event 对象会被系统自动创建，并依次传递给事件处理函数
- 事件对象可以我们自己命名，像 event、e、evt 都是可以的
- 事件对象的兼容性方案：e = e | window.event;（在 IE6~8 中，需要用 window.event 获取事件对象）
事件对象的常见属性和方法
| 事件对象属性方法 | 说明 |
|---|---|
| e.target | 返回触发事件的对象（标准） |
| e.srcElement | 返回触发事件的对象（IE6~8 使用） |
| e.type | 返回事件的类型，click、mouseover 等 |
| e.canelBubble | 阻止冒泡（IE6~8 使用） |
| e.returnValue | 阻止默认事件（IE6~8 使用） |
| e.preventDefault() | 阻止默认事件（标准），像不让链接跳转 |
| e.stopPropagation() | 阻止冒泡（标准） |
-
e.target 返回的是触发事件的对象，this 返回的是绑定事件的对象
var ul = document.querySelector('ul'); ul.addEventListener('click', function(e) { console.log(this); // <ul>...</ul>（返回绑定事件的元素） console.log(e.target); // <li>...</li>（e.target 点击哪个元素，就返回哪个元素） console.log(e.currentTarget); // <ul>...</ul>（返回绑定事件的元素，和 this 相似） }); -
阻止默认行为（事件），例如让链接不跳转、提交按钮不提交等
var a = document.querySelector('a'); a.addEventListener('click', fn); function fn(e) { e.preventDefault(); // dom 标准写法 }
2.5 阻止事件冒泡
事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到 DOM 最顶层节点
阻止事件冒泡
-
标准写法：利用事件对象里面的 stopPropagation() 方法
e.stopPropagation()
-
非标准写法：IE6~8 利用事件对象 cancelBubble 属性
e.cancelBubble = true
-
兼容性解决方案
if(e && e.stopPropagation) { e.stopPropagation(); } else { Window.event.cancelBubble = true; }
2.6 事件委托（代理、委派）★
事件冒泡本身的特性，会带来坏处，也会带来好处，例如：一个班级有100个学生，每个学生有一个快递，如果快递员一个一个送的话，会花费较长的时间，同时学生在领取快递的时候，也需要排队等待领取，也会花费较长时间
解决方案：快递员将学生快递全部委托给班主任，然后同学们自行领取就可以
程序中也有这样的场景，当 ul 里有很多 li，当我们需要点击每个 li 的时候都让他改变文字颜色，如果按照以前的写法，给每个 li 都注册事件，这样会很繁琐，并且访问 DOM 的次数越多，就越会延长整个页面的交互就绪时间
事件委托：也称事件代理，在 jQuery 里面称为事件委派
事件委托原理：不是每个子节点都单独设置事件监听器，而是事件监听器设置在他们的父节点上，然后利用冒泡原理影响设置每个子节点
例如，在以上案例中，我们给 ul 注册点击事件，然后利用事件对象的 target 来找到当前点击的 li，因为点击 li 后，事件会冒泡到 ul 上，ul 有注册事件，就会触发事件监听器
事件委托的作用：
我们之操作了一次 DOM，提高了程序的性能
2.7 常用的鼠标事件
-
常见的鼠标事件
鼠标事件 触发事件 onclick 鼠标点击左键出发 onmouseover 鼠标经过触发 onmouseout 鼠标离开触发 onfocus 获得鼠标焦点触发 onblur 失去鼠标焦点触发 onmousemove 鼠标移动触发 onmouseup 鼠标弹起触发 onmousedown 鼠标按下触发 -
禁止鼠标右键菜单：contextmenu 主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单
// 禁用右键菜单 var p = document.querySelector('p'); p.addEventListener('contextmenu', function(e) { e.preventDefault(); }) -
禁止鼠标选中：selectstart 开始选中
// 禁止选中文字 var p = document.querySelector('p'); p.addEventListener('selectstart', function(e) { e.preventDefault(); })
-
-
鼠标事件对象
鼠标事件对象 说明 e.clientX 返回鼠标相对于浏览器窗口可视区的 X 坐标 e.clientY 返回鼠标相对于浏览器窗口可视区的 Y 坐标 e.pageX 返回鼠标相对于文档页面的 X 坐标（IE9+ 支持） e.pageY 返回鼠标相对于文档页面的 Y 坐标（IE9+ 支持） e.screenX 返回鼠标相对于电脑屏幕的 X 坐标 e.screenY 返回鼠标相对于电脑屏幕的 Y 坐标
<!-- 图片随鼠标移动案例 -->
<img src="imgs/success.png" alt="">
<script>
img = document.querySelector('img');
// mousemove 只要鼠标移动，就会触发事件
document.addEventListener('mousemove', function(e) {
// 一定要记住给 left 和 top 添加 px 单位
img.style.left = e.pageX + 'px';
img.style.top = e.pageY + 'px';
})
</script>
2.8 常见的键盘事件
-
常见的键盘事件
键盘事件 触发条件 onkeyup 某个键盘按键被松开时触发 onkeydown 某个键盘按键被按下时触发 onkeypress 某个键盘按键被按下时触发（但是不识别功能键，像 ctrl、shift、箭头等） - 如果使用 addEventListener ，就不需要加 on
- 三个时间的执行顺序是：keydown – keypress – keyup
-
键盘事件对象
键盘事件对象属性 说明 key 返回该建的值 keyCode 返回该键的 ASCII 值 - onkeydown 和 onkeyup 不区分大小写，onkeypress 区分大小写，在实际开发中，更多地使用 keydown 和 keyup，它们能识别所有的键（包括功能键），而 keypress 不识别功能键，但是 keyCode 属性能区分大小写，返回不同的 ASCII 值
2.9 模拟京东快递查询案例
- keydown 和 keypress 在文本框里面的特点：当这两个事件触发时，文字还没有落入文本框中
- keyup 事件触发时，文字已经落入文本框里面了
<div class="con"></div>
<input type="text" class="jd"/>
<script>
con = document.querySelector('.con');
jd = document.querySelector('.jd');
// 用户按下 s键，输入框获得焦点
document.addEventListener('keyup', function(e) {
if(e.keyCode === 83) {
jd.focus(); // 获得焦点：使用 js 里面的 focus() 方法
}
})
jd.addEventListener('keyup', function(e) {
if(this.value == '') {
con.style.display = 'none';
} else {
con.style.display = 'block';
con.innerHTML = this.value;
}
})
// 失去焦点时，隐藏 con 盒子
jd.addEventListener('blur', function() {
con.style.display = 'none';
})
// 获得焦点时，显示 con 盒子
jd.addEventListener('focus', function() {
if(this.value !== '') {
con.style.display = 'block';
}
})
</script>
扫一扫
7701
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
