JavaScript 事件监听

最新推荐文章于 2024-07-16 20:08:38 发布

「已注销」

最新推荐文章于 2024-07-16 20:08:38 发布

阅读量404

点赞数

分类专栏： javaScript 文章标签： javascript webview html

本文链接：https://blog.csdn.net/m0_57855884/article/details/124629112

版权

javaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件监听</title>
</head>
<body>
    <input type="button" onclick="on()"  value="按钮1">
    <input type="button" id="btn"  value="按钮2"><br>

    <input type="text" id="fname" onblur="upperCase()" ><br>

    First name: <input type="text" onfocus="setStyle(this.id)" id="ffname">
    Last name: <input type="text" onfocus="setStyle(this.id)" id="iiname"><br>

    Filed1: <input type="text" id="field1" value="hello world">
    Filed2: <input type="text" id="field2" >
    点击按钮把 field1的内容拷贝到field2中
    <button onclick=" document.getElementById('field2').value=document.getElementById('field1').value">Copy Text</button><br>

   

    <!-- 确认按钮提交 -->
    <form id="register" action="#" >
    <input type="text" name="username">

    <input type="submit" value="提交">
    </form>
</body>
<script>
    /*
    事件监听：HTML事件是发生在HTML元素上的“事情”。比如：
        1.按钮被点击
        2.鼠标移动到元素上
        3.按下键盘按键
    事件监听：JavaScript可以在事件被侦测到时执行代码
    */

   /*事件监听
        1.事件绑定
        2.常见事件
   */
//   事件绑定方式有两种：
//   方式一:通过HTML标签中的事件属性进行绑定
        function on(){
            alert("我被点击了");
        }

// 方式二通过Dom元素属性绑定
        document.getElementById("btn").onclick=function(){
            alert("我被点击了");
        }
        //     Dom Event 常用事件
 /* 
    onblur 元素失去焦点  (文本输入框失去焦点)
 */
// 获取焦点 输入 小写字母  ,失去焦点 字母变大写
        function upperCase(){
            var x = document.getElementById("fname").value
            document.getElementById("fname").value=x.toUpperCase();
        }
/*
    onfocus 获得焦点
*/
function setStyle(x){
    document.getElementById(x).style.background="yellow";
   
}
/*
    onclick 单击事件
*/
// 点击按钮把 field1的内容拷贝到field2中

/*
    onkeydown 某个按键被按下了
*/

/*
onmouseover 鼠标移到某个元素之上
onmouseout  鼠标从某元素移开
*/

/*
    onsubmit 确认按钮被点击
*/
document.getElementById("register").onsubmit = function(){
    // onsubmit 返回 true, 则表单会被提交,返回 false ,则表单不提交
    return true;
}



</script>
</html>