1.取得事件对象及取得事件目标对象

    document.onclick =function (evt) {evt = evt || window.event;//在IE中evt会是undefined//而支持W3C DOM事件的浏览器中事件对象将会作为事件处理函数的第一个参数var targetElement = evt.target || evt.srcElement;//IE中事件对象没有target属性};

2.添加事件

    function addEvent(obj,evtype,fn,useCapture) {if (obj.addEventListener) {obj.addEventListener(evtype,fn,useCapture);} else {obj.attachEvent("on"+evtype,fn);//IE不支持事件捕获} else {obj["on"+evtype]=fn;//事实上这种情况不会存在
        }}function delEvent(obj,evtype,fn,useCapture) {if (obj.removeEventListener) {obj.removeEventListener(evtype,fn,useCapture);} else {obj.detachEvent("on"+evtype,fn);} else {obj["on"+evtype]=null;}}

3.Load事件

//使用JavaScript操纵DOM,必须等待DOM加载完毕才可以执行代码,但window.onload有个坏处,它非要等到页面中的所有图片及视频 加载完毕才会触发load事件。//结果就是一些本来应该在打开时隐藏起来的元素,由于网络延迟,在页面打开时仍然会出现,然后又会突然消失,让用户觉得莫名 其妙。必须与这种丑陋的闪烁告别!function addLoadEvent(fn) {var init = function() {if (arguments.callee.done) return;arguments.callee.done = true;fn.apply(document,arguments);};//注册DOMContentLoaded事件,如果支持的话if (document.addEventListener) {document.addEventListener("DOMContentLoaded", init, false);}//但对于Safari,我们需要使用setInterval方法不断检测document.readyState//当为loaded或complete的时候表明DOM已经加载完毕if (/WebKit/i.test(navigator.userAgent)) {var _timer = setInterval(function() {if (/loaded|complete/.test(document.readyState)) {clearInterval(_timer);init();}},10);}//对于IE则使用条件注释,并使用script标签的defer属性//IE中可以给script标签添加一个defer(延迟)属性,这样,标签中的脚本只有当DOM加载完毕后才执行/*@cc_on @*//*@if (@_win32)document.write("<script id=\"__ie_onload\" defer=\"defer\" src=\"javascript:void(0)\"><\/script>");var script = document.getElementById("__ie_onload");script.onreadystatechange = function() {if (this.readyState == "complete") {init();}};/*@end @*/return true;}

转载于:https://www.cnblogs.com/BigIdiot/archive/2012/09/20/2695404.html

前端进阶-Event相关推荐

  1. IT:前端进阶技术路线图(初级→中级→高级)之初级(研发工具/HTML/CSS/JS/浏览器)/中级(研发链路/工程化/库/框架/性能优化/工作原理)/高级(搭建/中后台/体验管理等)之详细攻略

    IT:前端进阶技术路线图(初级→中级→高级)之初级(研发工具/HTML/CSS/JS/浏览器)/中级(研发链路/工程化/库/框架/性能优化/工作原理)/高级(搭建/Node/IDE/中后台/体验管理/ ...

  2. 2021年高级前端进阶之路

    YYDS 2021年高级前端进阶之路1.两边固定,中间自适应布局(1.用flex;2.用display:left;3.用相对定位和绝对定位结合)2.js判断字符串中出现次数最多的字符(1.用for循环 ...

  3. 前端进阶之路: 前端架构设计(2)-流程核心

    可能很多人和我一样, 首次听到"前端架构"这个词, 第一反应是: "前端还有架构这一说呢?" 在后端开发领域, 系统规划和可扩展性非常关键, 因此架构师备受重视 ...

  4. 前端进阶必备技能:Vue中如何定制动画效果

    作为前端程序员,前端火起来的短短几年里技术更新迭代特别快,不仅是新的框架繁多,Vue,React,Angular轮番上场,各种工具,插件,库也是琳琅满目,就连基础的JavaScript语法的更新也是年 ...

  5. 自学前端开发,前端进阶阶段需要学习哪些知识?

    今天要跟大家分享的文章是关于web前端进阶阶段需要学习哪些知识?已经入门web前端想要提升自己技术的小伙伴们来和小编一起看一看本篇文章吧,希望本篇文章能够对大家有所帮助. 1.完善我们的基础知识 (1 ...

  6. fifo算法_前端进阶算法6:一看就懂的队列及配套算法题

    引言 队列这种数据结构,据瓶子君了解,前端需要了解的队列结构主要有:双端队列.滑动窗口,它们都是算法中是比较常用的数据结构. 因此,本节主要内容为: 数据结构:队列(Queue) 双端队列(Deque ...

  7. web前端进阶<7>:3d图像翻转效果

    这几天又闲着无聊,自己学的东西又有一点不牢固了,需要写一个小程序来巩固一下,相信大家也时有同感吧!那么这一期就给大家带来一个炫酷的相册3d翻转效果,如果搭上炫酷的文字和动画那肯定是高端.霸气上档次的: ...

  8. 前端进阶垫脚石-前端工程化

    什么是前端工程化 前端工程化,就是降本提效的体现 广义上,前端工程化包含一切以降低成本.提高效率.保障质量为目的的手段 通过一系列的规范.流程.工具达到研发提效.自动化.保障质量.服务稳定.预警监控等 ...

  9. 大前端进阶!NodeJS、Npm、Es6、Babel、Webpack、模块化开发

    文章目录 大前端进阶 一.Node.js 1.1.Nodejs介绍和安装 1.2 .Nodejs入门 1.2.1.快速入门-Hello World 1.2.2.Node - 实现请求响应 1.2.3. ...

最新文章

  1. 用计算机画曲线教案,小学信息技术曲线工具教案
  2. PacBio SMRT Sequencing
  3. Ubuntu里的vi编辑器不好用的解决办法
  4. PMP-【第10章 项目沟通管理】-2021-2-16(220页-231页)
  5. 聊一聊IAR的workspace文件组织
  6. Django模版(三)
  7. 10. Python面向对象
  8. MySQL入门 (二) : SELECT 基础查询
  9. idea开发搭建scala项目流程(二)
  10. Glib2:error: Installed (but unpackaged) files found(七)
  11. 姓名拼音首字母缩写_2020年顶级网络安全首字母缩写
  12. Geth私链的多节点运行
  13. 狐妖小红娘手游服务器维护多久,狐妖小红娘手游服务器无法登陆怎么办
  14. 【技术贴】自己制作支持QQ空间背景音乐的链接教程||QQ免费空间音乐外链自己上传制作教程...
  15. 点击或长按复制打开微信H5落地页如何制作?
  16. gets和puts函数
  17. QQTIM怎么成功修改个人文件夹保存位置
  18. 本地图片转网图url专用
  19. 雷鸣的游戏人生(六) --- 如何开始学习编程?
  20. Python练习(四)

热门文章

  1. 图解SQL Server 2008入门总结
  2. JAVA 总结(壹)
  3. Python爬虫入门教程石家庄链家租房数据抓取
  4. Gym101128F:Landscaping
  5. 一个可以设置中奖概率的抽奖程序[转]
  6. poj 2482 Stars in Your Window (线段树扫描线)
  7. Ascii码 、16进制与 char
  8. 【九度OJ】题目1078-二叉树遍历
  9. 自己写一个图片按钮(XAML)
  10. Hadoop源代码分析(四)