专栏首页梦魇小栈JQuery分析及实现part5之事件模块功能及实现

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

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

remove 方法

  1. 功能:将筛选出来的所有 dom 元素删除掉
  2. 实现思路
    • 遍历 this 上的所有 dom 元素;
    • 获取当前 dom 元素的父节点,调用 removeChild 方法删除自己;
    • 循环结束,返回 this .
remove: function() {
    return this.each(function() {
        this.parentNode.removeChild(this);
    });
},

empty 方法

  1. 功能:将筛选出来的所有 dom 元素,清空后代节点
  2. 实现思路
    • 遍历 this 上的所有 dom 元素;
    • 直接给当前 dom 元素的 innerHTML 属性赋值为空字符串;
    • 循环结束,返回 this ,实现链式编程.
empty: function() {
    return this.each(function() {
        this.innerHTML = '';
    });
}

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


事件部分begin

事件绑定

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

addEvent 方法

  1. 根据浏览器能力,提前返回事件绑定方法
  2. 如果浏览器符合 W3C 标准,使用 addEventListener 来绑定事件
  3. 否则就使用 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 方法

  1. 根据浏览器能力,提前返回事件移除方法
  2. 如果浏览器符合 W3C 标准,使用 removeEventListener 来移除事件处理函数
  3. 否则就使用 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 方法

  1. 功能:给 itcast 对象上的所有的 dom 元素绑定事件
  2. 实现思路
    • 遍历 this 上所有 dom 元素
    • 调用 addEvent 给当前遍历到的 dom 元素绑定事件
    • 返回 this ,实现链式编程
on: function(type, callback, capture) {
    return this.each(function() {
        addEvent(this, type, callback, capture);
    });
},

off 方法

  1. 功能:移除 itcast 对象上所有 dom 元素的事件处理函数
  2. 实现思路
    • 遍历 this 上所有 dom 元素
    • 调用 removeEvent 给当前遍历到的 dom 元素移除相应事件的处理函数
    • 返回 this ,实现链式编程
off: function(type, callback) {
    return this.each(function() {
        removeEvent(this, type, callback);
    });
}

click 方法

  1. 功能: 给 itcast 对象上的所有的 dom 元素绑定单击事件处理函数的
  2. 语法: itcast对象.click(callback);
  3. 实现思路
    • 遍历 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);
    };
});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JQuery分析及实现part3之属性模块功能及实现

    ihoey
  • JQuery分析及实现part4之DOM操作模块功能及实现

    ihoey
  • Node第一部分-初体验

    在 windows 上安装 NodeJs (本教程中使用)。使用 MSI 文件,并按照提示安装 NodeJs ,默认情况下,安装程序将 NodeJs 发行到 C...

    ihoey
  • JavaScript设计模式之工厂模式

    工厂模式是一种最常用的实例化对象模式,是用工厂方法代替new操作的一种模式。在工厂模式中,我们在创建对象时不会对客户端暴露创建逻辑,并且是通过使用一个共同的接口...

    用户6167509
  • 终端I/O---ttyS3: 3 inp

    #include <stdio.h> #include "time.h" #include <sys/types.h> #include <sys/stat....

    py3study
  • PL/SQL 联合数组与嵌套表

          通常情况下,在PL/SQL中,处理单行单列的数据可以使用标量变量,而处理单行多列的数据则使用PL/SQL记录是不错的选择。单列多行数据 则由联合数组...

    Leshami
  • 「每日五分钟,玩转JVM」:对象的内存布局

    一个对象根据不同情况可以被划分成两种情况,当对象是一个非数组对象的时候,对象头,实例数据,对齐填充在内存中三分天下,而数组对象中在对象头中多了一个用于描述数组对...

    山禾说
  • Java并发计数器探秘

    一提到线程安全的并发计数器,AtomicLong 必然是第一个被联想到的工具。Atomic* 一系列的原子类以及它们背后的 CAS 无锁算法,常常是高性能,高并...

    用户5397975
  • 把C++/CLI委托传入本地代码

    逍遥剑客
  • ASP.NET MVC三个重要的描述对象:ControllerDescriptor和ActionDescriptor的创建

    不论是用于描述Controller的ControllerDescriptor,还是用于描述Action方法的ActionDescriptor,都具有同步和异步两...

    蒋金楠

扫码关注云+社区

领取腾讯云代金券