一、表单事件
1. select 当选择输入框字符时出发
input.onselect = function () {
console.log(window.getSelection().toString(), '我被触发了');
}
2. resize 当页面缩放时触发
window.onresize = function(){
console.log(window.outerWidth,window.outerHeight)
3. 滚动事件 scroll
window.onscroll = function () {
// console.log(window.pageYOffset,'获取距离上方位置')
console.log(document.documentElement.scrollTop, '获取距离上方位置')
}
4. input 监听输入框事件
input.oninput = function () {
console.log(event.target.value, '输入框输入的值')
}
5. focus 聚焦事件
input.onfocus = function () {
this.style.backgroundColor = 'red'
}
6. blur 失焦事件
input.onblur = function () {
// this.style.backgroundColor = 'blue';
}
二、鼠标事件
div.onmouseenter = function () {
console.log('鼠标移入');
}
div.onmouseleave = function () {
console.log('鼠标移出');
}
div.onmousemove = function () {
console.log('鼠标一直移动');
}
div.onmousedown = function () {
console.log('鼠标按下');
}
div.onmouseup = function () {
console.log('鼠标抬起')
}
div.onmousewheel = function () {
console.log('鼠标滚轮');
}
div.ondblclick = function () {
console.log('鼠标双击');
}
三、键盘事件
keydown 键盘按下事件
keyup 键盘抬起事件
keypress 键盘持续按下事件
四、页面跳转
1.assign 页面跳转 并且会在浏览器产生一条历史记录
btn1.onclick = function(){
// 页面跳转 并且会在浏览器产生一条历史记录
location.assign('./4-网易严选滚动.html')
}
2. replace 页面替换 将页面替换为页面 不会在浏览器产生一条历史记录
btn2.onclick = function(){
// 页面替换 将页面替换为页面 不会在浏览器产生一条历史记录
location.replace('./4-网易严选滚动.html')
}
3.reload 刷新页面 true/false true表示请求服务器资源 false请求浏览器缓存
btn3.onclick = function(){
// 刷新页面 true/false true表示请求服务器资源 false请求浏览器缓存
location.reload(true);
}
4. 前进到下一个历史记录栈
history.forward();
前进一个下一个历史记录页面
history.go(1)