Web前端中javaScript设计模式事件委派

一、事件委派
当给多个子元素绑定监听事件，利用事件冒泡的特性(子元素发生事件，默认事件会进行向上传递的过程)，取消对子元素的监听事件，给父元素绑定相同类型的监听事件。

优势：

减少绑定事件

可以绑定未来元素

减少浏览器的开销

寻找触发事件元素:

为什么要找 : this永远指向的是绑定事件的元素（父元素）

使用;

高级浏览器: target 和 srcElement

IE:srcElement

执行代码：

1 /*

2 当鼠标点击li则对应的li背景变为绿色

3 原来：给所有的li绑定事件

4 现在：利用冒泡的特性给ul绑定事件对象

5 优势：

6 减少绑定事件

7 可以绑定未来元素

8 减少浏览器的开销

9 */

10 // 获得ul的元素对象

11 var ul = document.getElementsByTagName(‘ul’)[0];

12 // 给ul绑定事件对象

13 ul.onclick = function(e) {

14 console.log(e);

15 // console.log(this);

16 // e.target指向触发事件的元素

17 // console.log(e.target);

18 // 判断是否为li元素

19 if (e.target.nodeName === ‘LI’) {

20 e.target.style.backgroundColor = ‘green’;

21 }

22 }

二、策略模式
1 // 声明策略

2 var strategy = (function() {

3 // 策略的对象

4 obj = {

5 string: function(value) {

6 var reg = /¹+$/i;

7 if (reg.test(value)) {

8 return true;

9 } else {

10 return false;

11 }

12 },

13 number: function(value) {

14 var reg = /\d+$/;

15 if (reg.test(value)) {

16 return true;

17 } else {

18 return false;

19 }

20 }

21 };

22 // 返回一个对象

23 return {

24 check: function(value, type) {

25 return obj