javascript原生框架(六)--事件处理

发表于 | 分类于 | 阅读次数:

事件绑定

  1. DOM0方式

    • 通过dom元素的（on + 事件名称）属性来绑定事件，并且赋值为 一个字符串
    • 上述字符串为 执行该事件的代码块（逻辑）
    • 缺点: 可读性 以及 可维护性不好。

  2. DOM0方式的加强版

    • 通过dom元素的（on + 事件名称）属性来绑定事件，并且赋值为 事件处理函数
    • 缺点: 定义很多的全局函数，容易造成内存过大损耗。依然没有解决js代码 和 html的耦合度问题

  1. IE标准：

    • 通过attachEvent方法来绑定事件
    • 语法：dom.attachEvent(type, callback)
    • 移除事件：detachEvent(type, callback)
      • 注意：如果想要删除某个事件的处理函数，不能将该处理函数定义为匿名的

  2. W3C标准

    • 通过addEventListener方法来给dom元素绑定事件
    • 语法: dom.addEventListener(type, callback, useCapture) useCapture默认值为 false
    • 移除事件：removeEventListener(type, callback)
      • 注意：如果想要删除某个事件的处理函数，不能将该处理函数定义为匿名的

  3. 事件流

    • 概念：用户在触发某一动作时，页面所做相关反映的过程。
    • 三个阶段：
      • 事件捕获阶段
      • 处于事件源阶段
      • 冒泡阶段
    • 事件流种类：
      • 捕获型事件流: 事件处理函数 是在 事件的捕获阶段执行
      • 冒泡型事件流：事件处理函数 是在 事件的冒泡阶段执行

  4. attachEvent 和 addEventListener 区别

    • 参数个数不同
    • 事件类型 传值也不同
      • IE：要+ ‘on’前缀
      • W3C：不需要
    • 在绑定多个事件处理函数时，IE在执行处理函数时，顺序不定（得看版本）；
      而W3C，按照队列结构来依次执行事件的处理函数
    • 在事件处理函数内this指向不同
      • IE: window
      • w3c: 返回正在执行事件处理函数的 dom元素

  5. addEvent方法

    • 根据浏览器能力，提前返回 事件绑定方法
    • 如果浏览器符合W3C标准，使用addEventListener绑定事件
    • 否则就使用attachEvent来绑定事件

  6. removeEvent方法

    • 根据浏览器能力，提前返回 事件移除方法
    • 如果浏览器符合W3C标准，使用removeEventListener移除事件处理函数
    • 否则就使用detachEvent来移除事件处理函数

  7. on方法

    • 功能：给moyas对象上所有dom元素绑定事件
    • 实现思路
      • 遍历this上所有dom元素
      • 调用addEvent给当前遍历到的dom元素绑定事件
      • 返回this，实现链式编程

  8. off方法

    • 功能：移除moyas对象上所有dom元素的事件处理函数
    • 实现思路
      • 遍历this上所有dom元素
      • 调用removeEvent给当前遍历到的dom元素移除相应事件的处理函数
      • 返回this，实现链式编程

代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
// 提前返回
	var addEvent = function() {
		// 如果符合W3C标准，使用addEvnetListener绑定事件
		if (global.addEventListener) {
			return function(elem, type, callback, useCapture) {
				elem.addEventListener(type, callback, useCapture || false);
			};
		} else { // 否则就使用IE标准的 attachEvent绑定事件
			return function(elem, type, callback) {
				elem.attachEvent('on' + type, callback);
			};
		}
	}();
	
	//todo待解决问题
	//addEventListenter 中的this 指向 事件的触发者
    //attachEvlent 中的this 指向 window 对象
	var removeEvent = function() {
		if (global.removeEventListener) {
			return function(elem, type, callback) {
				elem.removeEventListener(type, callback);
			};
		} else {
			return function(elem, type, callback) {
				elem.detachEvent('on' + type, callback);
			};
		}
	}();
	// 事件模块
	moyas.fn.extend({
		on: function(type, callback, capture) {
			return this.each(function() {
				addEvent(this, type, callback, capture);
			});
		},
		off: function(type, callback) {
			return this.each(function() {
				removeEvent(this, type, callback);
			});
		}
	});
	moyas.each(['click', 'dblclick', 'keypress', 'keyup', 'keydown', 'mouseover', 'mouseout',
		'mouseenter', 'mouseleave', 'mousemove', 'mouseup', 'mousedown'], function(type) {
			moyas.fn[type] = function(callback, capture) {
				return this.on(type, callback, capture);
			};
		});