文档章节

关于JavaScript事件绑定的方式

阿振
 阿振
发布于 2015/12/04 09:34
字数 947
阅读 66
收藏 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

没有更多内容

加载失败,请刷新页面

加载更多

如何从平面设计转行到UI设计?

时代的变迁,科技的进步,工具的发展,薪资的差距,促使许多人转行的原因,但平面与界面两者之间有着哪些的差异呢?如果,想要转行又该具备哪些条件呢? 平面、界面设计之间的差异性 平面设计...

mo311
19分钟前
3
0
线程池整理

一般在生产环境中,我们都不会直接new一个Thread,然后再去start(),因为这么做会不断频繁的创建线程,销毁线程,过大的线程会耗尽CPU和内存资源,大量的垃圾回收,也会给GC带来压力,延长GC停顿时间...

算法之名
21分钟前
5
0
一句话说清分布式锁,进程锁,线程锁

转载自: https://www.cnblogs.com/intsmaze/p/6384105.html 在分布式集群中的开发中,线程锁往往不能支持全部场景的使用,必须引入新的分布式锁。 线程锁,进程锁,分布式锁 线程锁: 主要用...

nao
23分钟前
1
0
springboot2.x支持自定义JSP标签

JSP标签的tld必须放在webapp下的WEB-INF目录下 参考: https://stackoverflow.com/questions/44746757/using-custom-tag-files-in-jsp-with-spring-boot#...

EasyProgramming
25分钟前
1
0
pg数据库 upsert使用

原文地址 https://blog.csdn.net/rudygao/article/details/50498908 --创建测试数据表create table t (id int constraint idx_t_id primary key,name varchar(20) constraint cst_name no......

philonic
28分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部