浏览器加载一个页面时,是按照自上而下的顺序加载的,读取到一行就运行一行,如果将script标签写到页面上边,在代码执行的时候,页面还没有完全加载
我们可以简单的把事件理解为浏览器的感知系统。比如说:他可以感觉到用户是否点击(click)了页面、鼠标是否进入了页面的某个元素上面(mouseover或mouseenter)、鼠标是否离开了网页(mouseout或mouseleave)、浏览器是都加载完了页面上的资源(window.onload)、文档树是否生成(DOMContentLoaded)、键盘上的某个键是否按下(keydown)、鼠标的滚轮是否滚动了等等。
1.鼠标滚动事件。 说明:返回值 大于0向上滚动,小于0向下滚动。 兼容型:所有浏览器。 代码: /*********************** * 函数:鼠标滚动方向 * 参数:event * 返回:滚轮方向[向上(大于0)、向下(小于0)] *************************/ var scrollFunc = function(e) { var direct = 0; e = e || window.event; if (e.wheelDelta) {//
有天,辛苦做了个复杂操作功能的页面,上线后有用户反馈:很多功能使用不了。惊了,以为是哪里出了bug。 立马联系用户,才发现原来是用户使用笔记本电脑,没有禁用触控板,然后不小心碰到导致整个界面都放大,很多功能超出界面不见了。 然而那能怎么办,用户第一,自然得快速解决这个问题,而且是触控板和触摸屏都得解决。
简介 IE6实现了鼠标滚轮事件mousewheel,这个事件包含了一个鼠标事件所没有的属性,wheelDelta,这 个属性值始终是120的倍数,而且向上滑动一单位,wheelDelta值为120,向下为-120.随后Chrome,Opera, Safari等也都实现了该事件。Opera10之前的版本对wheelDelta值的符号处理错误,需要修改。但是Firefox没 有该事件,而是用DOMMouseScroll。这个事件只有Firefox支持,所以可以单独针对Firefox做兼容。 另外,HTM
汇集了许多关于DOM和BOM的兼容性问题,主要是关于 IE 浏览器的,考虑到浏览器迭代,这里主要列出了 IE8 以及之后的浏览器版本。 IE8 浏览器在 2008年推出,距现在(2019)已有11年之久,已经是很老的一款浏览器了。但是在一些项目中,可能仍需要考虑到兼容性,如果兼容到 IE8 已经是很兼容了,毕竟该浏览器也几乎没多少市场份额了。多是一些机构或政府部门在使用。而有些兼容性问题也可能是其它浏览器之间的差异,比如 Chrome 和 FireFox 对于鼠标滚轮事件对象的滚轮方向判断方式不同,Chrome使用 wheelDelta,而FireFox 则采用 detail 做判断。下面将一一说明或做补充实现来尽量弥补浏览器之间的差异。其实大部分就是为了兼容 IE 早期浏览器。
在这个分步指南中,我们将使用一个基于 WebGL 的 3D 图形的框架 three.js, 创建一个 3D 版本的 Treehouse 徽标。你可以通过点击或者拖拽鼠标使相机旋转!你也可以使用鼠标滚轮进行缩放。
Author:Mr.柳上原 付出不亚于任何的努力 愿我们所有的努力,都不会被生活辜负 不忘初心,方得始终 想要进入前端圈子里工作 原来需要懂得太多太多 刚开始学习前端 好高骛远 以为html+css很牛逼了 然后学了js以为自己已经是前端了 到处投简历 说自己精通原生js 不会任何框架 现在想来 还是太年轻 学了node+mongodb+pug+layui 学了vue 却发现要成为一个真正的前端工程师,这些远远不够 还需要git 还需要less,sass 还需要小程序 还需要Bootstrap 还需要Rea
所有浏览器的focus/blur事件都不冒泡,万幸的是大部分浏览器支持focusin/focusout事件,不过可恶的firefox连这个都不支持。
在早期 IE 和 Netscape 团队在开发第四代浏览器的时候,遇到一个问题:当点击一个按钮的时候,是应该先处理父级的事件呢?还是应该先处理按钮的事件呢?IE 和 Netscape 给出了 2 种完全相反的答案,IE 提出事件冒泡的概念,而 Netscape 则支持事件捕获。
很多同学对阻止事件冒泡和阻止事件默认行为容易混淆,项目中因为一些原因也需要阻止浏览器的一些默认行为,这里就简单总结一下。
我们在之前的一篇文章《04-JavaScript/22-DOM简介和DOM操作》中已经讲过事件的概念。这里讲一下绑定(注册)事件的两种方式,我们以onclick事件为例。
还记得上周咱们说的“随心所欲滚动条,远离产品汪”一文吗?当中介绍了自定义滚动条的基本原理与实现方法,在自定义滚动条实现后,可以通过对滚动条的上下拖动来控制内容区的显示,使用过的朋友会发现,如果对篇幅较长的内容来说,不停的拖动滚动条来查看内容,还是比较麻烦的,于是本文在上篇代码的基础上添加了滚轮事件并处理了相应的兼容问题。 本文内容 1、原理结构图 2、滚轮事件及兼容问题概要 3、具体实现步骤 4、小结 原理结构图 为了方便大家熟悉理解,希望大家能够回顾下上篇“随心所欲滚动条,远离产品汪(一)”,本文继续使用
事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型)。现代事件绑定在传统绑定上提供了更强大更方便的功能。 一.传统事件绑定的问题 传统事件绑定有内联模型和脚本模型,内联模型我们不做讨论,基本很少去用。先来看一下脚本模型,脚本模型将一个函数赋值给一个事件处理函数。 var box = document.getElementById('box');//获取元素 box.onclick = function () {//元素点击触发事件 alert('Lee'); };
其实想要实现功能很简单,就是在一张图片上监听鼠标滑轮滚动的事件,然后根据上滚还是下滚实现图片的缩放。
本文由 IMWeb 团队成员 erasermeng 首发于腾讯内部KM论坛。点击阅读原文查看 IMWeb 社区更多精彩文章。 什么是滚动穿透 如图所示,有一层遮罩蒙层覆盖在body上时,当我们滚动遮罩层,它下面的内容也会跟着一起滚动,看起来好像是上面的滚动事件穿透到下面的DOM元素上一样,我们称之为滚动穿透。 阻止冒泡? 刚开始遇到这个问题的同学可能会联想到是不是由于事件冒泡到body上引起的,于是监听 scroll/touchmove事件,阻止事件冒泡。 事实上,这并没有什么卵用。 首先,一般而言滚动
工具类 方便操作对象,数组等的工具库 underscore.js lo-dash 与underscore.js的api基本一致。与underscore比其优势是,效率高;可自定义构建 Sugar 在原生对象上增加一些工具方法 functional.js 提够了一些Curry的支持 bacon.js 函数式编程,cool streamjs 用流的方式来对数组,对象进行系列操作 异步流程控制 发布订阅 eventproxy 朴灵出品 Arbiter.js q Promise风格的 Asyn
浏览器有着大量不同的版本,不同种类的浏览器的内核也不尽相同,所以不同浏览器对代码的解析会存在差异,这就导致对页面渲染效果不统一的问题。
最近在业务中遇见一个问题,就是弹出一个蒙版,覆盖整个页面,有一部分内容固定在底部。可是底部内容还是能滑动。
即每个油猴脚本都有的,脚本开头很多行注释的内容,这是油猴脚本关键的基础部分,刚开始接触可能会一头雾水,但你绝不能忽视这部分内容
元素节点操作 创建节点 var $div = $(''); var $div2 = $('这是一个div元素'); 插入节点 1、append()和appendTo():在现存元素的内部,从后面插入元素 var $span = $('这是一个span元素'); $('#div1').append($span); ...... 2、prepend()和prependTo():在现存元素的内部,从前面插入元素06
本文主要介绍 DOM 事件级别、DOM 事件模型、事件流、事件代理和 Event 对象常见的应用,希望对你们有些帮助和启发!
scrollTop和scrollLeft scrollTop 被卷去的头部 当滑动滚轮浏览网页的时候,网页隐藏在屏幕上方的距离 二、页面滚动效果事件 window.onscroll=function(){页面滚动语句} 三、获取scrollTop 谷歌和没有声明DTD<DOCTYPE>:document.body.scrollTop 火狐和其他浏览器:document.documentElement.scrollTop IE9+和最新浏览器:window.pageXOffset; pageYOffset(scrollTop) 兼容性写法: var scrollTop=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0;
HTML 标签和属性 HTML标签大全 手机页面的一些有用的meta 前端 Meta 用法大汇总 标签语意化 选择合适的块级HTML标签流程图 Web标准(Standard) HTML Living Standard-WHATWG WHATWG维护的持续更新的HTML标准 W3C规范 W3C规范翻译 HTML5中文小组翻译的。附HTML5中文小组主页 CSS 基本概念 CSS 词汇表 注释,语句,规则集等等。 【转载】理解 CSS 属性值语法 看懂 CSS 规范的属性值定义。 选择器
在Web开发中,利用Paper.js库进行图形的绘制和交互操作是一种常见的实践。Paper.js是一个强大的矢量图形库,可以让开发者通过简洁的API完成复杂的图形操作。在本文中,我们将详细探讨如何使用Paper.js来实现对画布的缩放和拖动功能,提供用户友好的交互体验。 (作者:CSDN@拿我格子衫来)
今天要分享的是运用原生JS实现拖拽进度条、滚动鼠标显示相应的内容,实现效果如下:
1. 使用谷歌地图 API 的第一步就是要注册一个 API 密钥,需要注重一下两点:
此文章主要总结UIEvent相关的事件,如有不对的地方,欢迎指正。 一、uitls.js(绑定事件公共类) var fixs = { 'focusin': { standard: 'focus', ie: 'focusin' }, 'focusout':{ standard: 'blur', ie: 'foucsout' }, 'input': { standard: 'input',
Web前端目前现有的UI框架:Element、Bootstrap、JqueryUi、Foundation、Semantic UI、Pure、UIkit Web前端目前现有的JS框架:JQuery、Zepto、VueJS、AngularJS、ReactJS、backbone 、ember
作者简介:王鹤,高级前端工程师,隶属于腾讯SNG增值产品部。主要负责QQ个性化业务的功能开发及技术优化。目前专注于框架的研究,致力于提升效能,解放生产力。 一、框架的选型 没有什么框架是全能的,都有其适用场景。我们的最初的定位一定要围绕我们的业务来选择。我们个性化业务是基于移动端的多页面应用。我们综合考虑之后,决定使用vuejs+typescript+webpack2来作为现在和将来的核心主框架,未来的演变也基于此基础。 1、为什么使用vuejs 早些年,前端的MVVM框架呈现爆发式的增长,比如angula
没有什么框架是全能的,都有其适用场景。我们的最初的定位一定要围绕我们的业务来选择。
作者简介:王鹤,高级前端工程师,隶属于腾讯SNG增值产品部。主要负责QQ个性化业务的功能开发及技术优化。目前专注于框架的研究,致力于提升效能,解放生产力。 一、框架的选型 没有什么框架是全能的,都有其
网上讲粘贴复制的很多,讲清楚复制异步数据得很少,在真机上真正验证过得凤毛麟角,正巧工作上遇到了复制接口返回的数据这个问题,求助了很多人,没有太好的解决办法,最终通过修改交互实现了这个复制功能,故写篇文档记录一下,也分享给大家。
官方给的解释是:React 元素的事件处理和 DOM 元素很相似,只是在语法上有一些不同,React 事件采用的是小驼峰的命名方式,而不是纯小写;React 使用 JSX 语法时需要传入一个函数作为事件处理函数,而不是一个字符串。
今天和大家一起来聊聊最近又一个新发布的 JavaScript 运行时:WinterJS。
Python .whl文件(或wheels)是Python中很少讨论的一部分,但是它们对Python包的安装过程非常重要。如果您已经使用pip安装了Python包,那么很有可能是轮子(wheels)使安装速度更快、效率更高了。
市面上常见的多媒体资源管理器并不少见,比如很有名的本地电子书管理工具-Calibre,图片管理工具-Eagle,以及音频爱好者喜爱的foobar2000。它们在各自的领域内都完美解决了诸多痛点,但人的需求是在不断变化的,互联网的环境也是在不断发生改变的。
前面的话 有一个流传较广的笑话,一个人在stackoverflow中提了一个问题,如何使用javascript实现一个数字与另外一个数字相加。最高票回答是你应该使用jQuery插件,jQuery插件可以做任何事情。 历史总是在重演,以前是jQuery,现在可能是react或vue。不同的框架有不同的应用场景,杀鸡不要用牛刀。本文将详细介绍框架选型 框架与库 库(lib)具有以下三个特点: 1、是针对特定问题的解答,具有专业性; 2、不控制应用的流程 3、被动的被调用 框架(frameword)具有以下三个
在前端开发世界中,JavaScript 和 HTML 之间往往通过 事件 来实现交互。其中多数为内置事件,本文主要介绍 JS自定义事件概念和实现方式,并结合案例详细分析自定义事件的原理、功能、应用及注意事项。
移动端浏览器兼容性较好,我们不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方。比如触屏事件 touch(也称触摸事件),Android和 IOS 都有。
我们在开发的时候会明确项目要兼容哪些浏览器的最低版本,我之前的项目要求兼容IE8.0以上的版本,Chrome 48以上,FireFox 44以上。有了这些最基本的要求,在开发中就是要考虑到CSS样式和JavaScript的在这些浏览器的兼容性了 一、html部分
BlueStacks安卓模拟器是一款十分好用的安卓模拟器。该软件非常的不错,采用了LayerCake技术可使用一些ARM特殊指令集,而且使用它能够让大部分的安卓应用程序直接运行在电脑上。此外还加入了对图形硬件加速的支持,这对于高端平板设计的应用提供了完美的支持。除了支持绝大多数APP应用的安装和使用外,BlueStacks能让您手机上的应用,在Windows操作系统上快速并全屏运行,如果你希望从此摆脱智能手机屏幕小、耗电快、流量陷阱多的困境那还等什么呢?一款不可多得的安卓模拟器软件。
掌握 DOM 的基本概念后,这次我们讲讲浏览器的事件和事件对象。再结合具体业务需求,通过例子展示事件相关的操作方法。
浏览器中渲染引擎与Js脚本引擎是互斥的,在浏览器开始渲染页面时,如果遇到<script>标签,会停止渲染当前页面,也就是说在脚本加载与执行的过程中会阻塞页面的渲染,在网速较差的环境下可能会出现浏览器页面假死的情况,这也就是尽量将<script>文件放置于<body>后的原因,Js文件异步加载就是使浏览器加载外部Js脚本文件时不阻塞渲染线程,这称为非阻塞模式加载,当然加载完成之后解析执行Js脚本时必须与渲染引擎互斥,解析执行Js脚本的时机取决于异步加载Js的方式。
前导:如果一个按钮绑定了多个点击事件,那么点击按钮的时候只会执行最后一个点击事件,前面的点击事件都被覆盖了。那么如何为一个按钮绑定多个相同的事件,并且每个事件都会执行呢?
现在这种设计在移动端很常见,因为宽度是稀缺的。相信不少人设计项目中有实现过这种交互,而且,我敢保证是利用JS实现的。
针对混乱的黑莓市场,新手该如何选机: 1-检查机器运营商Logo标志:检查开机和关机Logo标志,凡是机器屏幕上显示运营商Logo标志和机器外壳上运营上标志不统一的,一定是换过外壳的; 2-按alt+cap+h,看帮助界面中,pin码、imei码是否是特殊序列的,有些商家自己会刷机,但是懒得动脑子,甚至会出现12345678之类的号码,如果出现这种有规律的码说明机器主板是重新烧录过低级主板程序的,以前一定出过问题,千万不能入手; 3-上网去查刚才看到的运营商码和pin码是否一致,如果pin查下来是匈牙利的(假冒最多)而运营商是AT&T(美国的),那一定也是主板被烧过号码或者程序了,不管是否有过维修、还是别人遗失的机器,这种机器不能要的; 4-sim卡插槽:不管开机还是关机状态下,都要特别检查这个地方,因为我已经遇到2台帮朋友买的7290发生了因为sim卡插槽不紧密,造成了机器一按任何按键就立刻重新启动的故障,所以一定要用正牌的标准sim卡去试试看,是否插入到位,是否发生歪斜和卡不住的情况,用移动的全球通卡是最好的,因为电信运营商,为了自身成本考虑,对于类似联通如意通、移动动感地带神州行等等的sim卡,实际上都是成本很低(厂家说16K容量出场价只卖到2元不到!!),因此卡片的质量不都是非常稳定的(反映速度、耗电、电器兼容性等等),偶然会遇到质量不好的卡,这种卡查到BB中一定会有问题的,因此要找比较好用的卡去试验,用来判断是BB问题还是卡的兼容性问题; 5-注意观察BB的无线电灵敏度:不同的BB灵敏度是不同的,尤其是翻修过的机器,因此需要你从BB桌面进入选项-》状态,注意看看电池容量是%多少?无线电信号是多少db(分贝),负值说明是接收灵敏度,越负的厉害越好,只管上如果用信号是几格来判断的话,会太模糊了。这时可以移动BB,同时改换BB的状态,例如横过来、平放、歪斜、左右摇动等,看BB的信号分贝数是否产生变化,一般灵敏度良好的BB,2秒内就能够看到信号的分贝数在发生变化,提供一个个人的经验值供大家参考:一般在信号三格时要求信号强度室-62dBm左右,越低越好,否则说明BB无线GPRS、GSM网络通讯部分接收灵敏度不佳; 6-电池容量:刚才让大家注意电池容量是%多少,如果重新启动几次后(重新启动会比常规使用消耗更多的电力),发现电池容量明显变少(BB能做到每5%就实时测出来,标准的BB电池是1000mAH的,5%就是50mAH,已经非常灵敏了),说明电池容量不足或者有问题,请商家为你再换块电池,至少5~10次重新启动中,外加2~3次3分钟以内电话,应该看不到BB产生明显的电池当前容量减少的情况的; 7-BB的锁:国内只有解锁的BB才能正常使用。BB的锁实际上不是一个,而是5个,分别是sim卡、网络、网络子集、服务提供商、公司,可以从桌面-》选项-》高级-》sim卡界面,然后输入mepd,这时应该显示BB的5个锁的状态了,切记网络锁如果是未激活的话,那么恭喜你了,这台BB还未解网络锁,老板如果现场给你解锁的话,就要输入解锁码解锁(软解)。如果是已禁用,那说明机子是解过网络锁的了。(注意:很多网站的QS说凭这个锁的状态来区分软解硬解,是完全错误的!)另外注意服务提供商锁和公司锁,如果这两个锁没解开,那么分别以后无法改换运营商(例如移动换联通)和无法换公司(例如跳槽后接通新公司的邮件服务器)了,所以如果你有这方面要求或者遇到这方面的机器,多多小心了;BB越到最新东西就越多了,加密也就越厉害。 8-屏幕分辨率、亮度、颜色等:注意不只是看屏幕是否有划伤这么简单,还要注意屏幕的亮度是否均匀,尤其是下部,是否有光源分布不均匀产生的光斑;再有就是看屏幕灯光颜色,标准的应该是自然光,略发黄的那种,接近日光,老外崇尚自然嘛,如果是那种纯白色或者是发蓝光的,虽然屏幕亮度很好,但是告诉你这个绝对不是正宗的BB屏幕,赶快换台吧,黑莓屏幕也能翻新的,这个决不是新闻,翻新内容包括表面玻璃、背面灯光、背面的灯光反射折射材料等等; 9-机器的系统运行日志:主屏幕alt+lglg,可以进入机器日志查看器,这里记录了BB运行的全部日志,如果看到黑色大写斜体的条目,那个就是机器上运行程序出错的记录,小心对待了,看看是什么内容(滚轮滚动到这条,按回车就可进入了),里面有出错的软件模块名称,如果对BB不是很熟悉,我也没法教你,反正只要不是phone、SMS、wireless、network等有问题,一般都是软件问题,不用太在意,因为绝大多数人都会自己去刷机的,刷机之后这些东西会好的;如果以后正常了,记得再这里按滚轮,找选项,把你不需要跟踪的内容前面的勾去掉(滚轮到每个条目后按空格就行),省得BB干什么工作都写工作日志,搞的以后会过多占用内存的; 10-耳机、听筒、震动:这个是手机最基本的功能,千万要试验到,反正都说服老板开机了,干吗不顺手试试呢,还有就是用个磁铁试试机器是
简单来说,这次能力更新,为 button 组件的 open-type 属性赋予了新的有效值 getUserInfo(声明需要获取用户信息)。
领取专属 10元无门槛券
手把手带您无忧上云