读书使人充实，讨论使人机智，笔记使人准确…。凡有所学，皆成性格。
———— （英国）培根
文章目录
API与Web API
API（Application Programming Interface，应用程序接口）是一些预先定义的接口（如函数、HTTP接口），或指软件系统不同组成部分衔接的约定。用来提供应用程序与开发人员基于某软件或硬件得以访问的一组例程，而又无需访问源码，或理解内部工作机制的细节。
Web API是浏览器提供的一套操作浏览器功能和页面元素的API(BPM和DOM)
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口
通过这些DOM接口可以改变网页的内容，结构样式
文档：一个页面就是一个文档，DOM中使用document表示
元素：页面中的所有标签都是元素，DOM中使用 element表示
节点：网页中的所有内容都是节点（标签、属、文本、注释等），DOM中使用node表示
DOM把以上内容都看做对象
获取元素
| 方法 | 语法 |
|---|---|
| 根据id获取 | getElementById() |
| 根据签名获取 | getElementsByTagName()（返回对象的集合） |
| 通过HTML5新增的方法获取 | |
| 特殊元素获取 |
getElementById()
<body>
<div id="time">2021-8-25</div>
<script>
var timer = document.getElementById('time')
//console.dir打印属性和方法
console.dir(timer)
</script>
</body>
getElementsByTagName()
<body>
<ul>
<li>我想到没人认识的地方</li>
<li>我想到没人认识的地方</li>
<li>我想到没人认识的地方</li>
<li>我想到没人认识的地方</li>
</ul>
<script>
var list = document.getElementsByTagName('li');
console.log(list);
console.log(list[2]);
</script>
</body>
通过HTML5新增的方法获取
<body>
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<script>
//根据类名获得某些元素
var boxs = document.getElementsByClassName('box')
//返回指定选择器的第一个元素对象
var firstbox = document.querySelector('.box')
//返回指定选择器的所有元素对象
var firstbox = document.querySelectorAll('.box')
</script>
</body>
获取body和html元素
<script>
//获取body元素
var bodyEle = document.body;
console.log(bodyEle);
console.dir(bodyEle);
//获取html元素
var htmlEle = document.documentElement;
console.log(htmlEle);
</script>
常见的鼠标事件（事件源，事件类型，事件处理程序）
| 鼠标事件 | 触发条件 |
|---|---|
| onclick | 鼠标点击左键触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onfocus | 获得鼠标焦点触发 |
| onblur | 失去鼠标焦点触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
改变元素内容
element.innerText（不识别html标签）
从起始位置到终止位置的内容，但它可以去除html标签，同时空格和换行也会去掉
element.innerHTML（识别html标签）
从起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行
修改元素属性
<script>
//1.获取元素
var ldh = document.getElementById('ldh')
var zxy = document.getElementById('zxy')
var img = document.querySelector('img')
//2.注册事件
zxy.onclick = function () {
img.src = 'images/zxy.jpg'
img.title = '张学友'
}
ldh.onclick = function () {
img.src = 'images/ldh.jpg'
img.title = '刘德华'
}
</script>
我们可以通过JS修改元素的大小，颜色，位置等样式
element.style 行内样式操作
element.className 类名样式操作
JS是行内样式，css权重比较高
仿淘宝关闭二维码案例
1.核心思路：利用样式的显示和隐藏完成，display：none隐藏元素 display：block显示元素
2.点击按钮，就然这个二维码隐藏起来
<script>
//1.获取元素
var btn = document.querySelector('.close-btn')
var box = document.querySelector('.box')
//2.注册事件
btn.onclick = function () {
btn.style.display = 'none'
}
</script>
显示隐藏文本内容
案例分析
-
首先表单需要2个事件，获得焦点onfocus，失去焦点onblur
-
如果获得焦点，判断表单里面内容是否为默认文字，如果默认文字，就清空表单内容
-
如果失去焦点，判断表单里面内容是否为空，如果为空，则表单内容改为默认文字
<style type="text/css">
input {
color: #999;
}
</style>
<body>
<input type="text" name="" id="" value="手机" />
<script type="text/javascript">
//获取元素
var text = document.querySelector('input');
//注册事件 获得焦点事件 onfocus
text.onfocus = function() {
console.log('得到了焦点');
if (this.value === '手机') {
this.value = '';
}
//获得焦点需要把文本框里面的文字颜色变黑
this.style.color = '#333'
}
//注册事件 失去焦点事件 onblur
text.onblur = function() {
console.log('失去了焦点');
if (this.value === '') {
this.value = '手机';
}
//失去焦点需要把文本框里面的文字颜色还原
this.style.color = '#999'
}
</script>
</body>
使用className修改样式属性
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: pink;
}
.change{
background-color: purple;
color: #fff;
font-size: 25px;
margin-top: 100px;
}
</style>
<body>
<div class="first">文本</div>
<script type="text/javascript">
//1.使用element.style 获得修改元素样式
var test = document.querySelector('div');
test.onclick = function() {
// this.style.backgroundColor = 'purple';
// this.style.color='#fff';
// this.style.fontSize='25px';
// this.style.marginTop='80px';
// ------------------------------
//让我们当前的类名改为change
// this.className='change'; //会覆盖掉原先的类名
// 如果保留原先的类名
this.className='first change';
}
</script>
</body>
密码框验证信息提示
案例分析
- 首先判断的事件是表单失去焦点onblur
- 如果输入正确则提示正确的信息颜色为绿色小图标变化
- 如果输入不是6到16位，则提示错误信息颜色为红色小图标变化
- 因为里面变化样式较多，我们采取className修改样式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GAKkofJl-1635388653111)(gister1.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bEFfSszS-1635388653113)(gister2.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hw8vg7aN-1635388653116)(gister3.png)]
<style>
div {
width: 600px;
margin: 100px auto;
}
.message {
display: inline-block;
font-size: 12px;
color: #999;
background: url(素材/mess.png) no-repeat left center;
padding-left: 20px;
}
.wrong {
color: red;
background-image: url(素材/wrong.png);
}
.right {
color: green;
background-image: url(素材/right.png);
}
</style>
<body>
<div class="register">
<input type="password" class="ipt" />
<p class="message">请输入6~16位密码</p>
</div>
<script type="text/javascript">
//1.获取元素
var ipt = document.querySelector('.ipt');
var message = document.querySelector('.message');
//2.注册事件 失去焦点
ipt.onblur = function() {
//根据表单里面值的长度
if (this.value.length < 6 || this.value.length > 16) {
message.className = 'message wrong';
message.innerHTML = '您输入的位数不对要求6~16'
} else {
message.className = 'message right';
message.innerHTML = '输入正确'
}
}
</script>
</body>
操作元素是DOM的核心内容
排他思想（算法）
-
1.所有元素全部清除样式
-
2.给当前元素设置样式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FdFgmrLX-1635388653118)(button.png)]
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script type="text/javascript">
//1.获取所有按钮
var btns = document.getElementsByTagName('button');
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
//先把所有的按钮背景颜色去掉
for (var i = 0; i < btns.length; i++) {
btns[i].style.backgroundColor = '';
}
//然后才让当前的元素背景为pink
this.style.backgroundColor = 'pink';
}
}
</script>
</body>
自定义属性操作
获取属性值-----区别
element.属性 获取内置属性值（元素本身自带的属性）
element.getAttribute(‘属性’) 主要获得自定义的属性（标准）程序员自定义的属性
设置属性值
element.属性 = ‘值’ 设置内置属性值（相当于给属性重新赋值）
element.getAttribute(‘属性’， ‘值’) 主要获得自定义的属性（标准）程序员自定义的属性
H5自定义属性
自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中，
自定义属性获取是通过getAttribute（＇属性＇）获取。
但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。H5给我们新增了自定义属性：
1.设置H5自定义属性
H5规定自定义属性data-开头做为属性名并且赋值。
比如 <div data-index="1＂><./div>
或者使用JS设置
element.setAttribute（＇data-index＇，2）
获取H5自定义属性
1.兼容性获取elementgetAttribute（‘data-index’）
2.H5新增 element.datasetindex 或者 element.dataset[‘index’] ie11才开形始支持
<div getTime="20" data-index="2" data-list-name="andy"></div>
<script>
var div = document.querySelector('div');
// console.log(div.getTime);
console.log(div.getAttribute('getTime'));
div.setAttribute('data-time', 20);
console.log(div.getAttribute('data-index'));
console.log(div.getAttribute('data-list-name'));
// h5新增的获取自定义属性的方法 它只能获取data-开头的
// dataset 是一个集合里面存放了所有以data开头的自定义属性
console.log(div.dataset);
console.log(div.dataset.index);
console.log(div.dataset['index']);
// 如果自定义属性里面有多个-链接的单词，我们获取的时候采取 驼峰命名法
console.log(div.dataset.listName);
console.log(div.dataset['listName']);
</script>
节点操作
获取元素通常使用两种方式
1.利用D0M提供的方法获取元素
document.getElementByld()
document.getElementsByTagName()
document.querySelector 等
逻辑性不强、繁琐
2.利用节点层级关系获取元素
利用父子兄节点关系获取元素
逻辑性强，但是兼容性稍差
这两种方式都可以获取元素节点，我们后面都会使用，但是节点操作更简单
节点层级
利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系
1.父级节点
node.parentNode
-
node.parentNode属性可返回某节点的父节点，注意是最近的一个父亲节点
-
如果指定的节点没有父节点则返回null
<div class="demo">
<div class="box">
<span class="erweima">×</span>
</div>
</div>
<script>
// 1. 父节点 parentNode
var erweima = document.querySelector('.erweima');
// var box = document.querySelector('.box');
// 得到的是离元素最近的父级节点(亲爸爸) 如果找不到父节点就返回为 null
console.log(erweima.parentNode);
</script>
2.子节点
1.parentNode.childNodes（标准）
2.parentNode.children（非标准）
注意：返回值里面包含了所有的子节点，包括元素节点，文本节点等。
如果只想要获得里面的元素节点，则需要专门处理。所以我们一般不提倡使用childNodes
var ul=document.querySeleceor(ul);
for(vari=0;i<ul.childNodes.length;i++){
if(ul.childNodes[i].nodeType=1){
//ul.childNodes［i］是元素节点
console.log(ul.childNodes[i]);
}
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nJXhaveB-1635388653120)(jd1.png)]
<body>
<!-- 节点的优点 -->
<div>我是div</div>
<span>我是span</span>
<ul>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ul>
<ol>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ol>
<div class="demo">
<div class="box">
<span class="erweima">×</span>
</div>
</div>
<script>
// DOM 提供的方法（API）获取
var ul = document.querySelector('ul');
var lis = ul.querySelectorAll('li');
// 1. 子节点 childNodes 所有的子节点 包含 元素节点 文本节点等等
console.log(ul.childNodes);
console.log(ul.childNodes[0].nodeType);
console.log(ul.childNodes[1].nodeType);
// 2. children 获取所有的子元素节点 也是我们实际开发常用的
console.log(ul.children);
</script>
</body>
3.parentNode.firstChild
firstChild返回第一个子节点，找不到则返回null，同样，也是包含所有的节点
4.parentNode.lastChild
lastChild 返回最后一个子节点，找不到则返回null，同样，也是包含所有的节点
下面两个方法存在兼容性问题，IE9 以上才支持
5.parentNode.firstElementChild
firstElementChild 返回第一个子元素节点，找不到则返回null
6.parentNode.lastElementChild
lastElementChild 返回第一个子元素节点，找不到则返回null
<body>
<ol>
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
<li>我是li5</li>
</ol>
<script>
var ol = document.querySelector('ol');
// 1. firstChild 第一个子节点 不管是文本节点还是元素节点
console.log(ol.firstChild);
console.log(ol.lastChild);
// 2. firstElementChild 返回第一个子元素节点 ie9才支持
console.log(ol.firstElementChild);
console.log(ol.lastElementChild);
// 3. 实际开发的写法 既没有兼容性问题又返回第一个子元素
console.log(ol.children[0]);
console.log(ol.children[ol.children.length - 1]);
</script>
</body>
2.兄弟(姐妹)节点
1.node.nextSibling
nextSibling 返回当前元素的下一个兄弟节点，找不到则返回null，同样，也是包含所有的节点
2.node.previousSibling
previousSibling 返回当前元素的上一个兄弟节点，找不到则返回null，同样，也是包含所有的节点
下面两个方法存在兼容性问题，IE9 以上才支持
3.node.nextElementSibling
nextElementSibling 返回当前元素的下一个兄弟节点，找不到则返回null
4.node.previousElementSibling
previousElementSibling 返回当前元素的上一个兄弟节点，找不到则返回null
可以自己封装一个函数—解决兼容性问题
function getNextElementSibling(element) {
var el = element;
while (el = el.nextSibling) {
if (el.nodeType === 1) {
return el;
}
}
return null;
}
创建节点
document.createlement(‘tagName’)
document.createElement() 方法创建由tagName指定的HTML元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。
添加节点
1.node.appendChild (child)
node.appendChild () 方法将一个节点添加到指定父节点的子节点列表末尾，类似于CSS里面的after伪元素
2.node.insertBefore(child,指定元素)
node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面，类似于CSS里面的before伪元素
<body>
<ul>
<li>123</li>
</ul>
<script>
// 1. 创建节点元素节点
var li = document.createElement('li');
// 2. 添加节点 node.appendChild(child) node 父级 child 是子级 后面追加元素 类似于数组中的push
var ul = document.querySelector('ul');
ul.appendChild(li);
// 3. 添加节点 node.insertBefore(child, 指定元素);
var lili = document.createElement('li');
ul.insertBefore(lili, ul.children[0]);
// 4. 我们想要页面添加一个新的元素 ： 1. 创建元素 2. 添加元素
</script>
</body>
删除节点
node.removeChild (child)
node.removeChild () 方法从DOM中删除一个子节点，返回删除的节点
<body>
<button>删除</button>
<ul>
<li>熊大</li>
<li>熊二</li>
<li>光头强</li>
</ul>
<script>
// 1.获取元素
var ul = document.querySelector('ul');
var btn = document.querySelector('button');
// 2. 删除元素 node.removeChild(child)
// ul.removeChild(ul.children[0]);
// 3. 点击按钮依次删除里面的孩子
btn.onclick = function() {
if (ul.children.length == 0) {
this.disabled = true;
} else {
ul.removeChild(ul.children[0]);
}
}
</script>
</body>
复制节点（克隆节点）
node.cloneNode()
node.cloneNode() 方法返回调用该方法的节点的一个副本，也称为克隆节点/拷贝节点
注意：
如果括号参数为空或者为False，则是浅拷贝，即只克隆节点本身，不克隆里面的子节点
<body>
<ul>
<li>1111</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var ul = document.querySelector('ul');
// 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
// 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
var lili = ul.children[0].cloneNode(true);
ul.appendChild(lili);
</script>
</body>
5.8三种动态创建元素区别
-
document.write（）
-
element.innerHTML
-
document.createElement（）
区别
1.document.write是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
2.innerHTML是将内容写入某个DoM节点，不会导致页面全部重绘
3.innerHTML创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
4.createElement（）创建多个元素效率稍低一点点，但是结构更清晰
总结：不同浏览器下，innerHTML效率要比creatElement高
<body>
<button>点击</button>
<p>abc</p>
<div class="inner"></div>
<div class="create"></div>
<script>
// window.onload = function() {
// document.write('<div>123</div>');
// }
// 三种创建元素方式区别
// 1. document.write() 创建元素 如果页面文档流加载完毕，再调用这句话会导致页面重绘
// var btn = document.querySelector('button');
// btn.onclick = function() {
// document.write('<div>123</div>');
// }
// 2. innerHTML 创建元素
var inner = document.querySelector('.inner');
// for (var i = 0; i <= 100; i++) {
// inner.innerHTML += '<a href="#">百度</a>'
// }
var arr = [];
for (var i = 0; i <= 100; i++) {
arr.push('<a href="#">百度</a>');
}
inner.innerHTML = arr.join('');
// 3. document.createElement() 创建元素
var create = document.querySelector('.create');
for (var i = 0; i <= 100; i++) {
var a = document.createElement('a');
create.appendChild(a);
}
</script>
</body>
注册事件（绑定事件）
注册事件概述
给元素添加事件，称为注册事件或者绑定事件。
注册事件有两种方式：传统方式和方法监听注册方式
传统注册方式
-
利用on开头的事件onclick
-
<-button οnclick=“alert（hi～）”><-/button>
-
btn.οnclick=function ( ) {}
-
特点：注册事件的唯一性
-
同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
方法监听注册方式
-
W3C标准推荐方式
-
addEventListener() 它是一个方法
-
IE9之前的IE不支持此方法，可使用attachEvent()代替
-
特点：同一个元素同一个事件可以注册多个监听器
-
按注册顺序依次执行
addEventListener 事件监听方式
eventTarget.addEventListener（type，listener［，useCapture］）
eventTarget.addEventListener（）方法将指定的监听器注册到eventTarget（目标对像）上，当该对象触发指定的事件时，就会执行事件处理函数。
该方法接收三个参数：
type：事件类型字符串，比如click、mouseover，注意这里不要带on
listener：事件处理函数，事件发生时，会调用该监听函数
useCapture：可选参数，是一个布尔值，默认是false。学完DOM事件流后，我们再进一步学习
attachEvent 事件监听方式
eventTarget.attachEvent（eventNamewithon，callback）
eventTarget.attachEvent（）方法将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，指定的回调函数就会被执行。
该方法接收两个参数：
eventNameWithOn：事件类型字符串，比如onclick、onmouseover，这里要带on
callback：事件处理函数，当目标触发事件时回调函数被调用
删除事件（解绑事件）
1.传统注册方式
eventTarget.onclick = null；
2.方法监听注册方式
eventTarget.removeEventListener（type，listener[，useCapture]）；
eventTarget.detachEvent（eventNameWithOn，callback）；
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<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>
DOM事件流
事件流描述的是从页面中接收事件的顺序。
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流
比如我们给一个div注册了点击事件：
D0M事件流分为3个阶段：
1.捕获阶段
2.当前目标阶段
3.冒泡阶段
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pnBHfGtI-1635388653121)(DOM事件流.png)]
事件冒泡：IE最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到到DOM最顶层节点的过程。
事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到到最具体的元素接收的过程。
注意
1.Js代码中只能执行捕获或者冒泡其中的一个阶段。
2.onclick 和 attachEvent 只能得到冒泡阶段。
3.addEventListener（type，listener［，usecapture］）第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序。
4.实际开发中我们很少使用事件捕获，我们更关注事件冒泡
5.有些事件是没有冒泡的，比如onblur、onfocus、onmouseereer、onmouseleave
6.事件冒泡有时候会带来麻烦，有时候会帮助很巧妙的做某些事件，我们后面讲解。
<style>
.father {
overflow: hidden;
width: 300px;
height: 300px;
margin: 100px auto;
background-color: pink;
text-align: center;
}
.son {
width: 200px;
height: 200px;
margin: 50px;
background-color: purple;
line-height: 200px;
color: #fff;
}
</style>
</head>
<body>
<div class="father">
<div class="son">son盒子</div>
</div>
<script>
// dom 事件流 三个阶段
// 1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
// 2. onclick 和 attachEvent（ie） 只能得到冒泡阶段。
// 3. 捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段 document -> html -> body -> father -> son
// var son = document.querySelector('.son');
// son.addEventListener('click', function() {
// alert('son');
// }, true);
// var father = document.querySelector('.father');
// father.addEventListener('click', function() {
// alert('father');
// }, true);
// 4. 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段 son -> father ->body -> html -> document
var son = document.querySelector('.son');
son.addEventListener('click', function() {
alert('son');
}, false);
var father = document.querySelector('.father');
father.addEventListener('click', function() {
alert('father');
}, false);
document.addEventListener('click', function() {
alert('document');
})
</script>
</body>
事件对象
eventTarget.οnclick=function(event){}
eventTarget.addEventListener('click',function(event){})
//这个event就是事件对象，我们还喜欢的写成e或者evt
官方解释：event对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。
简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法。
比如：
1.谁绑定了这个事件。
2.鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。
3.键盘触发事件的话，会得到键盘的相关信息，如按了那个键。
这个event是个形参，系统帮我们设定为事件对象，不需要传递实参过去。
当我们注册事件时，event对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）。
事件对象的常见属性和方法
| 事件对象属性方法 | 说明 |
|---|---|
| e.target | 返回触发事件的对象 标准 |
| e.srcElement | 返回触发事件的对象 非标准 IE6-8 使用 |
| e.type | 返回事件的类型 比如click mouseover不带on |
| e.cancelBubble | 该属性阻止冒泡 非标准 IE6-8 使用 |
| e.returnValue | 该属性阻止默认事件（默认行为） 非标准 IE6-8 使用 比如不让链接跳转 |
| e.preventDefault() | 该方法阻止默认事件（默认行为）标准 比如不让链接跳转 |
| e.stopPropagation() | 阻止冒泡 标准 |
事件委托
事件委托也称为事件代理，在jQuery里面称为事件委派。
事件委托的原理
不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
以上案例：给ul注册点击事件，然后利用事件对象的target:来找到当前点击的li，因为点击li，事件会冒泡到ul上，u有注册事件，就会触发事件监听器。
事件委托的作用
我们只操作了一次DOM，提高了程序的性能。
常见的鼠标事件
禁止复制
<body>
我是一段不愿意分享的文字
<script>
// 1. contextmenu 我们可以禁用右键菜单
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})
// 2. 禁止选中文字 selectstart
document.addEventListener('selectstart', function(e) {
e.preventDefault();
})
</script>
</body>
鼠标事件对象
event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象KeyboardEvent和键盘事件对象KeyboardEvent
| 鼠标事件对象 | 说明 |
|---|---|
| e.clientX | 返回鼠标相对于浏览器窗口可视区的X坐标 |
| e.clientY | 返回鼠标相对于浏览器窗口可视区的Y坐标 |
| e.pageX | 返回鼠标相对于文档页面的X坐标 IE9+支持 |
| e.pageY | 返回鼠标相对于文档页面的Y坐标 IE9+支持 |
| e.screenX | 返回鼠标相对于电脑屏幕的X坐标 |
| e.screenY | 返回鼠标相对于电脑屏幕的Y坐标 |
键盘事件
| 键盘事件 | 触发条件 |
|---|---|
| onkeyup | 某个键盘按键被松开时触发 |
| onkeydown | 某个键盘按键被按下时触发 |
| onkeypress | 某个键盘按键被按下时触发但是它不识别功能键比如ctrl shift箭头等 |
注意：
1.如果使用addEventListener不需要加on
2.onkeypress和前面2个的区别是，它不识别功能键，比如左右箭头，shift等，
3.三个事件的执行顺序是：keydown keypress keyup
<script>
// 常用的键盘事件
//1. keyup 按键弹起的时候触发
// document.onkeyup = function() {
// console.log('我弹起了');
// }
document.addEventListener('keyup', function() {
console.log('我弹起了');
})
//3. keypress 按键按下的时候触发 不能识别功能键 比如 ctrl shift 左右箭头啊
document.addEventListener('keypress', function() {
console.log('我按下了press');
})
//2. keydown 按键按下的时候触发 能识别功能键 比如 ctrl shift 左右箭头啊
document.addEventListener('keydown', function() {
console.log('我按下了down');
})
// 4. 三个事件的执行顺序 keydown -- keypress -- keyup
</script>
键盘事件对象
| 键盘事件对象属性 | 说明 |
|---|---|
| keyCode | 返回该键的ASCII值 |
注意：
onkeydown和onkeyup不区分字母大小写，onkeypress区分字母大小写。
在我们实际开发中，我们更多的使用keydown和keyup，它能识别所有的键（包括功能键）
Keypress不识别功能键，但是keyCodel属性能区分大小写，返回不同的ASCIH值
DOM
顺序是：keydown keypress keyup
<script>
// 常用的键盘事件
//1. keyup 按键弹起的时候触发
// document.onkeyup = function() {
// console.log('我弹起了');
// }
document.addEventListener('keyup', function() {
console.log('我弹起了');
})
//3. keypress 按键按下的时候触发 不能识别功能键 比如 ctrl shift 左右箭头啊
document.addEventListener('keypress', function() {
console.log('我按下了press');
})
//2. keydown 按键按下的时候触发 能识别功能键 比如 ctrl shift 左右箭头啊
document.addEventListener('keydown', function() {
console.log('我按下了down');
})
// 4. 三个事件的执行顺序 keydown -- keypress -- keyup
</script>
键盘事件对象
| 键盘事件对象属性 | 说明 |
|---|---|
| keyCode | 返回该键的ASCII值 |
注意：
onkeydown和onkeyup不区分字母大小写，onkeypress区分字母大小写。
在我们实际开发中，我们更多的使用keydown和keyup，它能识别所有的键（包括功能键）
Keypress不识别功能键，但是keyCodel属性能区分大小写，返回不同的ASCIH值
DOM
扫一扫
2391
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
