javascript - 工作笔记 (事件绑定)
背景:
目前所做的项目,只能使用的是原生的javascript。对于javascript的事件绑定想必大家都懂得语法:
1,在标签中使用属性调用方法:<div onclick="AAAA();"></div>
2,在javascript中对标签对象绑定数据:
<div id="test"></div>
var item = document.getElementById("test");
item.onclick = function(){};
//方式一(不能绑定多个事件,如果有多个,后面会覆盖前面)
//无兼容性问题
item.attachEvent("onclick", function(){});
//附加事件,不会覆盖,触发时依次执行,IE特有
item.addEventListener();
//同上,IE9,Firefox,Safari,Chrome和Opera都支持这个
在使用中,经常会使用到绑定事件,为了兼顾一些浏览器的兼容性,在事件处理的时候,不得不多做些处理。
后来在网上看到了一位网友对于事件绑定的封装,感觉很不错,于是就借鉴来了,嘿嘿。
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
function addEvent(elementment, type, handler) {
if(!handler.$$guid) handler.$$guid = addEvent.guid++;// 为每个事件处理函数赋予一个独立的ID if(!elementment.events) elementment.events = {};// 为元素建立一个事件类型的散列表 var handlers = elementment.events[type];// 为每对元素/事件建立一个事件处理函数的散列表 if(!handlers) { handlers = elementment.events[type] = {}; if(elementment["on" + type]) {// 存储已有的事件处理函数(如果已存在一个) ] = elementment["on" + type]; } } handlers[handler.$$guid] = handler;// 在散列表中存储该事件函数 elementment["on" + type] = handleEvent;// 赋予一个全局事件处理函数来出来所有工作 } addEvent.guid = ;// 创建独立ID的计数器 function removeEvent(elementment, type, handler) { if(elementment.events && elementment.events[type]) {// 从散列表中删除事件处理函数 delete elementment.events[type][handler.$$guid]; } } function handleEvent(event) { var returnValue = true; event = event || fixEvent(window.event);// 获取事件对象(IE使用全局的事件对象) var handlers = this.events[event.type];// 获取事件处理函数散列表的引用 for(var i in handlers) {// 依次执行每个事件处理函数 this.$$handerEvent = handlers[i]; if(this.$$handerEvent(event) === false) { 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; } |
javascript - 工作笔记 (事件绑定)的更多相关文章
- javascript - 工作笔记 (事件四)
在javascript - 工作笔记 (事件绑定二)篇中,我将事件的方法做了简单的包装, JavaScript Code 12345 yx.bind(item, "click&quo ...
- javascript - 工作笔记 (事件绑定二)
在上篇中的事件绑定方法,相信大家都看到过了. 不过这里有点小小的问题,这些方法,变量都是全局的,难免会与其他的库或者方法发生冲突而被覆盖,因此,我在这里做了小小的封装,如下: JavaScript ...
- JavaScript学习笔记——事件
javascript事件基础和事件绑定 一.事件驱动 1.事件 javascript侦测到的用户的操作或是页面的一些行为(怎么发生的) 2.事件源 引发事件的元素.(发生在谁的身上)3.事件处理程序 ...
- 理解Javascript中的事件绑定与事件委托
最近在深入实践js中,遇到了一些问题,比如我需要为动态创建的DOM元素绑定事件,那么普通的事件绑定就不行了,于是通过上网查资料了解到事件委托,因此想总结一下js中的事件绑定与事件委托. 事件绑定 ...
- 8. JavaScript学习笔记——事件
8. 事件 8.1 事件基础 /// 事件就是用户或浏览器自身执行的某种动作.诸如 click.load 和 mouseover,都是事件的名字.而响应某个事件的函数就叫做事件处理程序(或事件侦听器) ...
- JS学习笔记-事件绑定
一.传统事件模型 传统事件模型中存在局限性. 内联模型以HTML标签属性的形式使用,与HTML混写.这样的方式无疑造成了改动以及扩展的问题,已经非常少使用了. 脚本模型是将事件处理函数写到js文件里, ...
- javascript - 工作笔记 (事件三)
有关定义就不多说了,事件分两种 一,冒泡型事件 这是IE浏览器中事件模型的实现,顾名思义,就像水中的泡一样,自底而上,其经过的父元素都会触发对应的事件. 即:触发元素的父元素先于触发元素触发,看dem ...
- javascript closure 闭包 事件绑定
先来一个基本的例子 <!-- 实现一段脚本,使得点击对应链接alert出相应的编号 --> <meta http-equiv="Content-Type" con ...
- JavaScript 中 onload 事件绑定多个方法的优化建议
页面加载完毕时会触发 onload 事件.基于内容(HTML)要与行为(JavaScript)分离的编码思想,我们需要将一些对页面的初始化操作写在方法内,并通过window.onload = func ...
随机推荐
- HDU 1004 - Let the Balloon Rise(map 用法样例)
Problem Description Contest time again! How excited it is to see balloons floating around. But to te ...
- python基础:名称空间与作用域
Python的变量定义后都有自己的作用域,每个作用域内都有名字空间.名称空间就是变量名称与对象的关联关系.Python中使用变量名引用对象,需要使用该变量时,就在命名空间中进行搜索,获取对应的对象.从 ...
- 封装jQuery插件的步骤
引语:jQuery提供了很多插件,我们在开发的过程使用插件能节省时间简化开发也避免从头开始编写每个组件,单我们除了懂得使用别人已编写好的插件以外,也到懂得如何封装属于我们自己的插件,以下就是封装jQu ...
- 6 支持向量机SVM
注:理论部分参考:http://blog.csdn.net/v_july_v/article/details/7624837 (1)SVM是现成最好的分类器,这里“现成”指的是分类器不加修改即可直接使 ...
- python 网络编程第三版
为服务端增加多线程解决方案 1.服务端代码如下: ***这个版本并没有真正的起到多线程的作用,主要原因在于t.join():以后的版本会改进这个问题*** #!/usr/bin/python #!co ...
- 关于“创业者与VC见面的10个不成文细节点”
著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:Will Wang链接:http://www.zhihu.com/question/19641135/answer/50974 ...
- Flex中如何通过showAllDataTips属性使鼠标移动到图表时显示所有的数据Tips的例子
原文 http://blog.minidx.com/2008/11/10/1616.html 接下来的例子演示了Flex中如何通过showAllDataTips属性,使鼠标移动到图表时显示所有的数据T ...
- EventBus源码解析
用例 本文主要按照如下例子展开: //1. 新建bus对象,默认仅能在主线程上对消息进行调度 Bus bus = new Bus(); // maybe singleton //2. 新建类A(sub ...
- cdoj 排名表 拓扑排序 排名输出 贪心
//并不理解为什么需要反向建图,由大到小倒序确定排名.感觉正向由小到大和反向由大到小应该是一样的. 解:拓排+贪心,反向建边,先找排名靠后的(now,不知道为什么) #include<cstdi ...
- dhtmlgrid修改,支持IE10
因为项目IE升级,导致原来使用的dhtmlgrid无法正常显示,同时通过loadxml接口还有属性不支持. 花了半天时间对dhtmlgrid进行了修改,能够支持IE10正常加载显示. edit by ...