发布：2024/11/30 16:18:32作者：管理员 来源：本站 浏览次数：140
事件：可以在触发浏览器的行为
1.窗口事件
失去焦点事件 onblur
获得焦点事件 onfocus
加载完成后事件 onload
.窗口大小改变事件 onresize
当窗口失去焦点时
window.onblur = function () {
console.log('窗口失去了焦点！');
}
/* 当窗口获得焦点时 */
window.onfocus = function () {
console.log('窗口获得了焦点！');
}
/* 窗口加载完成后*/
window.onload =function () {
console.log("窗口加载完成！")
}
/* 窗口大小改变时 事件 */
window.onresize = function () {
console.log("窗口大小正在发送改变");
}
获取某一个id
var userCode = document.getElementById("userCode");
/* 获得焦点时 改变背景色 */
userCode.onfocus = function () {
this.style.backgroundColor = 'green';
}
/* 失去焦点时 改变背景色 */
userCode.onblur = function () {
this.style.backgroundColor = 'red';
}
* onchange 内容改变事件 */
userCode.onchange = function () {
console.log(userCode.value);
}
/* oninput 当文本框内容改变时 ，立即将改变内容 输出在控制台 */
userCode.oninput = function () {
console.log(userCode.value);
}
// 获取表单 未能提交时
userCode.oninvalid = function () {
console.log("请您完成表单的内容!");
}
/* 当文本框内容被选中时 */
userCode.onselect = function () {
// this
console.log("您已经选择了文本框!");
}
// onclick 单击事件buttobn
butA.onclick = function () {
document.getElementById("userCode").value = '';
document.getElementById("userPwd").value = '';
}
2.表单事件
表单提交事件 onsubmit
表单重置事件 onreset
提交
form.onsubmit=function(){}
重置
form.onreset=function(){}
3.键盘事件
键盘按下事件 onkeydown
当松开按键时 触发 onkeyup
键盘 按下并松开时 触发 onkeypress
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.divStyle {
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
</head>
<body>
<div id="box" class="divStyle">
</div>
<script>
/!* 键盘按下事件 *!/
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('按下了回车');
}
}
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>
4.鼠标事件
鼠标单击事件 onclick
鼠标双击事件 ondblclick
当鼠标按钮按下运行时 onmouseup
当鼠标进入了当前的DIV,不能阻止冒泡 onmouseover
当鼠标移出时 不能阻止冒泡 onmouseout
当鼠标进入了当前的DIV,可以阻止事件冒泡 onmouseenter
当鼠标移出了当前的DIV,可以阻止事件冒泡 onmouseleave
当滚动元素的滚动条运行时 onscroll
当鼠标的滚轮运行时 onmousewheel
<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>
<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>
© Copyright 2014 - 2024 柏港建站平台 ejk5.com. 渝ICP备16000791号-4