JavaScript（事件处理及案例）

目录

一、事件处理

1、注册事件

（1）传统方式注册

（2）事件监听方式

2、删除事件

（1）传统方式

 （2）标准方式

3、DOM事件流

二、事件对象

1、事件对象

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

（1）对比e.target和this的区别

（2）阻止默认行为

（3）阻止事件冒泡

（4）事件委托

---

一、事件处理

事件：用户进行的某种操作

事件源：触发事件的对象

事件处理程序（函数）：当事件被触发后所执行的操作（代码）

1、注册事件

事件的户注册：让浏览器对象能够识别事件

（1）传统方式注册

元素对象.事件名 = function(){
          事件处理程序；
}

特点： 事件处理具有唯一性,同一个元素同一个事件只能注册一个处理函数,后面注册的函数会将前面注册的覆盖掉。

（2）事件监听方式

可以给同一个DOM对象同时注册多个事件处理程序（函数）

DOM对象.addEventListener(type,callback,[capture]);

 type: 表示事件类型（若click、change、mouseover等）

callback：事件处理程序（函数）

capture：可选参数,默认值为false,表示在事件冒泡阶段进行处理      true,表示在事件捕获阶段处理

2、删除事件

（1）传统方式

DOM对象.事件名 = null;

 （2）标准方式

DOM对象.removeEventListener(type,callback);

3、DOM事件流

定义：是指当事件发生时，会在发生事件的元素节点与DOM树根节点之间按照特定的顺序进行传播，这个过程称之为事件流。

（1）捕获方式：网景公司

（2）冒泡方式：微软公司

（3）先捕获后冒泡：W3C

二、事件对象

1、事件对象

事件对象（event）：是一个对象，封装了跟事件有关的所有数据。只有在事件发生时才存在，由系统自动创建。是事件处理程序（函数）

注意：因为在事件触发时就会产生事件对象，并且系统会以实参的形式传给事件处理函数。所以，在事件处理函数中需要用一个形参来接收事件对象event

获取event对象

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

e.target	返回触发事件的对象
e.type	事件类型
e.stopPropagation()	阻止事件冒泡
e.preventDefault()	阻止默认事件

注意： 表中的type属性是标准浏览器和早期版本IE浏览器的事件对象的公有属性，通过该属性可以获取发生事件的类型，如click、mouseover等（不带on）。

（1）对比e.target和this的区别

在事件处理中e.target返回的是触发事件的对象，而this返回的是绑定事件的对象

div.onclick = function(e) {
  e = e || window.event;
  var target = e.target || e.srcElement;
  console.log(target);
}

（2）阻止默认行为

在实际开发中，为了使程序更加严谨，想要确定含有默认行为的标签符合要求后，才能执行默认行为时，可利用事件对象的preventDefault()方法和returnValue属性，禁止所有浏览器执行元素的默认行为。需要注意的是，只有事件对象的cancelable属性设置为true，才可以使用preventDefault()方法取消其默认行为。

百度

（3）阻止事件冒泡

可以利用事件对象调用stopPropagation()方法和设置cancelBubble属性，实现禁止所有浏览器的事件冒泡行为。

if (window.event) {		// 早期版本的浏览器
  window.event.cancelBubble = true;
} else {				// 标准浏览器
  e.stopPropagation();
}

（4）事件委托

事件委托的原理是，不给每个子节点单独设置事件监听器，而是把事件监听器设置在其父节点上，让其利用事件冒泡的原理影响到每个子节点。

简而言之，就是不给子元素注册事件，给父元素注册事件，让处理代码在父元素的事件中执行。

这样做的的优点在于，只操作了一次DOM ，提高了程序的性能。

  
我是第 1 个li
  // …此处省略多个
标签