Javascript（六）：Web Apis、DOM、事件高级

文章目录

Web Apis

1.Web Apis和Js基础关联性

1.1 JS的组成

在这里插入图片描述

1.2 JS基础阶段以及WebAPls阶段

JS基础阶段

我们学习的是ECMAScript标准规定的基本语法

要求同学们掌握JS基础语法

只学习基本语法，做不了常用的网页交互效果

目的是为了 JS 后面的课程打基础、做铺垫

Web APls阶段

Web APIs是W3C组织的标准

Web APIs 我们主要学习 DOM 和 BOM

Web APIs 是我们 JS 所独有的部分

我们主要学习页面交互功能

需要使用Js基础的课程内容做基础

JS基础学习ECMAScript基础语法为后面作铺垫，webAPIs是Js的应用，大量使用Js基础语法做交互效果

2.Api和Web Api

2.1 Api

API(Application Programming Interface,应用程序编程接口是一些预先定义的函数，目的是提供应用程序
与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

简单理解：API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。

2.2Web Api

Web API是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)。

现阶段我们主要针对于浏览器讲解常用的API,主要针对浏览器做交互效果。

比如我们想要浏览器弹出一个警示框，直接使用alert(弹出’)

MDN详细API:https://developer.mozilla.org/zh-CN/docs/Web/API

因为WebAPI很多，所以我们将这个阶段称为Web APls

2.3Api和Web Api小结

1.API是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现
2.WebAPI主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。
3.WebAPI一般都有输入和输出（函数的传参和返回值）,WebAPI很多都是方法（函数）
4.学习WebAPI可以结合前面学习内置对象方法的思路学习

DOM

1.DOM简介

1.1什么是DOM

文档对象模型（DocumentObjectModel,简称DOM),是W3C组织推荐的处理可扩展标记语言（HTML
或者XML)的标准编程接口。
W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

1.2 DOM树

在这里插入图片描述

·文档：一个页面就是一个文档，DOM中使用document表示
·元素：页面中的所有标签都是元素，DOM中使用element表示
·节点：网页中的所有内容都是节点（标签、属性、文本、注释等）,DOM中使用node表示

DOM 把以上内容都看做是对象

2.获取元素

2.1如何获取页面元素

DOM在我们实际开发中主要用来操作元素。
我们如何来获取页面中的元素呢？
获取页面中的元素可以使用以下几种方式：

  • ·根据ID获取
  • ·根据标签名获取
  • ·通过HTML5新增的方法获取
  • ·特殊元素获取

2.2根据ID获取

使用getElementByld()方法可以获取带有ID的元素对象。

<div id="time">2019-9-9</div>
<script>
    //1.因为我们文档页面从上往下加载，所以先得有标签所以我们script写到标签的下面
    //2.get获得element元素by通过驼峰命名法
    //3.参数id是大小写敏感的字符串
    //4.返回的是一个元素对象
    var timer = document.getElementById('time');
    console.log(timer);
    console.log(typeof timer);
    //5.console.dir打印我们返回的元素对象更好的查看里面的属性和方法
    console.dir(timer);
</script>

2.3根据标签名获取

使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合

document.getElementsByTagName('标签名');

注意：
1.因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。
2.得到元素对象是动态的

还可以获取某个元素（父元素）内部所有指定标签名的子元素.

