• JS中onfocus()事件,onblur()事件,onload()事件


    1. onfocus 事件在对象获得焦点时发生。

    实例:

    <html>
    <head>
    <script type="text/javascript">
        function setStyle(x)
        {
            document.getElementById(x).style.background="yellow"
        }
    </script>
    </head>
    <body>
        First name: <input type="text" onfocus="setStyle(this.id)" id="fname" /><br />
        Last name: <input type="text" onfocus="setStyle(this.id)" id="lname" />
    </body>
    </html>
    
    
    结果:当用鼠标点击input窗口的时候 input背景颜色为黄色
    
    

    2. onblur 事件会在对象失去焦点时发生;

    实例:

    <html>
    <head>
    <script type="text/javascript">
        function upperCase()
        {
            var x=document.getElementById("fname").value
            document.getElementById("fname").value=x.toUpperCase()    //toUpperCase() 方法用于把字符串转换为大写
        }
    </script>
    </head>
    <body> 
        输入您的姓名: <input type="text" id="fname" onblur="upperCase()"/>
    </body>
    </html>
    
    
    结果:在input窗口中输入小写的英文 当input失去焦点的时候 将刚输入的input的value内容转成大写
    
    

    3.onload 事件会在页面或图像加载完成后立即发生。

    window.onload 回调函数其实是在页面加载完成后(包括图片内容的显示)才会执行,并不是页面加载的等待过程中就执行。

    例:

    <html>
    <head>
    <script type="text/javascript">
    function load()
    {
    window.status="Page is loaded"
    }
    </script>
    </head>
    
    <body onload="load()">
    </body>
    
    </html>
    onload,加载图片,加载整个body中的内容,所以加在body上
  • 相关阅读:
    day_10作业
    day_10
    day_09
    day_08
    猜年龄游戏
    day_07
    day_06作业
    day05课堂小结
    day05作业
    day04课堂小结
  • 原文地址:https://www.cnblogs.com/muhy/p/13685504.html
Copyright © 2020-2023  润新知