JavaScript 事件
原文链接：https://note.noxussj.top/?source=sifou
鼠标事件
鼠标单击事件 click
在文档中鼠标进行单击，就会触发事件。
var i = 0
document.addEventListener('click', function () {console.log(i++)
})
鼠标双击事件 dblclick
在文档中鼠标进行双击，就会触发事件。
var i = 0
document.addEventListener('dblclick', function () {console.log(i++)
})
鼠标按下事件 mousedown
在文档中鼠标进行单击按下，同时不要松开，就会触发事件。
var i = 0
document.addEventListener('mousedown', function () {console.log(i++)
})
鼠标按下松开事件 mouseup
在文档中鼠标进行单击按下并且松开后，就会触发事件。
var i = 0
document.addEventListener('mouseup', function () {console.log(i++)
})
鼠标移入事件 mouseenter
鼠标光标移入文档内时会触发事件。
var i = 0
document.addEventListener('mouseenter', function () {console.log(i++)
})
鼠标移出事件 mouseleave
鼠标光标移出文档内时会触发事件。
var i = 0
document.addEventListener('mouseleave', function () {console.log(i++)
})
鼠标挪动事件 mousemove
鼠标光标在文档内挪动时会触发事件。
var i = 0
document.addEventListener('mousemove', function () {console.log(i++)
})
鼠标触碰子元素 / 来到子元素 / 来到元素事件 mouseout
鼠标光标移出文档内时会触发事件。若文档内存在子元素，那么子元素也会被绑定上移入移出事件。
var i = 0
document.addEventListener('mouseout', function () {console.log(i++)
})
鼠标触碰子元素 / 来到子元素 / 触碰元素事件 mouseover
鼠标光标移入文档内时会触发事件。若文档内存在子元素，那么子元素也会被绑定上移入移出事件。
var i = 0
document.addEventListener('mouseover', function () {console.log(i++)
})
鼠标滚轮事件 mousewheel
不论是否呈现了滚动条，只有在文档外部应用了鼠标滚轮就会触发事件。
var i = 0
document.addEventListener('mousewheel', function () {console.log(i++)
})
文档事件
加载事件 onload
HTML 代码被渲染结束后会触发事件
window.onload = function () {console.log(1)
}
卸载事件 onunload
以后页面被敞开后会触发事件，目前这个无奈调试验证。
window.onunload = function () {console.log(1)
}
窗口尺寸更改事件 onresize
浏览器窗口大小扭转时会触发事件。
window.onresize = function () {console.log(1)
}
表单事件
获取焦点事件 onfocus
输入框内进行单击后鼠标光标会呈现，代表激活状态，同时也属于获取焦点
<input type="text" onfocus="fn()" />
<script>
var i = 0
function fn() {console.log(i++)
}
</script>
失去焦点事件 onblur
输入框光标激活时，鼠标点击输入框以外的中央会勾销光标，同时也属于失去焦点。
<input type="text" onblur="fn()" />
<script>
var i = 0
function fn() {console.log(i++)
}
</script>
扭转事件 onchange
在输入框输出内容后并按下回车键，input 的 value 就会变成你输出的内容，同时也会触发 onchange 事件。
<input type="text" onchange="fn()" />
<script>
var i = 0
function fn() {console.log(i++)
}
</script>
内容选中事件 onselect
当在输入框输出一些内容后，拖动鼠标去选中文字时触发事件。
<input type="text" onselect="fn()" />
<script>
var i = 0
function fn() {console.log(i++)
}
</script>
表单提交事件 onsubmit
表单提交默认是会刷新页面的，这样的用户体验会很差，所以须要搭配 e.preventDefault() 阻止原生事件执行。
<form onsubmit="fn(event)">
<input type="submit" value="Submit" />
</form>
<script>
var i = 0
function fn(e) {console.log(i++)
e.preventDefault()}
</script>
最全面的前端笔记来啦，蕴含了入门到入行的笔记，还反对实时成果预览。小伙伴们不须要再花工夫去写笔记，或者是去网上找笔记了。面试高频发问和你想要的笔记都帮你写好了。反对挪动端和 PC 端浏览，深色和浅色模式。
原文链接：https://note.noxussj.top/?source=sifou