1、实现实现WebMvcConfig配置类可以解决页面不能加载css,js的问题; 扩展SpringMvc,编写一个配置类(@Configuration),是WebMvcConfigurationAdapter...html 21 registry.addViewController("/index.html").setViewName("index");//浏览器发送/请求来到login.html页面...,不用写controller控制层的请求方法了 22 } 23 24 /** 25 * 将static下面的js,css文件加载出来 26 * @param registry.../ public void addViewControllers(ViewControllerRegistry registry) { 15 //// //浏览器发送请求到到指定的页面
今天做个大屏项目, 想在大屏加载所有资源前加个加载动画, 加载结束再移除, 当然肯定时在load事件里进行移除, 但是对其他的事件有点模糊了, 复习一下哦垃圾 生命周期事件 DOMContentLoaded...DOMContentLoaded DOMContentLoaded 事件发生在 document 对象上, 必须使用document对象上 2. window.onload 当包括样式、图像和其他资源的页面被全部加载时...,window 对象上的 load 事件就会被触发 3. window.onunload 当访问者离开页面时,window 对象上的 unload 事件就会被触发。...我们可以在那里做一些不涉及延迟的事件,比如关闭相关的弹出窗口 可以在用户离开时, 使用unload事件发送我们想要保存在服务器上的数据 参考https://w3c.github.io/beacon/,...当 sendBeacon 请求完成的时候,浏览器可能已经离开了文档,所以就没办法获取服务器的响应数据 4. window.onbeforeunload 如果访问中触发了离开页面的导航或试图关闭窗口,beforeunload
("home/index"); }); module.exports=router; 此时会加载/view/home/index.html模板文件,浏览器里正常输出 链接数据库 入口文件index.js.../model/db").getInstances(); 数据库模型文件/model/db.js /** * 数据库操作类 */ var db={ /*数据库对象*/ db:null,
DNS Prefetching 是让具有此属性的域名不需要用户点击链接就在后台解析,而域名解析和内容载入是串行的网络操作,所以这个方式能 减少用户的等待时间,提升用户体验 。...默认情况下浏览器会对页面中和当前域名(正在浏览网页的域名)不在同一个域的域名进行预获取,并且缓存结果,这就是隐式的 DNS Prefetch。...如果想对页面中没有出现的域进行预获取,那么就要使用显示的 DNS Prefetch 了。...dns-prefetch" href="//24bp.cn"> 虽然使用 DNS Prefetch 能够加快页面的解析速度
OnClientClick 提供客户端JS执行能力,并以 return false 或 return true 来决定是否继续执行 OnClick 事件,OnClick 事件执行服务器方法,执行 OnClick...事件会刷新 Web 页面。...sendReady() JS函数,如果函数 return true; 则执行 onclick 事件中 sendButton_Click 服务器方法。...sendbtn.setAttribute("onclick","return sendReady();"); 其它 本示例中如果将按钮置为不可用状态(disabled = true;),即使客户端 JS...").name, ''); __doPostBack方法由.net 生成并管理,可以调用服务器方法,请注意引用的是元素的 name 而不是 ID,引用此方法还需要在页面头部引用如下属性: <%@ Page
下面的js代码是很常见的一段jquery代码 $("#verifyFailConfirm").click(function(){ var reason = $("#failReasonText...if(reason == ""){ tips("提示","请填写驳回原因"); return ; } 本意是计划用户不输入任何信息时,直接返回,但是实际结果却是没有任何提示而页面却无故重新加载...,导致这个问题的原因是上面标红部分,上面标红部分的作用类似于return true,这句话就会导致当前页面重新加载,下面是正确的代码: $("#verifyFailConfirm").click(function
——席慕蓉 HTML DOM事件大全:https://www.runoob.com/jsref/dom-obj-event.html 可以如下写法: window.onscroll = function...document.documentElement.scrollLeft || document.body.scrollLeft); } // jquery $(window).scroll(()=>{}) uniapp页面生命周期文档...id=页面生命周期 // uniapp onPageScroll(res){ console.log("滚动上下距离" + res.scrollTop); }
:(""+变量)10.JS中的取字符串长度是:(length) 11.JS中的字符与字符相连接使用+号. 12.JS中的比较操作符有:==等于,!...HTML: 51.当超链和ONCLICK事件都有时,则老版本的浏览器转向a.html,否则转向b.html.例:<a href="a.html" onclick...使当前的窗口在所有窗口之前. 64.blur()指失去焦点.与FOCUS()相反. 65.select()指元素为选中状态. 66.防止用户对文本框中输入文本:onfocus="this.blur()" 67.取出该元素在页面中出现的数量......的多重继续. 73.JS中的self指的是当前的窗口 74.JS中状态栏显示内容:window.status="内容" 75.JS中的top指的是框架集中最顶层的框架 76.JS中关闭当前的窗口:...:80),pathname("/a/a.html"),hash("#giantGizmo",指跳转到相应的锚记),href(全部的信息) 89.window.location.reload()刷新当前页面
目录 下拉刷新事件 1. 什么是下拉刷新 2. 启用下拉刷新 3. 配置下拉刷新窗口的样式 4. 监听页面的下拉刷新事件 5. 停止下拉刷新的效果 上拉触底事件 1. 什么是上拉触底 2....监听页面的下拉刷新事件 在页面的 .js 文件中,通过 onPullDownRefresh() 函数即可监听当前页面的下拉刷新事件。...此时,调用 wx.stopPullDownRefresh() 可以停止当前页面的下拉刷新。示 例代码如下: 上拉触底事件 1....监听页面的上拉触底事件 在页面的 .js 文件中,通过 onReachBottom() 函数即可监听当前页面的上拉触底事件。示例代码如 下: 3....配置上拉触底距离 上拉触底距离指的是触发上拉触底事件时,滚动条距离页面底部的距离。
一、概述 事件委托,又叫事件代理。事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。 例子:有三个同事预计会在周一收到快递。...二、为什么是使用事件委托 一般来说,dom需要有事件处理程序,我们都会直接给它设事件处理程序就好了,那如果是很多的dom需要添加事件处理呢?...在JavaScript中,添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能,因为需要不断的与dom节点进行交互,访问dom的次数越多,引起浏览器重绘与重排的次数也就越多,就会延长整个页面的交互就绪时间...,这就是为什么性能优化的主要思想之一就是减少DOM操作的原因;如果要用事件委托,就会将所有的操作放到js程序里面,与dom的操作就只需要交互一次,这样就能大大的减少与dom的交互次数,提高性能; 每个函数都是一个对象...三、事件委托原理 事件委托利用的是事件冒泡原理,将事件绑定到父级元素上,当点击子元素时,通过事件冒泡将事件传递到父级元素。 四、总结: 那什么样的事件可以用事件委托,什么样的事件不可以用呢?
先上结论: 他们是描述事件触发时序问题的术语。事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件。相反的,事件冒泡是自下而上的去触发事件。...绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获。true,事件捕获;false,事件冒泡。默认false,即事件冒泡。...,"+this.id) }) 结果: child事件被触发,child parent事件被触发,parent 结论:先child,然后parent。...事件的触发顺序自内向外,这就是事件冒泡。...事件触发顺序变更为自外向内,这就是事件捕获。 方法: 阻止事件冒泡 和默认行为。 事件冒泡: ? 阻止默认行为: ?
利用JS 事件冒泡动态为元素绑定事件的方法称为事件委托(Event Delegation,也称为“事件代理”),是JavaScript中最热门的技术之一。...为什么要使用事件委托在 JavaScript 中,页面内事件处理程序的个数会直接影响页面的整体性能,因为每个事件处理程序都是对象,对象会占用内存,内存中的对象越多,页面的性能则越差。...此外,事件处理程序需要与 DOM 节点进行交互,访问 DOM 的次数越多,引起浏览器重绘和重排的次数也就越多,从而影响页面的性能。重绘是指当元素样式改变时,浏览器会根据元素的新样式重新绘制元素的外观。...当页面中很多表格或列表需要添加事件时,如果逐个添加那就太麻烦了,但是使用事件委托就能极大的减轻我们的工作量,同时也能提高页面的性能。...2) 动态绑定事件在网页中,有时我们需要动态增加或移除页面中的元素,比如上面示例中动态的在 ul 标签中添加 li 标签,如果不使用事件委托,则需要手动为新增的元素绑定事件,同时为删除的元素解绑事件。
浏览器执行线程 在解释事件循环之前首先先解释一下浏览器的执行线程: 浏览器是多进程的,浏览器每一个 tab 标签都代表一个独立的进程,其中浏览器渲染进程(浏览器内核)属于浏览器多进程中的一种,主要负责页面渲染...,脚本执行,事件处理等 其包含的线程有:GUI 渲染线程(负责渲染页面,解析 HTML,CSS 构成 DOM 树)、JS 引擎线程、事件触发线程、定时器触发线程、http 请求线程等主要线程 关于执行中的线程...: 主线程:也就是 js 引擎执行的线程,这个线程只有一个,页面渲染、函数处理都在这个主线程上执行。...工作线程:也称幕后线程,这个线程可能存在于浏览器或js引擎内,与主线程是分开的,处理文件读取、网络请求等异步事件。...宏任务主要包含:script( 整体代码)、setTimeout、setInterval、I/O、UI 交互事件、setImmediate(Node.js 环境) 微任务主要包含:Promise、MutaionObserver
1.事件流 事件发生时会在元素节点与根节点之间按照特定的顺序传播,路径所经过的所有节点都会收到该事件,这个传播过程即DOM事件流。...2.两种事件流模型 1.冒泡型事件流:事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根 2.捕获型事件流:事件的传播是从最不特定的事件目标到最特定的事件目标。...即从DOM树的根到叶子 3.绑定事件的方法 1.普通浏览器 绑定事件:addEventListener(type,name,bool); 删除事件:removeEventListener...() 2.ie 低版本 绑定事件:attachEvent() 删除事件:detachEvent() 4.参数说明 type 事件类型 例如:click load name...事件执行函数 bool true 为事件捕获 && false 为事件冒泡 5.阻止事件冒泡和 事件捕获 1.阻止事件冒泡 不 阻止默认行为 event.stopPropagation
[注意:页面内必须有被聚焦的对象] onKeyDown IE4|N4|O 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象] onKeyUp IE4|N4|O 当键盘上某个按键被按放开时触发的事件...[注意:页面内必须有被聚焦的对象] 页面相关事件 事件 浏览器支持 描述 onAbort IE4|N3|O 图片在下载时被用户中断 onBeforeUnload IE4|N|O 当前页面的内容将要被改变时触发的事件...onError IE4|N3|O 捕抓当前页面因为某种原因而出现的错误,如脚本错误与外部数据引用的错误 onLoad IE3|N2|O3 页面内空完成传送到浏览器时触发的事件,包括外部文件引入完成...onContextMenu IE5|N|O 当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件 [试试在页面中的中加入onContentMenu="return false..."就可禁止使用鼠标右键了] onCopy IE5|N|O 当页面当前的被选择内容被复制后触发的事件 onCut IE5|N|O 当页面当前的被选择内容被剪切时触发的事件 onDrag IE5|N|
类似的,可以对一些 CSS 和 JS 的域名同样处理。 2. 域名解析:解决方案 —— DNS 预解析 域名解析:从域名查询 IP 的过程,这个过程一般都很快的,但也会引起延迟。...一般浏览器会适当的对解析结果缓存,并对页面中出现的新域名进行预解析,但并不是所有的浏览器都会这么做,为了帮助其它浏览器对某些域名进行预解析,你可以在页面的 html 标签中添加 dns-prefetch...最明显的例子,DNS 预解析在某个页面中包含非常多的域名非常有效,如搜索结果页。...DNS Prefetching 是让具有此属性的域名不需要用户点击链接就在后台解析,而域名解析和内容载入是串行的网络操作,所以这个方式能 减少用户的等待时间,提升用户体验。...如果想对页面中没有出现的域进行预获取,那么就要使用显示的 DNS Prefetch。 5. 预解析的实现 5.1.
(unload事件的Cancelable属性值为No) 那么反过来看看beforeunload事件,这时页面状态大致与平常一致: 页面所有资源均未释放,且页面可视区域效果没有变化; UI人机交互失效(...的JS异常,而firefox下则连异常都懒得报。 既然不给用window.confirm,那么如何弹出二次确定对话框呢?其实beforeunload事件已经为我们准备好了。...但请记住一点:由于[before]unload事件会降低页面性能,因此仅由于需要做重要的善后或不可逆的清理工作时才监听这两个事件。 ...以前,当我们从页面A跳转到页面B时,页面A的所有资源将被释放(销毁DOM对象,回收JS对象, 释放解码后的Image资源等);后来各大浏览器厂商分别采用bfcache/page cache/fast history...bfcache恢复而来的,所以JS对象均未回收,因此window.test值依然有效。
2、常见的事件 事件是某个行为或者触发,比如点击、鼠标移动、提交表单,滚动菜单等等 二、事件流 1、事件流的作用 事件流描述的是从页面中接收事件的顺序,比如有两个嵌套的div,点击了内层的div,这时候是内层的...DOCTYPE html> JS Bin .box1{ border:...keyup 按键按下松开的时候触发, change 比如input失去焦点并且值发生了改变 submit 表单提交的时候触发 scroll 页面滚动的时候触发,注意使用函数节流 resize 页面面积变化触发...,注意使用函数节流 DOMContentLoaded DOM 结构解析完成,不用等图片解析 load 页面所有资源(图片css 等)加载完成触发,触发时间比较晚 mouseover 鼠标放上去触发,注意进入元素的子元素会重复触发...scroll..') }) window.addEventListener('resize', function(e){ console.log('resize..') }) //页面所有资源加载完成
首先,我们来解释下事件循环是个什么东西: 就我们所知,浏览器的js是单线程的,也就是说,在同一时刻,最多也只有一个代码段在执行,可是浏览器又能很好的处理异步请求,那么到底是为什么呢?...我们先来看一张图(这张图来自于http://www.zcfy.cc/article/node-js-at-scale-understanding-the-node-js-event-loop-risingstack...从上图我们可以看出,js主线程它是有一个执行栈的,所有的js代码都会在执行栈里运行。...原因:因为一开始js主线程中跑的任务就是macrotask任务,而根据事件循环的流程,一次事件循环只会执行一个macrotask任务,因此,执行完主线程的代码后,它就去从microtask队列里取队首任务来执行..., 以及借鉴了其他优秀文章 参考: http://www.zcfy.cc/article/node-js-at-scale-understanding-the-node-js-event-loop-risingstack
DOM事件流(event flow )存在三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。...事件捕获*(****event capturing****)*:通俗的理解就是,当鼠标点击或者触发dom事件时,浏览器会从根节点开始由外到内进行事件传播,即点击了子元素,如果父元素通过事件捕获方式注册了对应的事件的话...事件冒泡**(***dubbed bubbling***)**:与事件捕获恰恰相反,事件冒泡顺序是由内到外进行事件传播,直到根节点。...dom标准事件流的触发的先后顺序为:先捕获再冒泡,即当触发dom事件时,会先进行事件捕获,捕获到事件源之后通过事件传播进行事件冒泡。...on 的事件。