我们首先来了解下在JavaScript中什么是事件？
JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。
基本原理
当我们在某个元素上添加一个事件时，根据事件执行的前后可以把它当成一个事件流，例如在DOM事件中规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，然后是实际的目标接收到事件，最后是冒泡阶段，可以在这个阶段对事件做出响应。
首先我们来了解下
1.窗口事件
当鼠标打开页面后，再点击其他文件窗口是就会触发焦点事件
onblur :失去焦点
onfocus:获得焦点
/* 当窗口失去焦点时 */
window.onblur = function () {
console.log('窗口失去了焦点！');
}
/* 当窗口获得焦点时 */
window.onfocus = function () {
console.log('窗口获得了焦点！');
onload:窗口加载事件
onresize:窗口大小缩放事件
/* 窗口加载完成后*/
window.onload =function () {
console.log("窗口加载完成！")
}
/* 窗口大小改变时 事件 */
window.onresize = function () {
console.log("窗口大小正在发送生改变");
}
表单事件
onchange： 内容改变事件
oninput ：当文本框内容改变时 ，立即将改变内容 输出在控制台
/* onchange 内容改变事件 */
userCode.onchange = function () {
console.log(userCode.value);
}
/* oninput 当文本框内容改变时 ，立即将改变内容 输出在控制台 */
userCode.oninput = function () {
console.log(userCode.value);
}
onFocus 和 onChange 事件通常相互配合用来验证表单。
oninvalid:获取表单 未能提交时
onselect:当文本框内容被选中时
// 获取表单 未能提交时
userCode.oninvalid = function () {
console.log("请您完成表单的内容!");
}
/* 当文本框内容被选中时 */
userCode.onselect = function () {
// this
console.log("您已经选择了文本框!");
}onsubmit:为表单绑定提交事件
下面是一个使用 onSubmit 事件的例子。当用户单击表单中的确认按钮时，myForm 函数就会被调用。假若域的值无效，此次提交就会被取消。myForm函数的返回值是 true 或者 false。如果返回值为true，则提交表单，反之取消提交。
/* 为表单绑定提交事件 */
myForm.onsubmit = function () {
let userCode = document.getElementById("userCode").value;
let userPwd = document.getElementById("userPwd").value;
var reg = /^[A-Za-z0-9]{6,12}$/;
console.log("触发了表单的提交事件！");
if (userCode == '') {
alert("账号不能为空");
} else if (userCode.length < 6 || userCode.length > 12) {
alert("账号长度错误");
} else if (!reg.test(userCode)) {
alert("账号只能为字母与数字!");
} else if (userPwd == '') {
alert("密码不能为空");
} else if (userPwd.length < 6 || userPwd.length > 12) {
alert("密码长度错误");
} else if (!reg.test(userPwd)) {
alert("密码只能为字母与数字!");
} else {
return true;
}
// return true:可以提交 false 不能提交
return false;
}onclick:点击事件
butA.onclick = function () {
console.log("点击");
}键盘事件
键盘事件是指用户在使用键盘时触发的事件。例如，用户按【Esc】键关闭打开的状态栏，按【Enter】键直接完成光标的上下切换等。
onkeydown：当键盘上的某个按键被按下时触发此事件
onkeyup：当键盘上的某个按键被按下后弹起时触发此事件
onkeypress：当输入有效的字符按键时触发此事件
// 键盘按下事件
window.onkeydown = function (event) {
// 解决兼容问题
event = event || window.event;
console.log("键盘按下了" + event.keyCode);
if (event.keyCode == 13) {
console.log('按下了回车');
}
}
/* onkeyup： 当松开按键时 触发 */
window.onkeyup = function (event) {
event = event || window.event;
console.log("键盘按下了" + event.keyCode);
if (event.keyCode == 13) {
console.log('按下了回车');
}
}
/* 键盘 按下并松开时*/
window.onkeypress = function (event) {
event = event || window.event;
console.log("键盘按下了" + event.keyCode);
if (event.keyCode == 13) {
console.log('按下了回车');
}
}
我们通过一个小案例来了解下按键的触发：
<style>
*{
margin: 0px;
padding: 0px;
}
.divStyle {
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
</head>
<body>
<div id="box" class="divStyle">
</div>
<script>
var box = document.getElementById("box");
document.onkeydown = function (event) {
event = event ||window.event;
switch (event.keyCode) {
case 37:
box.style.left = box.offsetLeft - 10+'px';
break;
case 39:
box.style.left = box.offsetLeft + 10+'px';
break;
case 38:
box.style.top = box.offsetTop - 10+'px';
break;
case 40:
box.style.top = box.offsetTop + 10+'px';
break;
}
}
</script>
键盘上每个按键都有对应的值，通过值传递给页面进行相应。
鼠标事件
鼠标事件是指通过鼠标动作触发的事件。
onclick：鼠标单击时触发此事件
ondblclick：鼠标双击时触发此事件
onmousedown：鼠标按下时触发此事件
onmouseup：鼠标弹起时触发的事件
onmouseover：鼠标移动到某个设置了此事件的元素上时触发此事件
onmousemove：鼠标移动时触发此事件
onmouseout：鼠标从某个设置了此事件的元素上离开时触发此事件
onscroll :当滚动元素的滚动条运行时
onmousewheel:当鼠标的滚轮运行时
<body>
<div onmouseover="divMouseover()"
onmouseout="divMouseout()"
style="width: 300px;height: 300px;background: red">
<div onmouseover="divMouseover()"
onmouseout="divMouseout()"
style="width: 100px;height: 100px;background: pink">
</div>
</div>
<script>
window.onclick = function () {
console.log("鼠标单击事件");
}
window.ondblclick = function () {
console.log("鼠标双击事件");
}
window.onmousedown = function () {
console.log("当鼠标按钮按下运行时");
}
window.onmouseup = function () {
console.log("当鼠标按钮运行时");
}
/* onmouseover 当鼠标移入时 不能阻止冒泡 */
function divMouseover() {
console.log("当鼠标进入了当前的DIV");
}
/* onmouseout : 当鼠标移出时 不能阻止冒泡*/
function divMouseout() {
console.log("当鼠标移出了当前的DIV");
}
</script>
</body><body>
<div onmouseenter="divMouseenter()"
onmouseleave="divMouseleave()"
style="width: 300px;height: 300px;background: red">
<div onmouseenter="divMouseenter()"
onmouseleave="divMouseleave()"
style="width: 100px;height: 100px;background: pink">
</div>
</div>
<div id="box" style="overflow: scroll;width: 200px;height: 200px;">
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内
</div>
<script>
/* onmouseenter ： 可以阻止事件冒泡 */
function divMouseenter() {
console.log("当鼠标进入了当前的DIV");
}
/* onmouseleave ： 可以阻止事件冒泡 */
function divMouseleave() {
console.log("当鼠标移出了当前的DIV");
}
document.getElementById("box").onscroll = function () {
console.log("当滚动元素的滚动条运行时");
}
/* 当鼠标的滚轮运行时 */
window.onmousewheel=function (){
console.log("当鼠标的滚轮运行时");
}
</script>
</body>JavaScript事件冒泡(Bubble)
所谓冒泡指的就是事件的向上转导，当后代上的元素被触发时，其祖先元素相同事件也会被触发。
这些基本上就是JavaScript 中常用的事件！
534
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
