Javascript进阶笔记 - 常用事件

常用事件

目录

1. onload事件

  • onload 加载完成事件：页面加载完成后，对页面js代码进行初始化操作
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript">
        function onloadFun(){
            alert("静态注册onload事件")
        }
        window.onload = function(){
            alert("动态注册onload事件")
        }
    </script>
</head>
<body onload="onloadFun();">
</body>
</html>

<!--
由运行结果可以看出，静态注册的事件需要在body内显式调用，而动态注册的不用
同时，onload事件只能从静态和动态注册中二选一
-->

2. onclick事件

  • onclick 单击事件：用于按钮的点击响应操作
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript">
        function onclickFun(){
            alert("静态注册onclick事件");
        }

        window.onload = function(){
            //根据id属性获取一个标签对象
            var btnObj = document.getElementById("btn01");
            //由标签对象调用函数
            btnObj.onclick = function(){
                alert("动态注册onclick事件");
            }
        }
    </script>
</head>
<body>
<button onclick="onclickFun()">静态注册</button>
<button id="btn01">动态注册</button>
</body>
</html>

3. onblur事件

  • onblur 失去焦点事件：用于输入框失去焦点后验证其输入内容是否合法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript">
        function onblurFun(){
            alert("静态注册onblur事件");
        }

        window.onload = function(){
            var passwordObj = document.getElementById("password");
            passwordObj.onblur = function(){
                alert("动态注册onblur事件");
            }
        }
    </script>
</head>
<body>
用户名:<input type="text" onblur="onblurFun();"><br/>
密码:<input id="password" type="text"><br/>
</body>
</html>

4. onchange事件

  • onchange 内容发生改变事件：用于下拉列表和输入框内容发生改变后的操作
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript">
        function onchangeFun(){
            alert("静态注册onchange事件");
        }

        window.onchange = function(){
            var listObj = document.getElementById("list");
            listObj.onchange = function(){
                alert("动态注册onchange事件");
            }
        }
    </script>
</head>
<body>
选择列表A
<select onchange="onchangeFun()">
    <option>--请选择--</option>
    <option>AAA</option>
    <option>BBB</option>
    <option>CCC</option>
</select><br/>
选择列表B
<select id="list">
    <option>--请选择--</option>
    <option>AAA</option>
    <option>BBB</option>
    <option>CCC</option>
</select>
</body>
</html>

5. onsubmit事件

  • onsubmit 表单提交事件：用于表单提交前，验证所有表单项是否合法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript">
        function onsubmitFun(){
            alert("静态注册onsubmit事件");
            return false;
        }

        window.onsubmit= function(){
            var formObj = document.getElemntById("form01");
            formObj.onsubmit = function(){
                alert("动态注册onsubmit事件");
                return false;
            }
        }
    </script>
</head>
<body>
<form action="https://www.baidu.com/" method="get" onsubmit="return onsubmitFun()">
    <input type="submit" value="静态注册"/>
</form>
<form action="https://www.baidu.com/" id="form01">
    <input type="submit" value="动态注册"/>
</form>
</body>
</html>

6. onscroll事件

  • 该事件会在元素的滚动条滚动时触发

    //获取id为Info的p元素
var info = document.getElementById("Info");
//为Info绑定一个滚动条滚动事件
info.onscroll = function(){
    //检查垂直滚动条是否到底
    if(info.scrollHeight - info.scrollTop == info.clientHeight){
        alert("滚动条已经到底了！");
    }
}

7. onmousemove事件

  • 该事件会在鼠标在元素中移动时触发

    //当鼠标在areaDiv中移动时，在showMsg中显示鼠标的坐标
var areaDiv = document.getElementById("areaDiv");
var showMsg = document.getElementById("showMsg");

areaDiv.onmousemove = function(event){
    
    //clientX/Y可以获取鼠标指针的水平/垂直坐标
    var x = event.clientX;
    var y = event.clientY;
    
    showMsg.innerHTML = "x = " + x + " , y = " + y;
}

8. onmousedown & onmouseup事件

  • 该事件会在鼠标按下或松开时触发

    //实现拖拽效果
box.onmousedown = function () {
	let ol = event.pageX - box.offsetLeft;
	let ot = event.pageY - box.offsetTop;

	document.onmousemove = function () {
		let left = event.pageX - ol;
		let top = event.pageY - ot;
		box.style.left = left + "px";
		box.style.top = top + "px";
	}

	document.onmouseup = function () {
		document.onmousemove = null;
		document.onmouseup = null;
	}
}

9. onwheel事件

  • 该事件会在滚轮滚动时触发

    //鼠标滚轮向下滚动时，方块变高，反之变矮
box.onwheel = function(event){
	if(event.wheelDelta > 0){
		box.style.height = box.clientHeight - 10 + "px";
	}else{
		box.style.height = box.clientHeight + 10 + "px";
	}
}

10. onkeydown & onkeyup事件

  • 该事件会在键盘按下或松开时触发

    • 对于onkeydown来说，如果一直按着某个按键不松手，则事件会一直触发

      当onkeydown连续触发时，第一次和第二次之间会间隔一会，这种设计是为了防止误操作

    • 键盘事件一般会绑定给一些可以获取到焦点的对象或document

    document.onkeydown = function (event) {
	switch (event.key) {
		case "a":
			box.style.left = box.offsetLeft - 10 + "px";
			break;
		case "d":
			box.style.left = box.offsetLeft + 10 + "px";
			break;
		case "w":
			box.style.top = box.offsetTop - 10 + "px";
			break;
		case "s":
			box.style.top = box.offsetTop + 10 + "px";
			break;
	}
}
posted @   Solitary-Rhyme  阅读(30)  评论(0)  编辑  收藏  举报
相关博文：
· Javascript进阶笔记 - 事件
· Javascript进阶笔记 - BOM
· JS常用事件
· JavaScript常用事件详解
· JavaScript——事件
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
历史上的今天：
2021-11-02 《JAVA核心技术 卷I》 第五章 - 继承
点击右上角即可分享
微信分享提示