JavaScript——事件

JavaScript学习笔记（二）——事件

JavaScript中常用事件包含以下几种：

blur：失去焦点

change：下拉列表选中项改变，或文本框内容改变

click：鼠标单击

dbclick：鼠标双击

focus：获得焦点

keydown：键盘按下

keyup：键盘弹起

load：页面加载完毕 => 整个html页面中所有的元素全都加载完毕之后发生

mousedown：鼠标按下

mouseover：鼠标经过

mousemove：鼠标移动

mouseout：鼠标离开

mouseup：鼠标弹起

reset：表单重置

select：文本被选定

submit：表单提交

任何事件都会对应一个事件句柄，事件句柄是在事件前添加on。

onXXX事件句柄出现在一个标签的属性位置上，即事件句柄以属性的形式存在。

0x01 注册事件

注册事件的两种方式（以onclik）：

第一种方式：直接在标签中使用事件句柄

<!--注册事件的第一种方式，直接在标签中使用事件句柄-->
<script>
    //对于当前程序，此函数称为回调函数（callback function）
	function sayHello(userName) {
    alert("Hello " + userName);
	}
	var username = "";
	if (username) {
   		alert("Hello " + username)
	} else {
    	alert("用户名不能为空！");
	}
</script>
<input type="button" value="你好" onclick="sayHello('xiaoxin_zh')" />

此时点击页面中的你好按钮就会出现弹窗Hello xiaoxin_zh

第二种方式：使用JavaScript代码完成

注意：这种方式input标签必须在script标签前面！

<!--注册事件的第二种方式，使用JavaScript代码完成-->
<input type="button" value="你好" id="mybt" />
<script>
    function sayHello() {
        alert("Hello");
    }
    var butt = document.getElementById("mybt");//document为内置对象，表示整个HTML页面
    butt.onclick = sayHello;//千万别加小括号！！！
</script>
<!--还可以使用匿名函数，效果是一样的-->
<input type="button" value="你好" id="mybt" />
<script>
    document.getElementById("mybt").onclick = function() {//匿名回调函数
        alert("Hello");
    };
</script>

此时点击页面中的你好按钮就会出现弹窗Hello

由于第二种方式要求input标签必须在script标签前面，为了解除这种限制我们对第二种方式进行改良：

<body onload="ready()"><!--此处在页面加载完毕后会运行ready()函数，加载onclick事件-->
    <script>
        function ready() {
            document.getElementById("mybt").onclick = function() {
            alert("Hello");
            };
        }
    </script>
    <input type="button" value="你好" id="mybt" />
</body>

继续改良：分文件编写。

html文件：

<body>
    <input type="button" value="你好" id="mybt" />
</body>

JavaScript文件：

window.onclick = function() {//页面加载完毕后会执行匿名回调函数1
    document.getElementById("mybt").onclick = function() {//匿名回调函数1调用此匿名回调函数2
        alert("Hello");
     };
};

0x02 键盘事件——捕捉回车键

捕捉回车键：我们在一个网站登录账号时，往往在输入完密码之后不去点击“登录按钮”，我们更常用的是在输入完密码后直接按回车键页面就会完成登录，这就会用到捕捉回车键的功能。

html文件：

<body>
    用户名：<input type="text" id="username" /><br>
    密  码：<input type="password" id="psw" />
</body>

JavaScript文件：

window.onload = function() {
    document.getElementById("psw").onkeydown = function(event) {
        //获取键值：回车键键值为13，Esc的键值为27
        //对于键盘事件对象来说，都有keyCode属性获取键值
        if(event.keyCode === 13) {
            alert("Login successful")
        }
    }
}