JavaScript010，事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JavaScript事件</title>
    </head>
    <body onload="test5()"><!-- 此处我放置了onload事件，页面加载完毕会触发该事件 -->
        <h3>JavaScript Event(Event:事件)</h3>
        <!-- 当用户做了某种特定操作之后触发事件，以此来执行一些JavaScript代码； -->
        
        请输入内容：<input type="text" onchange="test()"/>
        <p id="demo">当在文本框输入内容的时候，鼠标离开，意为input标签元素被改变，就执行test()</p>
        
        <p>-------------------------</p>
        
        <button type="button" onclick="test1()">点我</button>
        <p id="demo1">当鼠标点击按钮，触发事件执行test1()</p>
        
        <p>-------------------------</p>
        
        <button type="button" onmouseover="test2()" onmouseout="test3()">按钮</button>
        <p id="demo2">当鼠标在按钮上移动时，就会触发事件执行test2()，移开时触发test3()</p>
        
        <p>-------------------------</p>
        
        输入框内按键盘：<input type="text"  onkeydown="test4()" />
        <p id="demo3">当你按下键盘时，就会触发test4()</p>
        
        <p>-------------------------</p>
        
        <p id="demo4"></p>
        
        <script type="text/javascript">
            /* 几种常见事件
                onchange    HTML 元素改变
                onclick        用户点击 HTML 元素
                onmouseover    用户在一个HTML元素上移动鼠标
                onmouseout    用户从一个HTML元素上移开鼠标
                onkeydown    用户按下键盘按键
                onload        浏览器已完成页面的加载
             */
            function test(){
                /* onchange    HTML 元素改变 */
                document.getElementById('demo').innerHTML='我被执行了';
            }
            
            function test1(){
                /* onclick        用户点击 HTML 元素 */
                document.getElementById('demo1').innerHTML='我被执行了';
            }
            
            function test2(){
                /* onmouseover    用户在一个HTML元素上移动鼠标 */
                document.getElementById('demo2').innerHTML='你鼠标在移动';
            }
            
            function test3(){
                /* onmouseout    用户从一个HTML元素上移开鼠标 */
                document.getElementById('demo2').innerHTML='你鼠标移开了';
            }
            
            function test4(){
                /* onkeydown    用户按下键盘按键 */
                document.getElementById('demo3').innerHTML='你按了键盘';
            }
            
            function test5(){
                /* onload        浏览器已完成页面的加载
                onload 支持的标签<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script> */
                document.getElementById('demo4').innerHTML='如果我被加载出来，说明网页已经加载完毕！';
            }
        </script>
    </body>
</html>
猜你喜欢
