文档章节

关于JavaScript事件绑定的方式

阿振
 阿振
发布于 2015/12/04 09:34
字数 947
阅读 67
收藏 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
小程序和Vue关于绑定数据书写上的区别

一、书写格式上 1、绑定事件 Vue: 小程序: Vue是通过:事件名字='回调函数名'。 小程序以或开头,后面跟着事件类型,例如、。自基础库版本1.5.0起,和后可以紧跟一个冒号,其含义不变,如。...

fenerchen
06/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

新鲜出炉,2019最新大厂面试题总汇!

在这个互联网技术快速迭代的时代,每个程序员都知道技术对于职业发展的重要性,那些技术好的程序员不仅薪资高,而且大多数集中在一线互联网企业工作,让人感觉非常高大上的同时,也想去大厂做...

Java干货分享
21分钟前
4
0
一、什么是ActiveMQ

首先我们应该先了解J2EE中的一个重要规范:JMS(The Java Message Service)Java消息服务。而JMS的客户端之间可以通过JMS服务进行异步的消息传输。它主要有两种模型:点对点和发布订阅模型。 ...

watermelon11
26分钟前
1
0
课时17 第三课Spark内部原理剖析与源码阅读(五)

为何spark shuffle比mapreduce shuffle慢? 主要是spark shuffle的shuffle read阶段还不够优秀,它是基于hashmap实现的,shuffle read会把shuffel write阶段已经排序数据给重新转成乱序的,转...

刀锋
43分钟前
1
0
Function函数式接口

Function函数式接口传入一个参数,返回一个值。 然后我们使用这个写个demo看看: 输出: 接口内部还有两个default方法和一个static方法,然后我们先看一下static方法 返回一个始终返回其输入...

woshixin
58分钟前
1
0
开发者和架构师之间最大的区别是什么?

1、开发者和架构师之间最大的区别是什么? 架构师和开发者一样,也经常写代码,简单的说,开发者和架构师之间最大的区别就是技术领导力。 软件架构师的角色需要理解最重要的架构驱动力是什么...

James-
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部