• JavaScript_HTML DEMO_2_事件


    如需在用户点击某个元素时执行代码,请向一个HTML事件属性添加JavaScript代码  OnClick=JavaScriptcript

    对事件做出反应

    HTML事件属性

    使用HTML DOM来分配事件

    Onload/Onunload事件

    Onchange事件

    Onmouseover/Onmouseout事件

    <body onload="checkCookies()">
        <p onclick="this.innerHTML='谢谢'">对事件做出反应</p>
        <p id="d1" onclick="changetext()">HTML事件属性</p>
        <p id="d2">使用HTML DOM来分配事件</p>
    
        请输入英文字符:<input type="text" id="fname" onchange="myfunction()" />
        <p>当你离开输入字段时,会触发将输入文本转换为大写的函数。</p>
    
        <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:
        green;120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>
    
        <div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:
        blue;color:#ffffff;90px;height:20px;padding:40px;font-size:12px;">请点击这里</div>
        <script>
            function changetext()
            {
                document.getElementById("d1").innerHTML = Date();
            }
            
            document.getElementById("d2").onclick = function () { displaytext(this) };
            function displaytext(obj)
            {
                obj.innerHTML = "成功";
            }
    
            //onload 和 onunload 事件会在用户进入或离开页面时被触发。
            function checkCookies()
            {
                if(navigator.cookieEnabled==true)
                {
                    alert("已启用 cookie");
                }
                else
                {
                    alert("未启用cookie");
                }
            }
    
            //onchange事件常结合对输入字段的验证来使用
            function myfunction()
            {
                var x = document.getElementById("fname");
                x.value = x.value.toUpperCase();
            }
    
            //onmouseover和onmouseout事件可用于在用户的鼠标移至HTML元素的上方或移出元素时触发函数
            function mOver(obj)
            {
                obj.innerHTML = "谢谢";
            }
            function mOut(obj)
            {
                obj.innerHTML = "把鼠标移到上面";
            }
    
            //onmousedown、onmouseup和onclick
            function mDown(obj)
            {
                obj.style.backgroundColor = "#1ec5e5";
                obj.innerHTML = "请释放鼠标按钮";
            }
            function mUp(obj)
            {
                obj.style.backgroundColor = "blue";
                obj.innerHTML = "请按下鼠标按钮";
            }
    
        </script>
    
    </body>
  • 相关阅读:
    对称二叉树
    显示图片路径问题
    爆炸的联赛模拟 8.24~8.25
    【Java基础总结】字符串
    pro、pre、test、dev环境
    开发环境、测试环境、预发布环境、生产环境的区别
    【IP】虚拟IP原理
    【版本】Spring Cloud 版本
    Zipkin
    【小笔记】小知识记录
  • 原文地址:https://www.cnblogs.com/xiao9426926/p/6610704.html
Copyright © 2020-2023  润新知