博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
详解javascript事件绑定使用方法
阅读量:6966 次
发布时间:2019-06-27

本文共 987 字,大约阅读时间需要 3 分钟。

由于html是从上至下加载的,通常我们如果在head部分引入javascript文件,那么我们都会在javascript的开头添加window.onload事件,防止在文档问加载完成时进行DOM操作所出现的错误。如果有多个文件,那么极有可能出现多个window.onload事件,但是最后起作用的只有一个,这时候就需要使用事件绑定来解决这个问题了。

IE方式

attachEvent(事件名称, 函数),绑定事件处理函数
detachEvent(事件名称, 函数),解除绑定

DOM方式

addEventListener(事件名称,函数, 捕获)
removeEventListener(事件名称, 函数, 捕获)

无标题文档

  

这段,运行结果是弹出b,因为有两个oBtn的点击事件,但是只执行了最后一个,这时候就体现出事件绑定的重要性了。

无标题文档

  

当你使用事件绑定的时候,那么两次点击事件都会执行,只是执行顺序在不同浏览器是不同的。在IE中是自下而上执行,而在其他浏览器中是自上而下,不过由于alert的特殊性我们可以看出差别,其他语句基本等同于没有差别,但是在对于一些对时间要求严格是事件的使用时还是需要注意的,比如之前有一篇文章中的setInterval对时间的细微的差别最后导致滚动混乱。 基于原生javascript的图片轮播domo

最后将我们的代码整理成函数,便于之后的使用

function myAddEvent(obj, ev, fn){  if(obj.attachEvent)  {    obj.attachEvent('on'+ev, fn);  }  else  {    obj.addEventListener(ev, fn, false);   }}

  

这时候如果需要使用多个window.onload事件其实就和使用多个oBtn.差不多了。如下调用函数即可。

myAddEvent(window,'load',function () {  alert('a');});myAddEvent(window,'load',function () {  alert('b');

  

转载于:https://www.cnblogs.com/good10000/p/6017136.html

你可能感兴趣的文章
Decision Tree
查看>>
四万高手过招,这份阿里全球数学竞赛试题你真的不要看吗 ...
查看>>
进行移动端Unity开发,针对引擎PowerVR性能建议
查看>>
linux gcc Makefile
查看>>
SpringBoot-Security-用户权限分配-配置验证规则
查看>>
学习大数据要掌握哪些语言?需要学习哪些内容? ...
查看>>
2019阿里云峰会-边缘计算专场,邀您共话大连接低时延场景下的技术探索与实践 ...
查看>>
云栖专辑| 阿里毕玄:程序员的成长路线
查看>>
jvm知识点总览
查看>>
如何在Windows 10 / 8.1 / 8中安装PHP或XAMP
查看>>
地铁译:Spark for python developers ---Spark的数据戏法
查看>>
举个栗子:专有云MaxCompute创建TableStore外部表
查看>>
网站服务器设置禁PING的方法步骤
查看>>
Linux基础命令---lpstat查看打印机状态
查看>>
新年福利 | 架构的“一小步”,业务的一大步
查看>>
Confluence 6 升级中的一些常见问题
查看>>
不可小看的数值类型—Python基础前传(5)
查看>>
集群中节点挂载数据盘的几种方式
查看>>
工作日志——基于k8s搭建spark集群
查看>>
3. 爬虫框架Clawler 爬取优酷电影名
查看>>