第一百三十六节,JavaScript,封装库--事件绑定
JavaScript,封装库--事件绑定
在函数库添加两个函数
添加事件绑定函数
删除事件绑定函数
添加事件绑定函数
/** addEvent()函数库函数,跨浏览器添加事件绑定,注意:传入事件名称时不要on
* 接收3个参数
* 参数1要绑定事件的元素对象,
* 参数2事件名称,也就是什么事件,注意:传入事件名称时不要on
* 参数3接收的事件执行函数
* 注意:一个元素对象,执行了多个相同的事件函数时只执行一次,其他的会被忽略,注意是相同的事件函数
* 说明:
* 事件函数里的this,代表绑定事件元素对象本身
* 事件函数里有一个可选参数e,e接收的元素event对象,传入addEvent()后跨浏览器获取到元素event对象,将元素event对象赋值给e
* 所以事件函数里的e,代表元素event对象,前提是首先要在事件函数传参e后,再在事件函数里调用e,得到元素event对象
* e.preventDefault()方法,在事件函数里写e.preventDefault()方法,兼容浏览器阻止事件元素对象默认行为,前提在事件函数要传参e
* e.stopPropagation()方法,在事件函数里写e.stopPropagation()方法,阻止元素对象的父级元素事件冒泡行为,前提在事件函数要传参e
**/
function addEvent(obj, type, fn) {
if (typeof obj.addEventListener != 'undefined') {
obj.addEventListener(type, fn, false);
} else {
//创建一个存放事件的哈希表(散列表)
if (!obj.events) obj.events = {};
//第一次执行时执行
if (!obj.events[type]) {
//创建一个存放事件处理函数的数组
obj.events[type] = [];
//把第一次的事件处理函数先储存到第一个位置上
if (obj['on' + type]) obj.events[type][0] = fn;
} else {
//同一个注册函数进行屏蔽,不添加到计数器中
if (addEvent.equal(obj.events[type], fn)) return false;
}
//从第二次开始我们用事件计数器来存储
obj.events[type][addEvent.ID++] = fn;
//执行事件处理函数
obj['on' + type] = addEvent.exec;
}
}
/*-------------------------------------------------------------------------------------*/
//为每个事件分配一个计数器
//JS一切皆为对象,所以addEvent.ID语法正确,实际上是个全局变量
addEvent.ID = 1;
//执行事件处理函数
addEvent.exec = function (event) {
var e = event || addEvent.fixEvent(window.event);
var es = this.events[e.type];
for (var i in es) {
es[i].call(this, e);
}
};
//同一个注册函数进行屏蔽
addEvent.equal = function (es, fn) {
for (var i in es) {
if (es[i] == fn) return true;
}
return false;
};
//把IE常用的Event对象配对到W3C中去
addEvent.fixEvent = function (event) {
event.preventDefault = addEvent.fixEvent.preventDefault;
event.stopPropagation = addEvent.fixEvent.stopPropagation;
return event;
};
//IE阻止默认行为
addEvent.fixEvent.preventDefault = function () {
this.returnValue = false;
};
//IE取消冒泡
addEvent.fixEvent.stopPropagation = function () {
this.cancelBubble = true;
};
/*---------------------------------------------------------------------------------------*/
删除事件绑定函数
/** removeEvent()函数库函数,跨浏览器删除事件绑定,注意:传入事件名称时不要on
* 接收3个参数
* 参数1接收事件绑定时的元素对象
* 参数2接收事件绑定时的事件名称,也就是什么事件,注意:传入事件名称时不要on
* 参数3接收事件绑定时的执行函数
**/
function removeEvent(obj, type, fn) {
if (typeof obj.removeEventListener != 'undefined') {
obj.removeEventListener(type, fn, false);
} else {
for (var i in obj.events[type]) {
if (obj.events[type][i] == fn) {
delete obj.events[type][i];
}
}
}
}
第一百三十六节,JavaScript,封装库--事件绑定的更多相关文章
- 第一百五十六节,封装库--JavaScript,延迟加载
封装库--JavaScript,延迟加载 延迟加载的好处,就是在浏览器视窗外的图片,不加载,拖动鼠标到浏览器视窗内后加载,用户不看的图片就不用加载,可以减少服务器大量流量 将图片的src地址用一张统一 ...
- 第一百五十五节,封装库--JavaScript,轮播器
封装库--JavaScript,轮播器 html <div id="banner"> <img src="img/banner1.jpg" a ...
- 第一百五十四节,封装库--JavaScript,表单验证--提交验证
封装库--JavaScript,表单验证--提交验证 将表单的所有必填项,做一个判断函数,填写正确时返回布尔值 最后在提交时,判断每一项是否正确,全部正确才可以 提交 html <div id= ...
- 第一百五十九节,封装库--JavaScript,表单序列化结合ajax提交数据
封装库--JavaScript,表单序列化结合ajax提交数据 封装库,表单序列化方法 /** xu_lie_biao_dan()方法,表单序列化方法,将自动获取指定表单里面的各项字段name值和va ...
- 第一百二十六节,JavaScript,XPath操作xml节点
第一百二十六节,JavaScript,XPath操作xml节点 学习要点: 1.IE中的XPath 2.W3C中的XPath 3.XPath跨浏览器兼容 XPath是一种节点查找手段,对比之前使用标准 ...
- 第三百三十六节,web爬虫讲解2—urllib库中使用xpath表达式—BeautifulSoup基础
第三百三十六节,web爬虫讲解2—urllib库中使用xpath表达式—BeautifulSoup基础 在urllib中,我们一样可以使用xpath表达式进行信息提取,此时,你需要首先安装lxml模块 ...
- 第一百三十九节,JavaScript,封装库--CSS选择器
JavaScript,封装库--修改元素选择器 就是将构造库函数修改成元素选择器,像css那样,输入#xxx .xxx xxx (获取指定id下的指定class下的指定标签元素) 修改后的基础库 / ...
- 第一百三十五节,JavaScript,封装库--拖拽
JavaScript,封装库--拖拽 封装库新增1个拖拽方法 /** tuo_zhuai()方法,将一个弹窗元素实现拖拽功能 * 注意:一般需要在css文件将元素里的某一个区块光标设置成提示可以拖拽, ...
- 第一百三十四节,JavaScript,封装库--遮罩锁屏
JavaScript,封装库--遮罩锁屏 封装库新增1个方法 /** zhe_zhao_suo_ping()方法,将一个区块元素设置成遮罩锁屏区块 * 注意:一般需要在css文件将元素设置成隐藏 ** ...
随机推荐
- Quartz JobStore管理Job
Quartz提供了RAMJobStore和JDBC JobStore两种方式用来Job,RAMJobStore将Job任务存入内存中,速度快:JobStore采用数据库的方式管理中,本文介绍JobSt ...
- SOA初探
背景 曾今SOA的概念犹如今日“云计算.大数据”一样,被炒得火热,不少企业便纷纷响应,并宣称会拥抱和实施SOA.而事实上,业界出现了两种极端:一种是由于各类文章和书籍关于SOA的描述往往太过抽象,再加 ...
- GET RESTful With Python
Python调用RESTful:http://blog.akiban.com/get-restful-with-python/ 本文就是参考该英文做了一下试验,后续补充一下翻译. This post ...
- JMeter 二:执行顺序 & 支持的协议
执行顺序 参考:http://jmeter.apache.org/usermanual/test_plan.html#executionorder 不同种类元素之间,执行顺序如下: Configura ...
- python——修饰符
修饰符基础--闭包 什么是闭包呢?标准的概念大家可以看wikipedia上的解释 举个例子: def do_add(base): def add(increase): return base + in ...
- Python多线程问题的资料查找与汇总
Python多线程问题的资料查找与汇总 声明: 1)本报告由博客园bitpeach撰写,版权所有,免费转载,请注明出处,并请勿作商业用途. 2)若本文档内有侵权文字或图片等内容,请联系作者bitpea ...
- 《The Story of My Life》Introductiom - Historical and Literary Context - Education of the Deaf and Blind
At the time the Story of My Life was published, the idea of a disabled person as an active member of ...
- android与服务端通讯时使用到的GZIP压缩及解压
为了减小android项目与服务端进行通讯时的数据流量,我们可以使用GZIP对服务端传输的数据进行压缩,在android客户端解压.或在客户端压缩,在服务端解压.代码如下: android客户端的GZ ...
- Drupal所能够理解的资源
Drupal能够识别哪些资源类型? profile,不知道怎么翻译,应该是指安装类型,固定地存放于profiles目录下. module,模块,可以存在于多个目录下:modules.profiles/ ...
- js jquery 结束循环
js 中跳出循环用break,结束本次循环用continue,jqeruy 中循环分别对应 return false 和return true. jquery 中each循环 跳出用return tr ...