element.getElementsByTagName(标签名');

注意：父元素必须是单个对象（必须指明是哪一个元素对象）.获取的时候不包括父元素自己。

//1.返回的是获取过来元素对象的集合以伪数组的形式存储的
var lis = document.getElementsByTpgName('li');
console.log(lis);
console.log(lis[0]);
//2.我们想要依次打印里面的元素对象我们可以采取遍历的方式
for (var i = 0; i < lis. length; i++){
	console.log(lis[i]);
}
//3.如果页面中只有一个1i返回的还是伪数组的形式
//4.如果页面中没有这个元素返回的是空的伪数组的形式
//5.element.getElementsByTagName('标签名');
// var ol=document.getElementsByTagName('ol');//[o1]
// console.log(ol[0].getElementsByTagName('li'));
var ol = document.getElementById('ol');
console.log(ol.getElementsByTagName('li'));

2.4通过HTML5新增的方法获取

1.document.getElementsByClassName(类名）;//根据类名返回元素对象集合

2.document.querySelector('选择器');//根据指定选择器返回第一个元素对象

3.document.querySelectorA11('选择器');//根据指定选择器返回

//1.getElementsByClassName根据类名获得某些元素集合
var boxs = document.getElementsByClassName('box');
console.log(boxs);
//2.querySelector返回指定选择器的第一个元素对象切记里面的选择器需要加符号.box #nav
var firstBox=document.querySelector('.box');
console.log(firstBox);
var nav = document.querySelector('#nav');
console.log(nav);
var li=document.querySelector('li');
console.log(li);
//3.querySelectorA11()返回指定选择器的所有元素对象集合
var allBox=document.querySelectorAll('.box');
console.log(allBox);
var lis = document.querySelectorAll('li');
console.log(lis);

2.5获取特殊元素（body,html)

获取body元素

1.doucumnet.body//返回body元素对象

获取html元素

1.document.documentElement//返回html元素对象

3.事件基础

3.1 事件概述

JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。

简单理解：触发—响应机制。

网页中的每个元素都可以产生某些可以触发JavaScript的事件，例如，我们可以在用户点击某按钮时产生一个
事件，然后去执行某些操作。

<button id="btn">唐伯虎</button>
<script>
//点击一个按钮，弹出对话框
//1.事件是有三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素
//(1)事件源 事件被触发的对象 谁 按钮
var btn=document.getElementById('btn');
//(2)事件类型如何触发什么事件比如鼠标点击（onclick) 还是鼠标经过 还是键盘按下
//(3)事件处理程序 通过一个函数赋值的方式 完成
btn.onclick=function(){
	alert('点秋香');
}
</script>

3.3执行事件的步骤

1.获取事件源
2.注册事件（绑定事件）
3.添加事件处理程序（采取函数赋值形式）

4.操作元素

4.1改变元素内容

JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内
容、属性等。注意以下都是属性
4.1改变元素内容

element.innerText

从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉

element.innerHTML

起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

innerText 和 innerHTML的区别

<script>
// innerText 和 innerHTML的区别
//1.innerText 不识别html标签 非标准 去除空格和换行
var div = document.querySelector('div');
// div.innerText ='<strong>今天是：</strong> 2019';
//2.innerHTML识别html标签W3C标准保留空格和换行的
div.innerHTML='<strong>今天是：</strong>2019';
//这两个属性是可读写的可以获取元素里面的内容
var p = document.querySelector('p');
console.log(p.innerText);
console.log(p.innerHTML);
</script>

4.2常用元素的属性操作

1.innerText、innerHTML改变元素内容
2.src、href
3.id、alt、title

<script>
    //修改元素属性 src
    //1.获取元素
    var 1dh=document.getElementById('ldh');
    var zxy = document.getElementById('zxy');
    var img = document.querySelector('img');
    //2.注册事件处理程序
    zxy.onclick=function(){
    img.src='images/zxy.jpg';
    img.title ='张学友思密达';
    1dh.onclick=function(){
    img.src='images/1dh.jpg';I
</script>

4.3表单属性操作

利用DOM可以操作如下表单元素的属性：

type、value、checked、selected、disabled

<body>
<button>按钮</button>
<input type="text"value="输入内容">
<script>
//1.获取元素
var btn=document.querySelector('button');
var input = document.querySelector('input');
//2.注册事件处理程序
btn.onclick=function(){
// input.innerHTML='点击了';这个是普通盒子比如div标签里面的内容
//表单里面的值文字内容是通过value来修改的I
input.value='被点击了';
// 如果想要某个表单被禁用 不能再点击 disabled 我们想要这个按钮 button禁用
// btn.disabled=true;
this.disabled=true;
// this 指向的是事件函数的调用者 btn
</script>
</body>

4.4样式属性操作

我们可以通过JS修改元素的大小、颜色、位置等样式。

1.element.style行内样式操作
2.element.className类名样式操作

注意：
1.Js里面的样式采取驼峰命名法比如fontSize、backgroundColor
2.Js修改style样式操作，产生的是行内样式，css权重比较高

注意：
1.如果样式修改较多，可以采取操作类名方式更改元素样式。
2.class因为是个保留字，因此使用className来操作元素类名属性
3.className会直接更改元素的类名，会覆盖原先的类名。

4.5操作元素小结

操作元素是DOM的核心内容

在这里插入图片描述

4.6排他思想

如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：

1.所有元素全部清除样式（干掉其他人）

2.给当前元素设置样式（留下我自己）

3.注意顺序不能颠倒，首先干掉其他人，再设置自己

4.7自定义属性元素

1.获取属性值
element.属性 获取属性值。

element.getAttribute(‘属性’);

区别：
element.属性 获取内置属性值（元素本身自带的属性）

element.getAttribute(属性）;主要获得自定义的属性（标准）我们程序员自定义的属性

<div id="demo" index="1"></div>
<script>
var div=document.querySelector('div');
//1.获取元素的属性值
//(1)element.属性
console.log(div.id);
//(2)element.getAttribute('属性')get得到获取attribute属性的意思我们程序员自己添加的属性我
们称为自定义属性 index
console.log(div.getAttribute('id'));I
console.log(div.getAttribute('index'));
</script>

2.设置属性值
element.属性=‘值’ 设置内置属性值。

element.setAttribute(‘属性’,‘值’);

区别：
element.属性 设置内置属性值

element.setAttribute(属性’); 主要设置自定义的属性（标准）

//2.设置元素属性值
//(1)element.属性='值'
div.id = 'test';
div.className ='navs';
//(2)element.setAttribute('属性','值');主要针对于自定义属性
div.setAttribute('index',2);
div.setAttribute('class','footer');//class特殊这里面写的就是class不是className

3.移除属性

·element.removeAttribute(‘属性’);

//3移除属性 removeAttribute(属性）
div.removeAttribute('index');

4.8 H5自定义属性

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

自定义属性获取是通过getAttribute(’属性’)获取。

但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。

H5给我们新增了自定义属性：

1.设置H5自定义属性

H5规定自定义属性data-开头做为属性名并且赋值。

比如<div data-index=“1”></div>
或者使用JS设置
element.setAttribute(‘data-index’,2)

2.获取H5自定义属性

1.兼容性获取 element.getAttribute(‘data-index’);

2.H5新增 element.dataset.index或者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>

5.节点操作

5.1为什么学节点操作

获取元素通常使用两种方式：

1.利用DOM提供的方法获取元素
①document.getElementByld()
②document.getElementsByTagName()
③document.querySelector等
④逻辑性不强、繁琐

2.利用节点层级关系获取元素
①利用父子兄节点关系获取元素
②逻辑性强，但是兼容性稍差

这两种方式都可以获取元素节点，我们后面都会使用，但是节点操作更简单

5.2节点概述

网页中的所有内容都是节点（标签、属性、文本、注释等）,在DOM中，节点使用node来表示。

HTML DOM树中的所有节点均可通过JavaScript进行访问，所有HTML元素（节点）均可被修改，也可以
创建或删除

一般地，节点至少拥有nodeType(节点类型）、nodeName(节点名称）和nodeValue(节点值）这三个
基本属性。
·元素节点 nodeType为1
·属性节点nodeType为2
·文本节点nodeType为3 (文本节点包含文字、空格、换行等）
我们在实际开发中，节点操作主要操作的是元素节点

5.3节点层级

利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。

1.父级节点

node.parentNode

·parentNode属性可返回某节点的父节点，注意是最近的一个父节点
·如果指定的节点没有父节点则返回null

2.子节点

1.parentNode.childNodes(标准）

parentNode.childNodes返回包含指定节点的子节点的集合，该集合为即时更新的集合。

注意：返回值里面包含了所有的子节点，包括元素节点，文本节点等。

如果只想要获得里面的元素节点，则需要专门处理。所以我们一般不提倡使用childNodes

var ul=document.queryselector("ul');
for(var i = 0; i &lt; ul. childNodes. length; i++){
	if (ul.childNodes[i].nodeType=1){
	//u1.childNodes[i]是元素节点
	console.log(ul.childNodes[i]);
    }
}

2.parentNode.children(非标准）

parentNode.children是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返
回（这个是我们重点掌握的）。
虽然children是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用

3.parentNode.firstchild

firstChild返回第一个子节点（不管是文本节点还是元素节点），找不到则返回null。同样，也是包含所有的节点。

4.parentNode.lastChild

lastChild返回最后一个子节点（不管是文本节点还是元素节点），找不到则返回null。同样，也是包含所有的节点。

5.parentNode.firstElementChild

firstElementchild返回第一个子元素节点，找不到则返回null。

6.parentNode. lastElementChild

lastElementchild返回最后一个子元素节点，找不到则返回null。
注意：这两个方法有兼容性问题，IE9以上才支持。

实际开发中，firstchild和lastchild包含其他节点，操作不方便，而firstElementchild和
lastElementchild又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢？
解决方案：
1.如果想要第一个子元素节点，可以使用parentNode.chilren[0]

<script>
var ol = document.querySelector('ol');
//1.firstchild第一个子节点不管是文本节点还是元素节点
console.log(ol.firstchild);
console.log(ol.lastChild);
//2.firstElementChild返回第一个子元素节点
console.log(ol.firstElementChild);
console.log(ol.lastElementChild);
//3.实际开发的写法既没有兼容性问题又返回第一个子元素
console.log(ol.children[0]);
console.log(ol.children[ol.children.length-1]);
</script>

3.兄弟节点

1.node.nextsibling

nextsibling返回当前元素的下一个兄弟节点，找不到则返回nu11。同样，也是包含所有的节点。

2.node.previousSibling

previoussibling返回当前元素上一个兄弟节点，找不到则返回nu11。同样，也是包含所有的节点。

3.node.nextElementSibling

nextElementsibling返回当前元素下一个兄弟元素节点，找不到则返回null。

4.node.previousElementSibling

previousElementsibling返回当前元素上一个兄弟节点，找不到则返回null。
注意：这两个方法有兼容性问题，IE9以上才支持。

问：如何解决兼容性问题？
答：自己封装一个兼容性的函数

function getNextElementSibling(element){
	var el=element;
	while(el=el.nextsibling){
		if (el.nodeType ===1) {
			return el;
		}
	}
	return null ;
}

5.4创建节点

document.createElement ('tagName')

document.createElement()方法创建由tagName指定的HTML元素。因为这些元素原先不存在，
是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。

5.4添加节点

1.node.appendchild(child)

node.appendchild()方法将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的
after伪元素。

2.node.insertBefore(child,指定元素）

node.insertBefore()方法将一个节点添加到父节点的指定子节点前面。类似于css里面的before
伪元素。

5.5删除节点

node.removechild(child)

node.removechild()方法从DOM中删除一个子节点，返回删除的节点。

5.6复制节点（克隆节点）

node.cloneNode()

node.cloneNode()方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点

注意：
1.如果括号参数为空或者为false,则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。

2.如果括号参数为true,则是深度拷贝，会复制节点本身以及里面所有的子节点。

5.7三种动态创建元素区别

·①document.write() （了解）
②element.innerHTML
③document. createElement()

区别
1.document.write是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
2.innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘
3.innerHTML创建多个元素效率更高（不要拼接字符串，采取数组形式拼接）,结构稍微复杂
4.createElement()创建多个元素效率稍低一点点，但是结构更清晰
总结：不同浏览器下，innerHTML效率要比creatElement高

6.DOM重点核心

文档对象模型（DocumentObjectModel,简称DOM),是W3C组织推荐的处理可扩展标记语言
(HTML或者XML)的标准编程接口。

W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

1.对于JavaScript,为了能够使JavaScript操作HTML,JavaScript就有了一套自己的dom编程接口。

2.对于HTML,dom使得html形成一棵dom树.包含文档、元素、节点

事件高级

1.注册事件（绑定事件）

1.1注册事件概述

给元素添加事件，称为注册事件或者绑定事件。
注册事件有两种方式：传统方式和方法监听注册方式

传统注册方式
利用on开头的事件onclick

<button onclick= "alert('hi~)" ></button>

btn.onclick=function()

​ 特点：注册事件的唯一性,同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

方法监听注册方式
W3c标准推荐方式
addEventListener()它是一个方法
IE9之前的IE不支持此方法，可使用attachEvent()代替
特点：同一个元素同一个事件可以注册多个监听器按注册顺序依次执行

1.2 addEventListener 事件监听方式

eventTarget.addEventListener(type,listener[,useCapture])

eventTarget.addEventListener()方法将指定的监听器注册到eventTarget(目标对象）上，当该
象触发指定的事件时，就会执行事件处理函数。

该方法接收三个参数：
①type:事件类型字符串，比如click、mouseover,注意这里不要带on
②listener:事件处理函数，事件发生时，会调用该监听函数
③useCapture:可选参数，是一个布尔值，默认是false。学完DOM事件流后，我们再进一步学习

//2.事件侦听注册事件 addEventListener
//(1)里面的事件类型是字符串 必定加引号 而且不带on
//(2)同一个元素同一个事件可以添加多个侦听器（事件处理程序）
btns[1].addEventListener('click',function(){
	alert(22);
})
btns[1].addEventListener('click',function(){
	alert(33);
})

1.3 attachEvent 事件监听方式 （了解）

eventTarget.attachEvent(eventNameWithOn,callback)

eventTarget.attachEvent()方法将指定的监听器注册到eventTarget(目标对象）上，当该对象触发指定的事件时，指定的回调函数就会被执行。

该方法接收两个参数：

①eventNameWithOn:事件类型字符串，比如onclick、onmouseover, 这里要带on
②callback:事件处理函数，当目标触发事件时回调函数被调用

注意：IE8及早期版本支持

1.4注册事件兼容性解决方案 （了解）

function addeventListener(element,eventName,fn){
	//判断当前浏览器是否支持 addEventListener 方法
	if (element.addEventListener) {
		element.addEventListener(eventName,fn);//第三个参数默认是false
	} else if (element .attachEvent) {
		element.attachEvent('on'+eventName,fn);
	} else {
		//相当于element.οnclick=fn;
		element['on'+eventName]=fn;
    }
}

兼容性处理的原则：首先照顾大多数浏览器，再处理特殊浏览器

2.删除事件（解绑事件）

2.1删除事件的方式

1.传统注册方式

eventTarget.onclick=null;

2.方法监听注册方式

① eventTarget.removeEventListener(type,listener[,useCapture]);

② eventTarget.detachEvent(eventNameWithon,callback);

<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.
    divs[2].attachEvent('onclick',fn1);
    
    function fn1(){
    	alert(33);
    	divs[2].detachEvent('onclick',fn1）;
	}
</script>

2.2删除事件兼容性解决方案

function removeEventListener(element,eventName,fn){
	//判断当前浏览器是否支持removeEventListener方法
	if (element.removeEventListener){
		element.removeEventListener(eventName,fn);//第三个参数默认是false
	} else if (element . detachEvent ) {
		element.detachEvent('on'+eventName,fn);
	}else{
		element['on'+eventName]=null;
}

3.DOM事件流

事件流描述的是从页面中接收事件的顺序。

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。

比如我们给一个div注册了点击事件：

DOM事件流分为3个阶段：

1.捕获阶段

2.当前目标阶段

3.冒泡阶段

在这里插入图片描述

事件冒泡：IE最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到到DOM最顶层节点的过程

事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到到最具体的元素接收的过程。

注意

1.JS代码中只能执行捕获或者冒泡其中的一个阶段。

2.onclick和attachEvent只能得到冒泡阶段。

3.addEventListener(type,listener[,useCapture])第三个参数如果是true,表示在事件捕获阶段调用事件处理程序；如果是false(不写默认就是false),表示在事件冒泡阶段调用事件处理程序。

4.实际开发中我们很少使用事件捕获，我们更关注事件冒泡。

5.有些事件是没有冒泡的，比如onblur、onfocus、onmouseenter、onmouseleave

6.事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事件，我们后面讲解。

4.事件对象

4.1什么是事件对象

eventTarget.onclick=function(event){}
eventTarget.addEventListener('click',function(event){})
//这个event就是事件对象，我们还喜欢的写成e或者evt

官方解释：event对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。

简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象
event,它有很多属性和方法。

比如：

1.谁绑定了这个事件。

2.鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。

3.键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。

4.2事件对象的使用语法

eventTarget.οnclick=function(event){
	//这个event就是事件对象，我们还喜欢的写成e或者evt
eventTarget.addEventListener('click',function(event){
	//这个event就是事件对象，我们还喜欢的写成e或者evt
})

这个event是个形参，系统帮我们设定为事件对象，不需要传递实参过去。

当我们注册事件时，event对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）。

4.3事件对象的兼容性方案

事件对象本身的获取存在兼容问题：

1.标准浏览器中是浏览器给方法传递的参数，只需要定义形参e就可以获取到。

2.在IE6~8中，浏览器不会给方法传递参数，如果需要的话，需要到window.event中获取查找。

解决：
e = e II window . event ;

4.4事件对象的常见属性和方法

在这里插入图片描述

//常见事件对象的属性和方法
//1.e.target I返回的是触发事件的对象（元素）this返回的是绑定事件的对象（元素）
// 区别:e.target 点击了那个元素，就返回那个元素 this 那个元素绑定了这个点击事件，那么就返回谁

//1.返回事件类型
var div=document.querySelector('div');
div.addEventListener('click',fn);
div.addEventListener('mouseover',fn);
div.addEventListener('mouseout',fn);
function fn(e){
	console.log(e.type);
}

//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;
    //我们可以利用return false 也能阻止默认行为 没有兼容性问题 特点： return 后面的代码不执行了，而且只限于传统的注册方式
	return false;
	alert(11);
}

5.阻止事件冒泡

5.1阻止事件冒泡的两种方式

事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到到DOM最顶层节点。

事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。

阻止事件冒泡

·标准写法：利用事件对象里面的stopPropagation()方法

e.stopPropagation ( )

·非标准写法：IE6-8利用事件对象cancelBubble属性

<script>
    //常见事件对象的属性和方法
    //阻止冒泡 dom 推荐的标准 stopPropagation()
    var son=document.querySelector('.son');
    son.addEventListener('click',function(e){
        alert('son');
        e.stopPropagation();//stop停止Propagation传播
        e.cancelBubble=true;//非标准cancel取消bubble泡泡
    },false);

    var father=document.querySelector('.father');
    father.addEventListener('click',function(){
    	alert('father');
    },false);
    document.addEventListener('click',function(){
    	alert('document');
    })
</script>

5.2阻止事件冒泡的兼容性解决方案

if(e&&e.stopPropagation){
	e.stopPropagation();
}else{
	window.event.cancelBubble=true;
}

6.事件委托（代理、委派）

事件委托

事件委托也称为事件代理，在jQuery里面称为事件委派。

事件委托的原理

不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

以上案例：给ul注册点击事件，然后利用事件对象的target来找到当前点击的li,因为点击li,事件会冒泡到山上，ul有注册事件，就会触发事件监听器。

事件委托的作用

我们只操作了一次DOM,提高了程序的性能。

7.常用的鼠标事件

7.1常用的鼠标事件

在这里插入图片描述

1.禁止鼠标右键菜单
contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

document.addEventListener('contextmenu',function(e){
	e.preventDefault ( ) ;
})

2.禁止鼠标选中（selectstart开始选中）

document.addEventListener('selectstart',function(e){
	e.preventDefault();
})

7.2鼠标事件对象

event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象
MouseEvent和键盘事件对象KeyboardEvent。

在这里插入图片描述

8.常用的键盘事件

8.1常用键盘事件

事件除了使用鼠标触发，还可以使用键盘触发。

在这里插入图片描述

注意：
1.如果使用addEventListener不需要加on
2.onkeypress和前面2个的区别是，它不识别功能键，比如左右箭头，shift等。
3.三个事件的执行顺序是：keydown–keypress–keyup

8.2键盘事件对象

在这里插入图片描述

注意：onkeydown和onkeyup不区分字母大小写，onkeypress区分字母大小写。
在我们实际开发中，我们更多的使用keydown和keyup,它能识别所有的键（包括功能键）
Keypress 不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCII值
件代理，在jQuery里面称为事件委派。

事件委托的原理

不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

以上案例：给ul注册点击事件，然后利用事件对象的target来找到当前点击的li,因为点击li,事件会冒泡到山上，ul有注册事件，就会触发事件监听器。

事件委托的作用

我们只操作了一次DOM,提高了程序的性能。