zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    想学好H5的话,你一定要知道的9个网站!
    颜色拾取
    Linux ( Centos 7.3 x64) 安装 nginx (一)
    获取url链接 判断加上HTTPS
    使用PHPMailer发送邮件
    PHP 判断一维数组或者是二维数组
    谨以此纪念下今天开通了博客
    线上服务器运维问题记录
    使用requests遇到的坑
    一个java进程突然消失的问题
  • 原文地址:https://www.cnblogs.com/xiao9426926/p/6610704.html
Copyright © 2011-2022 走看看