介绍了一些平常开发中不常用到的事件
1、页面卸载事件beforeunload,unload
2、session事件pageshow,pagehide
3、clipboard事件copy,paste,cut
1 页面卸载事件
1.1 beforeunload
beforeunload事件主要用来监听页面卸载,在用户刷新页面或者离开页面(跳转或者直接关闭)时,执行相应的逻辑。(可以阻止卸载操作)
如果在事件event的returnValue设定值(也可以是null和undefined),在用户离开页面时都会有默认的提示框(大部分浏览器无法指定提示文本)
window.addEventListener('beforeunload',function(event){
const exitWord='';
event.returnValue=exitWord;
})
根据用户的选择来决定是否卸载页面。
1.2 unload
当用户刷新或者关闭页面时,会派发unload事件,此时的document处于一个特殊状态。所有资源依然存在,但是对用户来说都不可见,UI 互动全部无效。该事件无法阻止用户卸载页面,也不会有提示框。
window.addEventListener('unload', function(event) {
console.log('文档将要卸载');
});
注意 一旦定义了unload或者beforeunload事件,页面将不会被缓存
2 session事件
2.1 pageshow
pageshow类似小程序中onShow事件,在页面首次加载和从缓存中读取时都会触发,触发时机在onload事件之后,从缓存中读取时,不会触发onload,但会触发pageshow事件。
pageshow事件的event中有persisted属性,表示该页面是否来自缓存,
true表示取自缓存,false表示重新加载
window.addEventListener('pageshow', function(event) {
alert('pageShow');
});
2.2 pagehide
pagehide类似与小程序中的onHide事件,同样是用户离开页面时触发,与unload事件不同的是,pagehide事件可以将页面放入缓存中,unload事件不会。
window.addEventListener('pagehide', function(event) {
console.log('pagehide')
});
window.addEventListener('unload', function(event) {
console.log('unload')
});
pagehide事件会执行在unload事件之前
pagehide事event也有persisted属性,
设置为true表示将页面放入缓存,false表示不放入缓存
3 clipboard事件
3.1 copy
copy事件在页面中的内容被复制时调用,可以绑定在document(全局),也可以绑定在某一个元素上(只有在这个元素内部的内容被复制才触发)
document.addEventListener('copy',function(e){
e.clipboardData.setData('text/plain','helloworld');
e.preventDefault()
})
可以通过copy派发的event内部的clipboardData对象来修改复制的内容,通过setData方法
该方法有两个参数
1、表示复制的内容类型;
2、复制的文件内容
最后还需要调用e.preventDefault()阻止默认事件
注意:用户原本复制的内容无法通过copy的event对象获取
3.2 paste
paste事件在剪切板的内容被粘贴到文档内时触发,paste同样可以绑定到其他的元素上
paste事件我们可以通过以下方法获取到剪切板里面的值
document.addEventListener('paste',function(e){
//剪切板的内容放在clipboardData的items中
let pasteItems=e.clipboardData.items;
for(let i=0;i<pasteItems.length;i++){
//items中的每个对象有
//type(内容类型,就是copy中setData的第一个参数)和kind(有string和file类型)
let curItem=pasteItems[i];
console.log(curItem.type,curItem.kind);
if(curItem.kind==='string'){
//如果kind为string,可以通过getAsString按如下方式获取到实际的值
curItem.getAsString(function(str){
console.log(str)
})
}else if(curItem.kind==='file'){
//如果kind是file类型,可以通过getAsFile获取,获取到的是一个blob类型
let file=curItem.getAsFile();
console.log(file)
let url=window.URL.createObjectURL(file)
$('img').attr('src',url)
}
}
})
通过这个方式就可以实现类似于csdn写博客时的图片粘贴上传功能了。