JS事件基础

最新推荐文章于 2024-07-25 09:24:40 发布

华卍

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量91

点赞数

分类专栏： js 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_63908253/article/details/126572572

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

js事件
1注册事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<input type="button" value="hello" id="mybtn">
<script type="text/javascript">
    window.onload = function () {
        document.getElementById("mybtn").onclick=function (){
            alert("234y");

        }
    }
</script>


</body>
</html>

在这里插入图片描述

2.将文本框框改为复选框

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    点一下复选框可改变
</head>
<body>
<script type="text/javascript">
    window.onload = function () {
        document.getElementById("btn").onclick=function (){
          document.getElementById("mytext").type = "checkbox";
          //一个节点中有什么属性就可以点什么属性
          //  mytext里面有type属性可点 并改变
        }

    }
</script>
<input type="text" id="mytext">
<input type="button" value="复选框" id="btn"/>
</body>
</html>

在这里插入图片描述
点复选框按钮后

3.JS捕捉回车键
回车键的键值是13
ESC的是27
keyCode是获取键值

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Document</title>
</head>
<body>
<script type="text/javascript">
    window.onload = function () {
     var use = document.getElementById("use") ;
     use.onkeydown =function (event) {
         if (event.keyCode ===13){
             alert("正在登录")
         }
     }
    }
</script>
<input type="text" id = "use">
</body>
</html>

4.void运算符

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Document</title>
</head>
<body>
<h1>页面顶部</h1>
<br><br><br>
   既保留超链接样式，同时用户点击执行js代码，但页面不跳转
<br>
用void运算符 void(表达式)
用法 javascript:void (0)
其中javascript:作用就是告诉浏览器后面还有js代码，不能省略
<br><br><br><br>
<a href="javascript:void (0)" onclick="window.alert('tedc,')">
    dfsd
</a>
</body>
</html>

在这里插入图片描述
5,设置和获取文本框中的value

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script type="text/javascript">
    window.onload = function () {
        document.getElementById("but").onclick=function (){
            //获取user-name节点内容
            alert(document.getElementById("user-name").value);

        }
    }
</script>

<input type="text" id="user-name"/>
<input type="button" value="huoqu" id="but"/>
</body>
</html>

在这里插入图片描述

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>Document</title>
</head>
<body>
<script type="text/javascript">
    window.onload = function () {
        document.getElementById("butt").onclick=function () {
            document.getElementById("text2").value= document.getElementById("text1").value;
        }
    }
</script>
<br> <hr> <br>
<input type="text"  id="text1"/>
<input type="text"  id="text2"/>
<br>
<input type="button" value="从第一个的value赋值第二个框内" id="butt"/>
<!--光标离开 显示输入内容 -->
<br>
<input type="text"  onblur="alert(this.value)">
</body>
</html>