JavaScript核心
Web API阶段 DOM BOM 操作
js基础是语法阶段
web API阶段是应用 主要是BOM DOM 页面交互功能
1.API 和Web API
1.1API
（应用程序编程接口），是一些预先定义的函数，给程序员提供的一种工具，以便实现功能。
1.2Web API
是浏览器提供的一套操作 浏览器功能 和 页面元素 的API（BOM 和 DOM）
浏览器功能主要通过BOM实现 页面元素主要通过DOM实现
1.3小结
1.API是为程序员提供的一个借口，帮助实现功能，不纠结内部如何实现
2.Web API主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。
3.一般的Web API都是有输入输出（函数的传参和返回值），很多都是方法（函数）
4.Web API可结合前面的内置对象方法的思路学习
2.DOM
2.1概述
文档对象模型，是W3C组织推荐的处理可扩展标记语言（HTML || XML）的标准 标准接口
2.2DOM树
- 文档：一个页面就是一个文档，DOM中使用document表示
- 元素：页面中的所有标签都是元素，DOM中使用element表示
- 节点：网页中所有的内容都是节点（标签、属性、文本、注释等），DOM中使用node表示
DOM把以上内容都看作是对象
3.获取元素
3.1如何获取页面元素
3.1.1根据 ID获取
getElementById（）
返回的是DOM的 element对象
var timer=document.getElementById('time');
console.log(timer);//<div id="time">2020</div>
console.log(typeof timer);//object
console.dir(timer);//打印返回的元素对象 更好的查看里面的属性和方法
var timer0=document.getElementById('t');
console.log(timer0);//null
3.1.2根据标签名获取
使用下面的方法可以返回带有指定标签名的 对象的集合 （伪数组形式）
var lis=document.getElementsByTagName('li');
console.log(lis);
/*HTMLCollection HTMLCollection(4) [li, li, li, li] 伪数组形式
0: li
1: li
2: li
3: li
length: 4*/
想要操作里面的元素就需要遍历
得到的元素对象是动态的（元素变他也变
如果页面中只有一个li 返回的也是伪数组
如果没有这个元素返回的是空的伪数组
2.获取ol有序列表
获取某个元素（父元素）内部所有指定标签名的子元素。
注意：父元素必须是 单个对象（必须指明是哪一个元素对象），获取的时候不包括父元素自己。
// element.getElementsByTagName('标签名');
var ols=document.getElementsByTagName('ol');//[ol]
// console.log(ols.getElementsByTagName('li'));//报错
console.log(ols[0].getElementsByTagName('li'));//获取第一个ol
/*<HtmlCollection length="4">
<li>hhh</li>
<li>hhh</li>
<li>hhh</li>
<li>hhh</li>
</HtmlCollection>*/
或者 起个id
var ols=document.getElementById('ols');
console.log(ols.getElementsByTagName('li'));
3.1.3通过类名
H5新增
//document.getElementsByClassName() 根据类名获得某些元素集合
var boxes=document.getElementsByClassName('box');
console.log(boxes);
/*
<HtmlCollection length="2">
<div class="box">2020</div>
<div class="box">2020</div>
</HtmlCollection>*/
3.1.4根据指定选择器返回第一个元素对象
H5新增
// .querySelector('选择器');
var firstBox=document.querySelector('.box');// . 类选择器
console.log(firstBox);//<div class="box">2020</div>
var li=document.querySelector('li');//标签
console.log(li);//<li>dsadsd</li>
var ol=document.querySelector('#ols');//#id
console.log(ol);//<ol id="ols">...</ol>
3.1.5根据指定选择器返回所有元素对象 集合（伪数组）
var allBox=document.querySelectorAll('.box');
console.log(allBox);
/*<NodeList length="2">
<div class="box">2020</div>
<div class="box">2020</div>
</NodeList>*/
3.2获取特殊页面元素
1.获取body元素
var bodyEle=document.body;
console.log(bodyEle);//<body>...</body>
2.获取html元素
var htmlEle=document.documentElement;
console.log(htmlEle);//<html lang="en">...</html>
4.事件基础
4.1事件概述
js使我们有能力创建动态页面，而事件是可以被js侦测到的行为
触发–响应机制
如：点击按钮时产生一个事件，然后执行某些操作
4.2事件三要素
4.2.1事件源
事件被触发的对象 如按钮对象
var btn=document.getElementById('btn');
4.2.2事件类型
如何触发 什么事件 如鼠标点击（onclick）
btn.onclick
4.2.3事件处理程序
通过一个函数赋值的方式 完成
btn.onclick = function () {
alert('ll');
}
var btn=document.getElementById('btn');
btn.onclick = function () {
alert('ll');
}
4.3执行事件的步骤
4.3.1获取事件源
var div=document.querySelector('div');
4.3.2绑定事件 注册事件
div.onclick
4.3.3添加事件处理程序
div.onclick=function () {
console.log('我被点了');
}
5.操作元素***
5.1改变元素内容
5.1.1element.innerText
从起始位置到终止为止，不识别html标签，同时空格和换行也会去掉
//1.element.innerText
//事件：当点击按钮时，div里的文字会改变
var btn=document.querySelector('button');
var div=document.querySelector('div');
btn.onclick=function () {
// div.innerText='2020-7-1';//div里的内容变了
div.innerText=getDate();//2020年7月1日周三
}
function getDate() {
var date =new Date();
var year=date.getFullYear();
var month=date.getMonth()+1;
var dates=date.getDate();
var arr=['周日','周一','周二','周三','周四','周五','周六'];
var day=date.getDay();
return (year+'年'+month+'月'+dates+'日'+arr[day]);
}
//元素可以不用添加事件 即点开网页时就出现
var p=document.querySelector('p');
p.innerText=getDate();
5.1.2element.innerHTML*
从起始位置到终止为止，识别html标签，空格和换行不会去掉
5.1.3区别
innerText不识别html标签 （非标准）
innerHTML识别html标签（W3C标准）
var div=document.querySelector('div');
div.innerText='今年<strong>2020</strong>';//今年<strong>2020</strong>
div.innerHTML='今年<strong>2020</strong>';//加粗
这两个属性可读写，可以获取里面的内容
var p=document.querySelector('p');
console.log(p.innerText);//我是蚊子 jjj 祛除了空格和换行
console.log(p.innerHTML);//保留了内容里html标签 保留格式
/*
* 我是蚊子
<span>jjj</span>*/
5.2常用元素的属性操作
案例1：点击按钮切换图片
<button id="xh" >小花</button>
<button id="bd">别的</button>
<img src="../resource/001.png" title="xh">
<script src="jss.js"></script>
//获取元素
var xh=document.getElementById('xh');
var bd=document.getElementById('bd');
var img=document.querySelector('img');
//注册事件
bd.onclick=function () {
img.src='../resource/01.jpg';
img.title='bd';
}
xh.onclick=function () {
img.src='../resource/001.png';
img.title='xh';
}
案例2：分时显示不同图片，显示不同问候语
上午，下午，晚上
分析：
1.根据不同时间 所以需要日期内置对象
2.利用分支语句来设置不同图片
3.需要一个图片，并且根据时间修改图片，就需要用操作元素src属性
4.需要div 显示不同问候语
5.3表单元素的属性操作
<button>btn</button>
<input type="text" value="输入内容">
<script>
var btn=document.querySelector('button');
var input=document.querySelector('input');
btn.onclick=function () {
// input.innerHTML='点击了';//不会变 因为这是innerHTML是普通盒子用的 如：div标签里的内容
//表单里的值 文字内容是通过value来修改的
input.value='被点击了';
//如果想要某个表单被禁用 不能再点击 用 disabled
///如想要button禁用
btn.disabled=true;
// this.disabled=true; 同理
// this指向的是事件函数的调用者 btn
}
</script>
案例：仿京东显示密码
点击按钮将密码框切换为文本框，明文显示密码
算法：利用一个flag变量，来判断flag的值，如果是1就切换为文本框，flag设置为0；如果是0就切换为密码框，flag设置为1；
<div class="box">
<lable for="">
<img src="../resource/by.png" id="eye">
</lable>
<input type="password" id="pwd" >
</div>
<script>
//1.获取元素
var eye=document.getElementById('eye');
var pwd=document.getElementById('pwd');
//2.注册事件
var flag=0;
eye.onclick=function () {
if(flag==0){
pwd.type='text';
flag=1;
eye.src='../resource/zy.jpg'
}else{
pwd.type='password';
flag=0;
eye.src='../resource/by.png';
}
}
</script>
5.4样式属性操作
改变元素大小，颜色，位置等样式
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div ></div>
1.行内样式操作
element.style.
<script>
var div=document.querySelector('div');
div.onclick=function () {
this.style.backgroundColor='purple';
this.style.width='250px';
}
</script>
此处出现行内样式 权重>内部样式 所以会改变
案例：点击关闭某元素
核心：利用样式的显示和隐藏完成，display：none隐藏元素display：block显示元素
<div class="box">
淘宝二维码
<img src="../resource/tb.jpg">
<i class="close-btn">x</i><!--小图标标签-->
</div>
<script>
var btn=document.querySelector('.close-btn');
var box=document.querySelector('.box');
btn.onclick = function () {
box.style.display='none';
}
</script>
案例：显示隐藏文本框内容
核心：表单需要两个事件：获得焦点onfocus 失去焦点onblur
<style>
input{
color: #999;
}
</style>
</head>
<input type="text" value="手机">
</div>
<script>
var text=document.querySelector('input');
text.onfocus=function () {
// console.log('得到焦点');
if (text.value==='手机'){
this.value='';
}
//把文本框内容变深
this.style.color='#123444';
}
text.onblur=function () {
// console.log('失去焦点');
if (text.value===''){
this.value='手机';
}
this.style.color='#999';
}
</script>
2.类名样式操作element.className**
如果样式较多，功能复杂的情况下用
div{
width: 200px;
height: 200px;
background-color: pink;
}
.change{
background-color: purple;
color: white;
font-size: 25px;
margin-top: 50px;
}
</style>
</head>
<div class='first'>
ll
</div>
<script>
var div=document.querySelector('div');
div.onclick=function () {
// this.style.backgroundColor='purple';
// this.style.width='250px';
this.className='change';//当前元素类名改为change
}
</script>
如果想要保留原来的类信息：
this.className='first change';//多类名
案例：密码框验证信息
div{
width: 600px;
margin: 100px auto;
}
.message{
display: inline-block;
font-size: 12px;
color: #999;
background: url("../resource/001.png") no-repeat left center;
padding-left: 20px;
}
.wrong{
color: red;
background-image: url("../resource/01.jpg");
}
.right{
color: green;
background-image: url("../resource/tb.jpg");
}
</style>
</head>
<div class="register">
<input type="password" class="ipt">
<p class="message">请输入6~16位密码</p>
</div>
<script>
var ipt=document.querySelector('.ipt');
var message=document.querySelector('.message');
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='true';
}
}
</script>
5.5排他思想（算法
<button>a1</button>
<button>a2</button>
<button>a3</button>
<button>a4</button>
<script>
var btns=document.querySelectorAll('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='';
}
this.style.backgroundColor='pink';
}
}
</script>
案例：换肤
给出几个图片 当点击这个小图片时 就让页面背景改为当前的图片
核心算法：把当前图片的src路径取过来，给body作为背景
<style>
*{
margin: 0;
padding:0;
}
body{
background: url("../resource/01.jpg") no-repeat center top;
}
li{
list-style: none;
}
.baidu{
overflow: hidden;
margin: 100px auto;
background-color: #fff;
width: 302px;
padding-top:3px;
}
.baidu img{
display: inline-block;
float: left;
width: 100px;
height: 80px;
}
</style>
</head>
<body>
<ul class="baidu">
<li><img src="../resource/tb.jpg"></li>
<li><img src="../resource/01.jpg"></li>
<li><img src="../resource/001.png"></li>
</ul>
<script>
var imgs=document.querySelector('.baidu').querySelectorAll('img');
for (var i=0;i<imgs.length;i++){
imgs[i].onclick=function () {
document.body.style.backgroundImage='url('+this.src+')';
}
}
</script>
案例：表格隔行变色
鼠标事件 鼠标经过：onmouseover 鼠标离开 onmouseout
思路：鼠标经过tr行 当前的行变背景颜色，鼠标离开去掉当前颜色
注意：第一行（thead）不需要变色 因此我们需要获取tbody里的行
<div class="box">
<table>
<thead>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
<script>
var trs=document.querySelector('tbody').querySelectorAll('tr');
for (var i=0;i<trs.length;i++) {
trs[i].onmouseover=function () {
this.style.backgroundColor = 'pink';
}
trs[i].onmouseout=function () {
this.style.backgroundColor = '';
}
}
</script>
案例：表单全选
<div class="box">
<table>
<thead>
<tr>
<td><input type="checkbox" id="all"></td>
<td></td>
<td></td>
</tr>
</thead>
<tbody id="d">
<tr>
<td><input type="checkbox"></td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td><input type="checkbox" ></td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
<script>
var all=document.querySelector('#all');
var ipt=document.querySelector('tbody').querySelectorAll('input');
all.onclick=function () {
for (var i=0;i<ipt.length;i++){
ipt[i].checked=this.checked;
}
}
for (var i=0;i<ipt.length;i++){//给每个复选框都绑定事件
ipt[i].onclick=function () {
var flag=true;
for (var i=0;i<ipt.length;i++){//每次点击 都要检查4个框是否都被选中，选中为true 维权选中为false
if (!ipt[i].checked){
flag=false;
break;
}
}
all.checked=flag;
}
}
</script>
5.6获取自定义属性值
5.6.1获取属性值
1.element.属性
2.element.getAttribute(‘属性’)
var div=document.querySelector('div');
console.log(div.id);
console.log(div.getAttribute('id'));
//box
区别：
element.属性 获取的是内置属性 （元素本身自带
get。。。可获取自定义属性
<div id="box" index="11">
console.log(div.getAttribute('index'))//11
5.6.2设置元素属性值
1.设置内置属性
div.id='test';
console.log(div.id);//test
div.className='ttt';
2.设置自定义属性值
div.setAttribute('index',2);
console.log(div.getAttribute('index'))//2
div.setAttribute('class',ww);
3.移除
div.removeAttribute('index');
案例：tab栏切换案例***
分析：
tab栏分上下两个大模块；
上面的选项卡模块，点击某一个，其底色变成红色，其余不变（排他思想） 用修改类名方式
下面的显示内容模块随模块变而变
核心思路：给上面的tab_list里面的所有小li添加自定义属性，属性值从0开始编号
<style>
.tab{
position: absolute;
left: 200px;
top:200px;
}
.tab_list{
width: 400px;
height: 30px;
background-color: #767171;
border: 1px solid #333333;
margin: 0;
}
ul{
margin: 0 ;
padding: 0;
}
li{
list-style: none;
display: inline-block;
float: left;
/* margin-left: 25px;
margin-right: 25px;*/
width: 100px;
height: 30px;
text-align: center;
line-height: 30px;//设行高=盒子高度
padding: 0;
}
.c{
background-color: darkred;
color:#fff;
}
.item{
display: none;
}
</style>
</head>
<body>
<div class="tab" >
<div class="tab_list">
<ul>
<li class="c" >介绍</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>
</div>
<script>
var tab_list=document.querySelector('.tab_list');
var lis=document.querySelectorAll('li');
var items=document.querySelectorAll('.item');
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='c';
var index=this.getAttribute('index');
//排他 留下对应的item
for(var i=0;i<items.length;i++){
items[i].style.display='none';
}
items[index].style.display='block';
}
}
</script>
5.7H5自定义属性
目的：保存并使用数据 有些数据可以保存到页面中而不用保存到数据库中
但有些自定义属性容易引起歧义，不容易判断是元素的内置属性还是自定义属性
1.设置h5自定义属性
h5规定自定义属性以data-开头作为属性名并且赋值
比如
或js2.获取
1.兼容性获取 element.getAttribute(‘data-index’);
2.H5新增 element.dataset.index 或 element.dataset[‘index’] ie11
只能获取data-开头的
<div class="tab" data-list-name="andy" >
var div=document.querySelector('div');
console.log(div.getAttribute('data-list-name'));
console.log(div.dataset.listName);
console.log(div.dataset['listName']);
6.节点操作
6.1为啥学节点操作？
因为利用DOM提供的方法获取元素document。。。等逻辑性不强，繁琐
所以利用节点层次关系 （父子兄），逻辑性强但兼容性稍差
6.2节点概述
网页中的所有内容都是节点（标签、属性、文本、注释等）在dom中，节点用node来表示
一般节点至少拥有nodeType（节点类型）、nodeName（节点名称）、nodeValue（节点值）这三个基本属性
元素节点： nodeType 为1 属性节点nodeType为2
文本节点：nodeType为3 （文本节点包含文字、空格、换行等）
在实际开发中，节点主要操作的是元素节点
6.3点层级
常见：父子兄关系
见图DOM树
6.3.1父节点
//1.父节点 .parentNode
var ewm=document.querySelector('.ewm');
//var box=document.querySelector('.box');
console.log(ewm.parentNode);//得到的最近的父节点 如果找不到就返回null
6.3.2子节点
//2.子节点 .childNodes
var ul=document.querySelector('ul');
//var lis=ul.querySelectorAll('li');
console.log(ul.childNodes);//包含文本节点、元素节点等
//NodeList(5) [text, li, text, li, text]
console.log(ul.childNodes[0].nodeType);
一般用下边的：
非标准）
//.children
console.log(ul.children);//HTMLCollection(2) [li, li]
2.第一个子元素和最后一个
console.log(ul.firstChild);//#text
console.log(ul.lastChild);//#text
主要获取元素节点：
console.log(ul.firstElementChild);
console.log(ul.lastElementChild);//<li></li>
有兼容性问题 ie9
实际开发写法**：
console.log(ul.children[0]);
console.log(ul.children[ul.children.length-1]);//<li></li>
案例：下拉菜单
var nav=document.querySelector('.nav');
var lis=nav.children;
for (var i=0;lis.length;i++){
lis[i].onmouseover=function () {
this.children[i].style.display='block';
}
lis[i].onmouseover=function () {
this.children[i].style.display='none';
}
}
6.3.3兄弟节点
<div>div</div>
<span>span</span>
<script>
//.nextSibLing .previousSibling)
var div=document.querySelector('div');
console.log(div.nextSibling);//#text
console.log(div.previousSibling);//#text
//元素节点 ie9以上
console.log(div.nextElementSibling);//<span>span</span>
console.log(div.previousElementSibling);//null
解决兼容性问题？封装一个兼容性函数
6.4创建和添加节点
document.createElement('');
<ul>
<li>123</li>
</ul>
<script>
var li=document.createElement('li');//创建节点再添加
var ul=document.querySelector('ul');
ul.appendChild(li);//node.appendChild(child) node父亲
//后面追加元素
//下边是在前面追加
var lili=document.createElement('li');
ul.insertBefore(lili,ul.children[0]);
案例：发布留言
<textarea name="" id=""></textarea>
<button>发布</button>
<ul>
</ul>
<script>
var btn=document.querySelector('button');
var text=document.querySelector('textarea');
var ul=document.querySelector('ul');
btn.onclick=function () {
if (text.value==''){
alert('未输入');
}else{
var li=document.createElement('li');
li.innerHTML=text.value;
// ul.appendChild(li);
ul.insertBefore(li,ul.children[0]);
}
}
6.5删除节点
// ul.removeChild(ul.children[0]);
<button>删除</button>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var ul=document.querySelector('ul');
var btn=document.querySelector('button');
// ul.removeChild(ul.children[0]);
btn.onclick=function () {
// ul.removeChild(ul.children[0]);
if(ul.children.length==0 ){
this.disabled=true;
}else{
ul.removeChild(ul.children[0]);
}
}
案例：删除留言
分析：
1、当我们把文本域里的值赋给li的时候 多添加一个删除的链接
2、需要吧所有的链接获取过来，当我们点击当前的链接时候，删除当前链接所在的li
3、阻止链接跳转需要添加javascript:void(0);或者 javascript:;
<textarea name="" id=""></textarea>
<button>发布</button>
<ul>
</ul>
<script>
var btn=document.querySelector('button');
var text=document.querySelector('textarea');
var ul=document.querySelector('ul');
btn.onclick=function () {
if (text.value==''){
alert('未输入');
}else{
var li=document.createElement('li');
li.innerHTML=text.value+ '<a href="javascript:;">删除</a>';
// ul.appendChild(li);
ul.insertBefore(li,ul.children[0]);
//删除元素 当前链接的li
var as=document.querySelectorAll('a');
for (var i=0;i<as.length;i++){
as[i].onclick=function () {
//删除当前a所在的li
ul.removeChild(this.parentNode);
}
}
}
}
</script>
6.6复制节点(克隆)
node.cloneNode()
注意：括号为空或者false 是浅拷贝 只复制标签 不复制内容
为true会复制内容
6.7案例：动态生成表格
<style>
table{
width:500px;
margin: 100px auto;
border-collapse: collapse;/*合并边框*/
text-align: center;
}
td,th{
border: 1px solid #333333;
}
thead,tr{
height: 40px;
background-color: #e1e1e1;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
var datas=[{
name:'www',
subject:'java',
score:100
},
{
name:'jjj',
subject:'java',
score:98
},
{
name:'ggg',
subject:'java',
score:70
}
];
//创建行 有几个人建几行 通过数组长度得到
var tbody=document.querySelector('tbody');
for (var i=0;i<datas.length;i++){//行
var tr=document.createElement('tr');
tbody.appendChild(tr);
//在每个行里创建单元格 td 单元格数量取决于对象属性个数
for (var k in datas[i]){
//创建跟数据有关系的单元格
var td=document.createElement('td');
td.innerHTML=datas[i][k];
tr.appendChild(td);
}//列
//创建有删除的单元格
var td=document.createElement('td');
td.innerHTML='<a href="javascript:;">删除</a>';
tr.appendChild(td);
}
//删除操作 把所有a获取过来
var as=document.querySelectorAll('a');
for (var i=0;i<as.length;i++){
as[i].onclick=function () {
//点击a 删除当前所在的行（链接的爸爸的爸爸）
tbody.removeChild(this.parentNode.parentNode);
}
}
6.8 三种动态创建元素区别
<button> dd </button>
<p>add</p>
<div class="inner"></div>
<div class="creat"></div>
<script>
//1 document.write('<div>123</div>'); 如果页面文档流加载完毕 在调用这句话会导致页面重绘
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>'
}
//3.document.createElement('a');
var creat=document.querySelector('.creat');
for (var i=0;i<100;i++){
var a=document.createElement('a');
creat.appendChild(a);
}
//2拼接字符串3不是拼接 3效率高
//2可以采用拼接数组形式拼接 效率会比cr高
//但cr结构更清晰
7.DOM重点核心总结
8.事件高级
8.1注册事件（绑定事件）
两种方式：
8.1.1传统方式
on开头 如onclick
<button> ct </button>
<button>ff</button>
<script>
var btns=document.querySelectorAll('button');
btns[0].onclick=function () {
alert('hi');
}
btns[0].onclick=function () {
alert('how are you');
}
//只显示最后一个
特点：注册时间的唯一性
同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
8.1.2方法监听注册方式
addEventListener()其中的方法
ie9之前的可用 attachEvent()代替
特点：同一个元素同一个事件可以注册多个监听器（事件处理程序）
按注册顺序依次执行
var btns=document.querySelectorAll('button');
// 里面的事件类型是字符串 必须加引号 而且不带on
btns[1].addEventListener('click',function () {
alert(22);
})
btns[1].addEventListener('click',function () {
alert('dsdsa');
})//弹两次
</script>
8.2删除事件（解绑事件）
8.2.1删除事件的方式
1.传统方式
<div>1</div>
<div>2</div>
<div>3</div>
<script>
var divs=document.querySelectorAll('div');
divs[0].onclick=function () {
alert(11);
divs[0].onclick=null;
}
divs[1].addEventListener('click',fn)
function fn() {
alert(22);
divs[1].removeEventListener('click',fn);//移除注册事件
}3.
8.3DOM事件流
事件流 描述是从页面中接收事件的顺序
事件 发生时会在元素节点之间按照特定的顺序传播，这个传播过程 即 DOM事件流
比如：给一个div注册了点击事件
这个的DOM事件流分为三个阶段
1.捕获阶段 documen-》html-》body-》div
2.当前目标阶段div
3.冒泡阶段div-》body-》html-》document
图：事件流
注意;1.js代码只能执行捕获或者冒泡其中的一个阶段
2.onclick 和attachEvent（）只能得到冒泡阶段
3.捕获阶段 如果addEventListener 第三个参数是true 则处于捕获阶段
<div class="f">
<div class="s">son</div>
</div>
<script>
var son =document.queryCommandState('.s');
son.addEventListener('click',function () {
alert('son');
},true);
4.冒泡阶段 如果addEventListener 第三个参数是false 则处于冒泡阶段
son.addEventListener('click',function () {
alert('son');
},false);
8.4事件对象
<div>123</div>
<script>
var div=document.querySelector('div');
//1.event 就是一个事件对象 当形参来看 事件对象可以自己命名 一般 e
//2.事件对象只有有了事件才会存在，是系统自动创建的 不需要传递参数
//3.事件对象 是事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标；
//如果是键盘事件 里面就包括键盘事件信息 比如 判断用户按下了哪个键
//4.兼容性 ie6/7/8用 window.event
div.onclick=function (event) {
console.log(event);
}
的方式
1.传统方式
<div>1</div>
<div>2</div>
<div>3</div>
<script>
var divs=document.querySelectorAll('div');
divs[0].onclick=function () {
alert(11);
divs[0].onclick=null;
}
divs[1].addEventListener('click',fn)
function fn() {
alert(22);
divs[1].removeEventListener('click',fn);//移除注册事件
}3.
8.3DOM事件流
事件流 描述是从页面中接收事件的顺序
事件 发生时会在元素节点之间按照特定的顺序传播，这个传播过程 即 DOM事件流
比如：给一个div注册了点击事件
这个的DOM事件流分为三个阶段
1.捕获阶段 documen-》html-》body-》div
2.当前目标阶段div
3.冒泡阶段div-》body-》html-》document
图：事件流
注意;1.js代码只能执行捕获或者冒泡其中的一个阶段
2.onclick 和attachEvent（）只能得到冒泡阶段
3.捕获阶段 如果addEventListener 第三个参数是true 则处于捕获阶段
<div class="f">
<div class="s">son</div>
</div>
<script>
var son =document.queryCommandState('.s');
son.addEventListener('click',function () {
alert('son');
},true);
4.冒泡阶段 如果addEventListener 第三个参数是false 则处于冒泡阶段
son.addEventListener('click',function () {
alert('son');
},false);
8.4事件对象
<div>123</div>
<script>
var div=document.querySelector('div');
//1.event 就是一个事件对象 当形参来看 事件对象可以自己命名 一般 e
//2.事件对象只有有了事件才会存在，是系统自动创建的 不需要传递参数
//3.事件对象 是事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标；
//如果是键盘事件 里面就包括键盘事件信息 比如 判断用户按下了哪个键
//4.兼容性 ie6/7/8用 window.event
div.onclick=function (event) {
console.log(event);
}
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
