javascript(event)(DAY20)

之前的文章中有介绍到事件处理函式的用途，这边在简单复习一下event是做什麽用的，主要是监听使用者的操作行为，以至於做网页的动态变更。接下来我们就赶快来认识常用到的event监听事件!

Event监听事件

在前篇文章中有介绍过onclick的监听事件，这边介绍几个也常会用到的Event!
onload:页面完成载入後
onblur:游标失去焦点时，常用在表单输入框元素
onfocus:元素被聚焦时，常用在表单输入框元素
onchange:元素的值被更改时，常用在select/option元素

1.onload事件

2. onblur事件

3. onfocus事件

4. onchange事件

<head>
    <script>
        function onload() {
            alert("网页已载入");
        }
        function blurtest() {
            document.getElementById("blur").innerHTML="元素失去焦点瞜!";
        }
        function focustest() {
            document.getElementById("focus").innerHTML = "元素被聚焦瞜!此为必填栏位";
        }
        function changetest() {
            document.getElementById("change").innerHTML ="侦测到更换选项瞜!"
        }
    </script>
</head>
<body onload="onload()">
    onblur:<input type="text" placeholder="输入完成後点击其他地方" onblur="blurtest()">
    <h5 style="color:red" id="blur"></h5>
    onfocus:<input type="text" placeholder="点击这里" onfocus="focustest()">
    <h5 style="color:red" id="focus"></h5>
    onchange:
    <select onchange="changetest()">
        <option>点我下面那个元素吧!</option>
        <option>请点我!</option>
    </select>
    <h5 style="color:red" id="change"></h5>
</body>