在WebApp或浏览器中,会有点击返回、后退、上一页等按钮实现自己的关闭页面、调整到指定页面、确认离开页面或执行一些其它操作的需求。可以使用 popstate 事件进行监听返回、后退、上一页操作。
1.window.history.back(),后退
2.window.history.forward(),前进
3.window.history.go(num),前进或后退指定数量历史记录
4.window.history.pushState(state, title, utl),在页面中创建一个 history 实体。直接添加到历史记录中。
参数:state:存储一个对象,可以添加相关信息,可以使用 history.state 读取其中的内容。
title:历史记录的标题(目前浏览器不支持)。
url:创建的历史记录的链接。进行历史记录操作时会跳转到该链接。
5.window.history.replaceState(),修改当前的 history 实体。
参数:state:存储一个对象,可以添加相关信息,可以使用 history.state 读取其中的内容。
title:历史记录的标题(目前浏览器不支持)。
url:创建的历史记录的链接。进行历史记录操作时会跳转到该链接。
6.popstate 事件,history 实体改变时触发的事件。
7.window.history.state,会获得 history 实体中的 state 对象。
取消默认的返回操作:
1.添加一条 history 实体作为替代原来的 history 实体
function pushHistory() {
// 第一个实体
var state = {
title: "index",
url: "https://www.cnblogs.com/smallclown/"
};
window.history.pushState(state, "index", location.href);
// 第二个实体
state = {
title: "index",
url: "https://www.cnblogs.com"
};
window.history.pushState(state, "index", location.href);
// 第三个实体 不要以为最后的空实体没有用 可以解决上来就执行popstate的问题 相当于炮灰
tate = {
title: "index",
url:""
};
window.history.pushState(state, "index", "");
}
// history.pushState(state, title, url);
// history.replaceState(state, title, url); 替换
2.监听 popstate 事件
function addHandler() {
pushHistory();
window.addEventListener("popstate", function(e) {
location.href = window.history.state.url;
}
});
//或者
window.onpopstate=function(e){
location.href = window.history.state.url;
}
}
addHandler();
PS:
每次返回都会消耗一个 history 实体,若用户选择取消离开,则需要继续 pushState 一个实体 ;
如果把地址换了一个你想去的地址,就形成了一个简单的网页劫持
随着 Hybrid 应用的丰富,HTML5 工程师们已经不满足于把桌面端体验简单移植到移动端,他们觊觎移动原生应用人性化的操作体验,特别是原生应用与生俱来的丰富的手势系统。HTML5 没有提供开箱即用的手势系统
Event对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件发生后,跟事件相关的一系列信息数据的集合都放到这个对象里面,这个对象就是事件对象event
在正式开始前,先来看看 JS 中事件的触发与事件处理器的执行。DOM 事件会先后经历 捕获 与 冒泡 两个阶段。捕获即事件沿着 DOM 树由上往下传递,到达触发事件的元素后,开始由下往上冒泡。
在一个对象上触发某类事件,这个事件会向这个对象的的父级传播,从里到外,直至它被处理或者到达了对象层次的最顶层,即document对象。这个过程就是JavaScript的事件冒泡。
jQuery 事件方法:事件方法触发或将函数附加到所选元素的事件处理程序。下表列出了用于处理事件的所有jQuery方法。blur()附加/触发模糊事件;change()附加/触发更改事件
jquery中用.on()给页面中新加的元素添加点击事件时,点击事件源,绑定的事件执行两次,这里的alert会执行两次,相应地数组删除也执行两次,具体代码如下
队列的特征先进先出;js是单线程的,任务都是排队执行,不会同步执行对个任务;js分为同步(赋值,循环,分支语句)和异步(ajax,dom事件,定时器);事件循环机制
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O的模型,使其轻量又高效。比如,文件操作中的fs事件流,网络编程所用到的tcp,http模块等,当你回想自己写的程序后,会发现很多操作都基于事件驱动,Events类。
前端编写测试用例时,在测试界面上的一些效果时,通常都希望能够模拟一些用户操作,而模拟用户操作最主要的方式就是用代码触发指定事件。通常一些元素上会自带一些触发事件的方法,例如click、focus等
事件流描述的是从页面中接收事件的基础。事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即是DOM事件流。举个例子,下面是给一个div注册了点击事件后,事件传播的过程。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!