前端进阶-Event
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相关推荐
- IT:前端进阶技术路线图(初级→中级→高级)之初级(研发工具/HTML/CSS/JS/浏览器)/中级(研发链路/工程化/库/框架/性能优化/工作原理)/高级(搭建/中后台/体验管理等)之详细攻略
IT:前端进阶技术路线图(初级→中级→高级)之初级(研发工具/HTML/CSS/JS/浏览器)/中级(研发链路/工程化/库/框架/性能优化/工作原理)/高级(搭建/Node/IDE/中后台/体验管理/ ...
- 2021年高级前端进阶之路
YYDS 2021年高级前端进阶之路1.两边固定,中间自适应布局(1.用flex;2.用display:left;3.用相对定位和绝对定位结合)2.js判断字符串中出现次数最多的字符(1.用for循环 ...
- 前端进阶之路: 前端架构设计(2)-流程核心
可能很多人和我一样, 首次听到"前端架构"这个词, 第一反应是: "前端还有架构这一说呢?" 在后端开发领域, 系统规划和可扩展性非常关键, 因此架构师备受重视 ...
- 前端进阶必备技能:Vue中如何定制动画效果
作为前端程序员,前端火起来的短短几年里技术更新迭代特别快,不仅是新的框架繁多,Vue,React,Angular轮番上场,各种工具,插件,库也是琳琅满目,就连基础的JavaScript语法的更新也是年 ...
- 自学前端开发,前端进阶阶段需要学习哪些知识?
今天要跟大家分享的文章是关于web前端进阶阶段需要学习哪些知识?已经入门web前端想要提升自己技术的小伙伴们来和小编一起看一看本篇文章吧,希望本篇文章能够对大家有所帮助. 1.完善我们的基础知识 (1 ...
- fifo算法_前端进阶算法6:一看就懂的队列及配套算法题
引言 队列这种数据结构,据瓶子君了解,前端需要了解的队列结构主要有:双端队列.滑动窗口,它们都是算法中是比较常用的数据结构. 因此,本节主要内容为: 数据结构:队列(Queue) 双端队列(Deque ...
- web前端进阶<7>:3d图像翻转效果
这几天又闲着无聊,自己学的东西又有一点不牢固了,需要写一个小程序来巩固一下,相信大家也时有同感吧!那么这一期就给大家带来一个炫酷的相册3d翻转效果,如果搭上炫酷的文字和动画那肯定是高端.霸气上档次的: ...
- 前端进阶垫脚石-前端工程化
什么是前端工程化 前端工程化,就是降本提效的体现 广义上,前端工程化包含一切以降低成本.提高效率.保障质量为目的的手段 通过一系列的规范.流程.工具达到研发提效.自动化.保障质量.服务稳定.预警监控等 ...
- 大前端进阶!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. ...
最新文章
- 用计算机画曲线教案,小学信息技术曲线工具教案
- PacBio SMRT Sequencing
- Ubuntu里的vi编辑器不好用的解决办法
- PMP-【第10章 项目沟通管理】-2021-2-16(220页-231页)
- 聊一聊IAR的workspace文件组织
- Django模版(三)
- 10. Python面向对象
- MySQL入门 (二) : SELECT 基础查询
- idea开发搭建scala项目流程(二)
- Glib2:error: Installed (but unpackaged) files found(七)
- 姓名拼音首字母缩写_2020年顶级网络安全首字母缩写
- Geth私链的多节点运行
- 狐妖小红娘手游服务器维护多久,狐妖小红娘手游服务器无法登陆怎么办
- 【技术贴】自己制作支持QQ空间背景音乐的链接教程||QQ免费空间音乐外链自己上传制作教程...
- 点击或长按复制打开微信H5落地页如何制作?
- gets和puts函数
- QQTIM怎么成功修改个人文件夹保存位置
- 本地图片转网图url专用
- 雷鸣的游戏人生(六) --- 如何开始学习编程?
- Python练习(四)