javascript绑定事件
本质:不同的库或者工具中总是封装了不同的事件绑定形式,但是究其根源,还是IE事件模型和W3C事件模型不同的处理方式
1)W3C事件模型:支持事件捕捉和冒泡 addEventListener('type',function(){},bool) removeEventListener ('type',function(){},bool)
2)IE事件模型:仅支持事件冒泡 attachEvent('type',function(){}); detachEvent('type',fucntion(){});
*如何统一:设置W3C事件绑定函数的第三个参数为false,那么就不支持事件捕捉了。
*原生的绑定形式:
obj.addEventListener('type',function(){},false);
obj.attachEvent('type',function(){});
*是否有注意的:
当然有,IE对同一个事件绑定2次会重复绑定2次,但是W3C只会绑定一次,会忽略后面的一个事件。这个要特别注意,特别是在开发的时候
我记得我在使用百度tangram的处理问题的时候,还碰到了,后面我们来分析tangram的事件绑定形式。
*是否有解决方案:
当然有,对对象绑定以class的形式就可以解决。不会重复绑定事件了。实现方式也是多种多样。
现在来看看一些框架中的事件绑定处理:
1)tangram:
};
可以看出tangram不过是变了一个绑定的方式,其本质还是一样的。
2)jquery
if ( !special.setup || special.setup.call( elem, data, namespaces, eventHandle ) === false ) {
// Bind the global event handler to the element
if ( elem.addEventListener ) {
elem.addEventListener( type, eventHandle, false );
} else if ( elem.attachEvent ) {
elem.attachEvent( "on" + type, eventHandle );
}
}
可以看出也是对是否支持 addEventListener和attachEvent 按后进行绑定处理的。
3) prototype
function observe(element, eventName, handler) {
可以看出也是对IE和W3C支持的事件模型进行处理的。不过是处理的函数,方式不同而已。
javascript绑定事件的更多相关文章
- JavaScript绑定事件的方法[3种]
在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定: 在JavaScript代码中绑定: 绑定事件监听函数. 一. 在DOM元素中直接绑定 这里的DOM元素,可以理解为HT ...
- Javascript绑定事件的两种方式的区别
命名函数 <input type="button" onclick="check()" id="btn"/> <scrip ...
- day51—JavaScript绑定事件
转换学开发,代码100天——2018-05-06 今天学习JavaScript的绑定事件.因为浏览器的原因绑定事件需要考虑兼容性问题. attachEvent IE浏览器 ,ie9以上事件执行 ...
- javascript绑定事件addEventListener与attachEvent
1.eleObj.addEventListener(eventName,handle,useCapture); eleObj:DOM元素: eventName:事件名称.注意,这里的事件名称没有“ o ...
- JavaScript 绑定事件时传递数据
var data = { name: 'Ruchee', email: 'my@ruchee.com' }; data.handleEvent = function (e) { console.log ...
- javaScript绑定事件委托 demo
事件绑定通常发生在 onload 或 DOMContentReady , 事件绑定占用 处理时间 占用内存, 而且不是每个事件都会被 点击执行. 由此 事件委托 可以优化事件绑定行为.. 事件逐层冒泡 ...
- JavaScript中事件绑定的方法总结
最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看. JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScr ...
- JavaScript中绑定事件监听函数的通用方法addEvent() 和 事件绑定之bindEvent()与 unBindEvent()函数
下面绑定事件的代码,进行了兼容性处理,能够被所有浏览器支持: function addEvent(obj,type,handle){ try{ // Chrome.FireFox.Opera.Safa ...
- javascript对象事件绑定方法
javascript对象事件绑定方法 今天在做对象事件绑定的过程中出现了一点异外情况,由于事件方法是由参数传过来的,需要将当前对象call过去,方便方法体里直接调用this 错误写法 obj.oncl ...
随机推荐
- 'gbk' codec can't encode character
做爬虫抓取网页,print(html)进行调试,遇到UnicodeEncodeError: 'gbk' codec can't encode character XX in position XX问题 ...
- MySQLdb的安装
第一步:下载安装介质 https://pypi.python.org/pypi/MySQL-python 注意虽然模块名叫MySQLdb但是MySQL-python指的就是MySQLdb 第二步:安装 ...
- Office 2010 SP2简体中文正式版下载
此次发布的SP2包含最新的更新,提高安全性.性能和稳定性,此外SP2还是之前发布的所有更新.累积性更新的汇总.SP2还改善了Office 2010与IE10.Windows 8.Windows Ser ...
- rsyslog 定义模板
rsyslog默认会将特殊字符(\t)转换成#009 由全局配置$EscapeControlCharactersOnReceive 决定,如果自己需要根据\t处理输出时,需将该选项改为 off. $E ...
- sharepoint 2013 列表和库标签 元数据导航配置(2)
接前面提到的,如何创建一个术语库.sharepoint 2013 列表和库标签 元数据导航配置(1), 现在要做的,就是如何在自定义或者文档库中使用这个术语库,实现标签功能,通过这些标签,找到对应的文 ...
- Spring构造器注入、set注入和注解注入
记得刚开始学spring的时候,老师就反复的提到依赖注入和切面,平常的java开发中,在某个类中需要依赖其它类的方法,则通常是new一个依赖类再调用类实例的方法,这种方法耦合度太高并且不容易测试,sp ...
- 高德地图API
这周计划: 周一 早上 (高德地图API) 中午写(IFE PART ONE) 下午(高德地图API) 下班(IFE PART ONE)
- [基础]RHEL6下iSCSI客户端挂载配置
本文根据鸟哥私房菜进行操作:http://linux.vbird.org/linux_enterprise/xen.php?thisscreen=800x600 一.侦测 [root@vhost3 ~ ...
- Android采用HttpClient下载图片
在上一章中谈到Android采用HttpURLConnection下载图片,本章使用HttpClient下载图片 HttpURLConnection与HttpClient的差别: HttpClient ...
- openstack之neutron linuxbridge + vlan组网
linuxbridge是和linuxbridge plugin匹配的core agent,主要实现L2层的功能和security group的功能.security group的功能逐渐会被neutr ...