JavaScript

JS事件(event)处理简介说明

下文笔者讲述JS事件的简介说明,如下所示

JS事件功能

JS 事件(event):
    用于用户同网页进行交互操作
	  如:
	    单机某个链接或按钮
        在文本框中输入文本
        按下键盘上的某个按键、移动鼠标等
        当事件发生时

JS事件注意事项:
    JS事件都使用on开头
	 如:onclick,onload等
事件备注
鼠标、键盘事件 onclick 点击鼠标时触发此事件
ondblclick 双击鼠标时触发此事件
onmousedown 按下鼠标时触发此事件
onmouseup 鼠标按下后又松开时触发此事件
onmouseover 当鼠标移动到某个元素上方时触发此事件
onmousemove 移动鼠标时触发此事件
onmouseout 当鼠标离开某个元素范围时触发此事件
onkeypress 当按下并松开键盘上的某个键时触发此事件
onkeydown 当按下键盘上的某个按键时触发此事件
onkeyup 当放开键盘上的某个按键时触发此事件
窗口事件onabort 图片在下载过程中被用户中断时触发此事件
onbeforeunload 当前页面的内容将要被改变时触发此事件
onerror 出现错误时触发此事件
onload 页面内容加载完成时触发此事件
onmove 当移动浏览器的窗口时触发此事件
onresize 当改变浏览器的窗口大小时触发此事件
onscroll 当滚动浏览器的滚动条时触发此事件
onstop 当按下浏览器的停止按钮或者正在下载的文件被中断时触发此事件
oncontextmenu 当弹出右键上下文菜单时触发此事件
onunload 改变当前页面时触发此事件
表单事件 onblur 当前元素失去焦点时触发此事件
onchange 当前元素失去焦点并且元素的内容发生改变时触发此事件
onfocus 当某个元素获得焦点时触发此事件
onreset 当点击表单中的重置按钮时触发此事件
onsubmit 当提交表单时触发此事件

事件绑定

 事件绑定：
     指事件绑定到html元素中,然后通过事件触发

onclick属性示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <button type="button" onclick="myBtn()">按钮</button>
    <script type="text/javascript">
        function myBtn(){
            alert("Hello World!");
        }
    </script>
</body>
</html>

事件绑定的第二种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <button type="button" id="myBtn">按钮</button>
    <script>
        function sayHello() {
            alert('Hello World!');
        }
        document.getElementById("myBtn").onclick = sayHello;
    </script>
</body>
</html>

onmouseover 事件

onmouseover 事件就是指当用户鼠标指针移动到元素上时触发的事件 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <button type="button" 
	   onmouseover="alert('您的鼠标已经移动到了该按钮上');">
	    请将鼠标移动至此处</button><br>
    <a href="#" onmouseover="myEvent()">请将鼠标移动至此处</a>
    <script>
        function myEvent() {
            alert('您的鼠标已经移动到了该链接上');
        }
    </script>
</body>
</html>

onmouseout事件

onmouseout 事件与 onmouseover 事件正好相反，onmouseout 事件会在鼠标从元素上离开时触发 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <div style="width: 350px; height: 200px; border:1px solid black" id="myBox"></div>
    <script>
        function myEvent() {
            alert('您的鼠标已经离开指定元素');
        }
        document.getElementById("myBox").onmouseout = myEvent;
    </script>
</body>
</html>

onkeydown事件

onkeydown 事件是指当用户按下键盘上的某个按键时触发的事件 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <input type="text" onkeydown="myEvent()">
    <script>
        function myEvent() {
            alert("您按下了键盘上的某个按钮");
        }
    </script>
</body>
</html>

onkeyup 事件

onkeyup 事件是指当用户按下键盘上的某个按键并将其释放（即按下并松开某个按键）时触发的事件 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <input type="text" onkeyup="myEvent()">
    <script>
        function myEvent() {
            alert("您按下了键盘上的某个按钮，并将其释放了");
        }
    </script>
</body>
</html>