文档章节

关于JavaScript事件绑定的方式

阿振
 阿振
发布于 2015/12/04 09:34
字数 947
阅读 65
收藏 4

JavaScript事件绑定

本文介绍一些JavaScript事件绑定的常用方法及其优缺点,同时在最后展示一个由 Dean Edwards 写的一个比较完美的事件绑定方案。


传统方式

element.onclick = function(e){ // ... };
  1. 传统绑定的优点
    • 非常简单和稳定,可以确保它在你使用的不同浏览器中运作一致
    • 处理事件时,this关键字引用的是当前元素,这很有帮组
  2. 传统绑定的缺点 
    • 传统方法只会在事件冒泡中运行,而非捕获和冒泡
    • 一个元素一次只能绑定一个事件处理函数。新绑定的事件处理函数会覆盖旧的事件处理函数
    • 事件对象参数(e)仅非IE浏览器可用

W3C方式

element.addEventListener('click', function(e){ // ... }, false);


  1. W3C绑定的优点
    • 该方法同时支持事件处理的捕获和冒泡阶段。事件阶段取决于addEventListener最后的参数设置:false (冒泡) 或 true (捕获)。
    • 在事件处理函数内部,this关键字引用当前元素。
    • 事件对象总是可以通过处理函数的第一个参数(e)捕获。
    • 可以为同一个元素绑定你所希望的多个事件,同时并不会覆盖先前绑定的事件
  2. W3C绑定的缺点
    • IE不支持,你必须使用IE的attachEvent函数替代。

IE方式

element.attachEvent('onclick', function(){ // ... });
  1. IE方式的优点
    • 可以为同一个元素绑定你所希望的多个事件,同时并不会覆盖先前绑定的事件。
  2. IE方式的缺点
    • IE仅支持事件捕获的冒泡阶段
    • 事件监听函数内的this关键字指向了window对象,而不是当前元素(IE的一个巨大缺点)
    • 事件对象仅存在与window.event参数中
    • 事件必须以ontype的形式命名,比如,onclick而非click
    • 仅IE可用。你必须在非IE浏览器中使用W3C的addEventListener

Dean Edwards的方案(addEvent/removeEvent库)


function addEvent(elementment, type, handler) {
    
        // 为每个事件处理函数赋予一个独立的ID
        if(!handler.$$guid) handler.$$guid = addEvent.guid++;
    
        // 为元素建立一个事件类型的散列表
        if(!elementment.events) elementment.events = {};
    
        // 为每对元素/事件建立一个事件处理函数的散列表
        var handlers = elementment.events[type];
    
        if(!handlers) {
            handlers = elementment.events[type] = {};
            // 存储已有的事件处理函数(如果已存在一个)
            if(elementment["on" + type]) {
                handlers[0] = elementment["on" + type];
            }
        }
    
        // 在散列表中存储该事件函数
        handlers[handler.$$guid] = handler;
    
        // 赋予一个全局事件处理函数来出来所有工作
        elementment["on" + type] = handleEvent;
    }
    
    // 创建独立ID的计数器
    addEvent.guid = 1;
    
    function removeEvent(elementment, type, handler) {
        // 从散列表中删除事件处理函数
        if(elementment.events && elementment.events[type]) {
            delementte elementment.events[type][handler.$$guid];
        }
    }
    
    function handleEvent(event) {
        var returnValue = true;
    
        // 获取事件对象(IE使用全局的事件对象)
        event = event || fixEvent(window.event);
    
        // 获取事件处理函数散列表的引用
        var handlers = this.events[event.type];
    
        // 依次执行每个事件处理函数
        for(var i in handlers) {
            this.$$handerEvent = handlers[i];
            if(this.$$handlerEvent(event) === fasle) {
                returnValue = false;
            }
        }
        return returnValue;
    }
    
    // 增加一些IE事件对象缺乏的方法
    function fixEvent(event) {
        event.preventDefault = fixEvent.preventDefault;
        event.stopPropagation = fixEvent.stopPropagation;
        return event;
    }
    
    fixEvent.preventDefault = function() {
        this.returnValue = false;
    }
    
    fixEvent.stopPropagation = function() {
        this.cancelBubble = true;
    }





  1. addEvent的优点
    • 可以在所有浏览器中工作,就算是更古老无任何支持的浏览器
    • this关键字可以在所有的绑定函数中使用,指向的是当前元素
    • 中和了所有防止浏览器默认行为和阻止事件冒泡的各种浏览器特定函数
    • 不管浏览器类型,事件对象总是作为第一个对象传入
  2. addEvent的缺点
    • 仅工作在冒泡阶段(因为它深入使用事件绑定的传统方式)


本文转载自:

共有 人打赏支持
阿振
粉丝 10
博文 55
码字总数 58791
作品 0
成都
高级程序员
Javascitp事件绑定方式之差异

关于javascript事件绑定的资料网上已有很多,这里总结自己使用过程中遇到的问题及得出的想法。 事件绑定的方式 1. 在DOM中直接绑定,如onlick=”function(){}” 2. DOM对象属性绑定,如obj.o...

欧阳小瓜
2013/07/09
0
0
Shadow DOM系列5-JavaScript

英文链接:Shadow DOM: JavaScript, 02 SEPTEMBER 2013 on Web Components, Shadow DOM 我们目前已经对模板、HTML引入和 Shadow DOM(简介、基础、样式、样式续) 有了一定了解。所有这些技...

一配
2015/08/11
0
0
深入浅出 JavaScript 中的 this

在 Java 等面向对象的语言中,this 关键字的含义是明确且具体的,即指代当前对象。一般在编译期确定下来,或称为编译期绑定。而在 JavaScript 中,this 是动态绑定,或称为运行期绑定的,这就...

idea_biu
2012/09/05
0
0
JavaScript的基本使用

一、JavaScript的简单介绍   JavaScript是一种属于网络的脚本语言(简称JS),已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaS...

码农47
03/15
0
0
jQuery中bind方法与live方法区别

今天做项目时遇到的关于live与bind的问题,经查阅资料所得,live实际上为bind方法的变型,bind方法仅支持当前存在元素的事件绑定,而对于日后js动态生成的元素绑定无效。而live方法则弥补了此...

boxiZen
2013/12/20
0
3

没有更多内容

加载失败,请刷新页面

加载更多

下一页

day58-20180816-流利阅读笔记-待学习

苹果市值破万亿,iPhone 会涨价吗? Lala 2018-08-16 1.今日导读 苹果教父乔布斯曾经说过:“活着就是为了改变世界。”虽然他在 56 岁时就遗憾离世,但他极具创新和变革的精神早已深埋进苹果...

aibinxiao
21分钟前
4
0
[雪峰磁针石博客]python3快速入门教程1 turtle绘图-2函数

菲波那契序列: >>> # Fibonacci series:... # the sum of two elements defines the next... a, b = 0, 1>>> while b < 10:... print(b)... a, b = b, a+b...112......

python测试开发人工智能安全
今天
0
0
java环境变量配置最正确的方式

原贴:https://blog.csdn.net/qq_40007997/article/details/79784711,十分详细,亲测有效

kitty1116
今天
0
0
49.Nginx防盗链 访问控制 解析php相关 代理服务器

12.13 Nginx防盗链 12.14 Nginx访问控制 12.15 Nginx解析php相关配置(502的问题) 12.16 Nginx代理 扩展 502问题汇总 http://ask.apelearn.com/question/9109 location优先级 http://blog....

王鑫linux
今天
2
0
Nginx防盗链、访问控制、解析php相关配置、Nginx代理

一、Nginx防盗链 1. 编辑虚拟主机配置文件 vim /usr/local/nginx/conf/vhost/test.com.conf 2. 在配置文件中添加如下的内容 { expires 7d; valid_referers none blocked server_names *.tes......

芬野de博客
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部