社区首页 >专栏 >JQuery分析及实现part5之事件模块功能及实现

JQuery分析及实现part5之事件模块功能及实现

ihoey

发布于 2018-10-31 08:34:26

63000

代码可运行

文章被收录于专栏：梦魇小栈梦魇小栈

运行总次数：0

代码可运行

JQuery模块分析及其实现第五部分事件部分功能及实现,接第四部分!

remove 方法

功能:将筛选出来的所有 dom 元素删除掉
实现思路
- 遍历 this 上的所有 dom 元素;
- 获取当前 dom 元素的父节点,调用 removeChild 方法删除自己;
- 循环结束,返回 this .

remove: function() {
    return this.each(function() {
        this.parentNode.removeChild(this);
    });
},

empty 方法

功能:将筛选出来的所有 dom 元素,清空后代节点
实现思路
- 遍历 this 上的所有 dom 元素;
- 直接给当前 dom 元素的 innerHTML 属性赋值为空字符串;
- 循环结束,返回 this ,实现链式编程.

empty: function() {
    return this.each(function() {
        this.innerHTML = '';
    });
}

以上接第四部分 dom 操作模块

事件部分begin

事件绑定

DOM 0方式
- 通过 dom 元素的 on + 事件名 属性来绑定事件,并且赋值为一个字符串;
- 上述字符串为执行该事件的代码块(逻辑);
- 缺点:可读性以及可维护性不好.
DOM 0方式的加强版
- 通过 dom 元素的 on + 事件名 属性来绑定事件,并且赋值为一个事件处理函数;
- 缺点:定义很多的全局函数,容易造成内存过大的损耗,依然没有解决 js 代码和 html 的耦合度关系;
IE标准
- 通过 attachEvent 来绑定事件;
- 语法: dom.attachEvent(type, callback);
- 移除事件: detachEvent(type, callback);
  - 注意:如果想要删除某个事件的处理函数,不能将该处理函数定义为匿名的
W3C标准
- 通过 addEventListener 方法来给dom元素绑定事件;
- 语法: dom.addEventListener(type, callback, useCapture默认值为false);
- 移除事件: removEventListener(type, callback);
  - 注意:如果想要删除某个事件的处理函数,不能将该处理函数定义为匿名的
事件流
- 概念: 用户在触发某一动作时,页面所做相关反映的过程
- 三个阶段:
  - 事件捕获阶段
  - 处于事件源阶段
  - 冒泡阶段
- 事件流种类
  - 捕获型事件流: 事件处理函数是在事件的捕获阶段执行
  - 冒泡型事件流: 事件处理函数是在事件的冒泡阶段执行
attachEvent 和 addEventListener 区别
- 参数个数不同
- 事件类型传值不同
  - IE 标准需要加 on 前缀
  - W3C 标准不加 on 前缀
- 在绑定多个事件处理函数时，IE 在执行事件处理函数时,顺序不定(根据版本),而 W3C按照对垒结构来一次执行事件的处理函数
- 在事件处理函数内 this 指向不同
  - IE: window
  - W3C: 返回正在执行事件的处理函数的 dom 元素

addEvent 方法

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

//提前返回
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);
        };
    }
}();

removeEvent 方法

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

//提前返回
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);
        };
    }
}();

on 方法

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

on: function(type, callback, capture) {
    return this.each(function() {
        addEvent(this, type, callback, capture);
    });
},

off 方法

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

off: function(type, callback) {
    return this.each(function() {
        removeEvent(this, type, callback);
    });
}

click 方法

功能: 给 itcast 对象上的所有的 dom 元素绑定单击事件处理函数的
语法: itcast对象.click(callback);
实现思路
- 遍历 this 上的所有 dom 元素
- 调用 addEventListener 分别传值即可
- return this 实现链式编程

click: function(callback, capture) {
    return this.each(function() {
        addEvent(this, 'click', callback, capture);
    });
}

快捷绑定事件方法

itcast.each(['click', 'dblclick', 'keypress', 'keyup', 'keydown', 'mouseover', 'mouseout',
'mouseenter', 'mouseleave', 'mousemove', 'mouseup', 'mousedown'], function(type) {
    itcast.fn[type] = function(callback, capture) {
        return this.on(type, callback, capture);
    };
});