DOM中事件

事件机制

1.事件处理程序

为了在用户点击元素时执行代码,请向HTML事件属性添加JavaScript代码：

<div id="one" οnclick="test(event)">点击我啊</div>

<button id="btn">点击我</button>

window.onload = function () {

// 获取btn

var btn=document.getElementById('btn');

// 获取div

var div=document.getElementsByTagName('div')[0];

//点击按钮修改div的样式

btn.οnclick=function(){

alert('我被点击了');

div.style.width='200px';

div.style.height='200px';

div.style.backgroundColor='red';

div.innerHTML='我被点击了'

}

}

function test(event) {

alert(1);

console.log(1,event);

}

2.事件由三部分构成

事件源 事件类型 事件处理程序 我们也称为事件三要素

1.事件源：事件被触发的对象 -->按钮对象

2.事件类型：如何触发？触发什么事件？例如鼠标点击，键盘按下等…

3.事件处理程序：通过一个函数赋值的方式

执行事件的步骤

1.获取事件源

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

3.采用函数赋值形式添加事件处理程序

3.事件冒泡

在第四代Web浏览器（IE4和Netscape Communicator4）开始开发时，

开发团队碰到了一个有意思的问题：页面哪个部分拥有特定的事件呢？

要理解这个问题，可以在一张纸上画几个同心圆。把手指放到圆心上，

则手指不仅是在一个圆圈里，而且是在所有的圆圈里。

两家浏览器的开发团队都是以同样的方式看待浏览器事件的。

当你点击一个按钮时，实际上不光点击了这个按钮，还点击了它的容器

以及整个页面。事件流描述了页面接收事件的顺序。

结果非常有意思，IE和Netscape 开发团队提出了几乎完全相反

的事件流方案。IE将支持事件冒泡流，而NetscapeCommunicator将支持事件捕获流。

1.事件冒泡(IE事件流)

var inner = document.getElementById('inner');

var center = document.getElementById('center');

var outer = document.getElementById('outer');

// 当我们只有一个inner点击方法的时候 我们发现想要实现的效果和我们预期的一样

inner.onclick = function () {

console.log('我是inner点击的');

}

// 但是当我们给inner的父元素和祖先元素也添加点击事件时 一点击inner 所有祖先元素的事件都会被触发，这就是事件冒泡现象

center.onclick = function () {

console.log('我是center点击的');

}

outer.onclick = function () {

console.log('我是outer点击的');

}

outer.onclick = function (event) {

console.log(event);

console.log(this);

// 事件目标，触发事件的源元素

console.log(event.target);

// 当前事件目标，当前执行事件处理函数的元素

console.log(event.currentTarget);

console.log(this === event.currentTarget);

}

//查看文档中

function handle(event) {

console.log(this);

console.log(event.target);

console.log('--------');

}

// handle()

outer.onclick = handle;

center.onclick = handle;

inner.onclick = handle;

在点击页面中的id为inner的div元素，click事件会以如下顺序发生

1. div#inner

2. div#center

3. div#outer

4. body

5. html

6. document

4.阻止事件冒泡

event.stopPropagation()

如果点击方法时需要同时传递其他参数和event，直接传递event这个单词即可

5.事件捕获(Netscape事件流)

Netscape Communicator 团队提出了另一种名为事件捕获的事件流。

事件捕获的意思是最不具体的节点应该最先收到事件，

而最具体的节点应该最后收到事件。事件捕获实际上是为了在事件到达

最终目标前拦截事件。如果前面的例子使用事件捕获，则点击div元素

会以下列顺序触发 click 事件：

1. document

2. html

3. body

4. div

6.DOM事件流(事件冒泡和事件捕获)*******

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

事件冒泡(从内向外):最具体的节点应该最先收到事件，不具体的节点最后收到事件

事件捕获(从外向内):不具体的节点应该最先收到事件，而最具体的节点应该最后收到事件。

7.阻止事件默认行为

var btn=document.getElementsByTagName('button')[0];

var a=document.getElementsByTagName('a')[0];

btn.οnclick=function(event){

event.preventDefault()

}

a.οnclick=function(event){

event.preventDefault()

}

8.DOM0级事件 DOM2级事件

DOM2级事件

addEventListener()

它们接收 3 个参数：事件名、事件处理函数和一个布尔值，

true 表示在捕获阶段调用事件处理程序，false（默认值）

表示在冒泡阶段调用事件处理程序。

removeEventListener()

var outer=document.getElementById('outer');

var center=document.getElementById('center');

var inner=document.getElementById('inner');

function handler(){

console.log(this.id);

}

outer.addEventListener('click',handler,true);

center.addEventListener('click',handler,true);

inner.addEventListener('click',handler,true);

}

9.事件代理(事件委托)

将本应该添加给子元素的事件添加给父元素

事件委托就是当事件触发时，把要做的事委托给父元素（或父元素的父元素）

来处理。也就是：利用冒泡的原理，把事件加到父级上，

通过判断事件来源的子集，执行相应的操作。使用事件委托技术能让你

避免对特定的每个节点添加事件监听器。

list.οnclick=function(event){

switch(event.target.id){

case 'one':

event.target.innerHTML='我是One'

break;

case 'two':

event.target.innerHTML='我是two'

break;

case 'three':

event.target.innerHTML='我是three'

break;

}

}

10.事件类型

1.鼠标滚动事件onscroll

<div id="d1" style="width: 100px;height: 100px;border: 1px solid; overflow: auto;">我是div标签我是div标签我是div标签我是div标签我是div标签我是div标签我是div标签我是div标签我是div标签我是div标签我是div标签</div>

<script>

var d1 = document.getElementById('d1');

d1.onscroll = function () {

console.log('onscroll');

}

</script>

2.焦点事件

blur 当元素失去焦点时触发。这个事件不冒泡，所有浏览器都支持。

focus 当元素获得焦点时触发。这个事件不冒泡，所有浏览器都支持。

<input type="text" id="inp1">

<script>

var inp1 = document.getElementById('inp1');

// 失去焦点触发

inp1.onblur = function () {

console.log('失去焦点');

console.log(this.value);

}

// 获得焦点触发

inp1.onfocus = function () {

console.log('获得焦点');

}

</script>

3.鼠标事件

<div id="d1"></div>

<script>

var d1 = document.getElementById('d1');

// 单击事件

d1.onclick = function (event) {

console.log('click');

console.log(event);

}

// 双击事件

d1.ondblclick = function () {

console.log('dblclick');

}

// 鼠标移入事件

d1.onmouseenter = function () {

console.log('mouseenter');

}

// 鼠标移出事件

d1.onmouseleave = function () {

console.log('mouseleave');

}

// 鼠标在元素内部移动时触发

d1.onmousemove = function () {

console.log('mousemove');

}

</script>

4.键盘事件

<input type="text" id="inp1">

<script>

var inp1 = document.getElementById('inp1');

// 按下某个按键是触发

inp1.onkeydown = function (event) {

if (event.keyCode == 13) {

console.log('确认');

console.log(this.value);

}

}

// 按下键盘上某个键并产生字符时触发，而且持续按住会重复触发

inp1.onkeypress = function (event) {

console.log(event.keyCode);

}

// 用户释放键盘上某个键时触发

inp1.onkeyup = function (event) {

console.log(event.keyCode);

}

</script>