JavaScript学习（六）事件

事件是可以被JavaScript侦测到的行为

网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义

常用事件

JavaScript学习（六）事件

事件的应用非常多,知识点很重要一定要深刻理解。
事件调用用法如下例讲解 , 事件内都可以参数传递应用方式如点击事件；
注意：事件的引号内部其实是填写的js代码 , 自己下面可以尝试一下。例： onClick="js代码"
示例展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js事件</title>
    <style type="text/css">
        .mydiv {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>
<!--下面定义  鼠标经过事件 , 键盘按下事件  用法
与下面的鼠标移出、键盘弹起事件类似没有重复定义-->

<!--1. 加载事件定义-->
<body onLoad="eventload();">

<!--2. 点击事件定义,下面是js代码示例-->
<button onClick="eventclick(2);">单击</button>
<button onClick="console.log(1222);">按钮</button>

<!--3. 鼠标移出事件定义-->
<div class="mydiv" onMouseOut="eventonMouseOut();"></div>

<!--4. 文本内容改变事件定义(必须提交才生效->回车、提交按钮)-->
<input type="text" value="username" onChange="eventchange()">
<p></p>

<!--5. 文本选中事件定义(选中输入框内的文本才调用)-->
<input type="text" onSelect="eventselect()" value="nihaoojsjfksd">
<p></p>

<!--6. 光标聚集事件定义-->
<input type="text" onFocus="eventfocus()">
<p></p>

<!--7. 移开光标事件定义-->
<input type="text" onBlur="eventblur()">
<p></p>

<!--8. 键盘弹起事件定义-->
<textarea onKeyup="eventketup()" cols="30" rows="5"></textarea>

<input type="submit" value="提交">
<script type="text/javascript">
    //1. 加载事件调用
    function eventload() {
        console.log("onLoad 事件");
    }

    //2. 点击事件调用
    function eventclick(myid) {
        console.log("onClick 事件 myid:"+myid);
    }

    //3. 鼠标移出事件调用
    function eventonMouseOut() {
        console.log("onMouseOut 事件");
    }

    //4. 文本内容改变事件调用
    function eventchange() {
        console.log("onChange 事件");
    }

    //5. 文本选中事件调用
    function eventselect() {
        console.log("onSelect 事件");
    }

    //6. 光标聚集事件调用
    function eventfocus() {
        console.log("onFocus 事件");
    }

    //7. 移开光标事件调用
    function eventblur() {
        console.log("onBlur 事件");
    }

    //8. 键盘弹起事件调用
    function eventketup() {
        console.log("onKeyup 事件");
    }
</script>
</body>
</html>