js---常见事件

1，点击事件

<body>
<input type="text" id="name">
</body>
<script>
    //双击清空
    let name = document.getElementById('name');
    name.ondblclick=function () {
    
    
        this.value=''
    }
</script>

在这里插入图片描述
双击后：

2，焦点事件

<body>
姓名：<input type="text" id="name"><span id="sp"></span>
</body>
<script>
    //假设：数据库已经有tom，提示用户名已经存在
    document.getElementById('name').onblur=function () {
    
    
        if (this.value=='tom'){
    
    
            document.getElementById("sp").innerHTML='用户名已经存在'
        }else {
    
    
            document.getElementById('sp').innerHTML=''
        }
    }
</script>

在这里插入图片描述
3，加载事件

<script>
     //窗口内容加载完毕才执行函数体的内容
      window.onload=function () {
    
    
         console.log(document.getElementById('name').value);
      }
</script>
<body id="body">
	<input type="text" id="name" value="貂蝉">
</body>

在这里插入图片描述

4，鼠标事件

<body>
<div id="div1" style="width: 200px;height: 200px;background-color: #e67318"></div>
</body>
<script>
    let div1 = document.getElementById('div1');
    div1.onmouseover=function () {
    
    
        console.log('鼠标进来了')
    }
    div1.onmouseout=function () {
    
    
        console.log("鼠标出去了")
    }
</script>

在这里插入图片描述

5，键盘事件

<body>
<form action="4,鼠标事件.html" id="form">
    姓名：<input type="text" id="name"><br>
    密码：<input type="password" id="psw">
</form>
</body>
<script>
    let name = document.getElementById('name');
    let psw = document.getElementById('psw');
    let form = document.getElementById('form');
    //1，姓名输入框中，回车，光标自动进入密码输入框中
    name.onkeypress=function(){
    
    
        let e = window.event;   //定义一个事件
        console.log(e.keyCode);
        if (e.keyCode==13){
    
     //13表示回车键
            psw.focus()//让输入框获取焦点
        }
    }
    //2，密码输入框中回车，自动提交
    psw.onkeypress=function () {
    
    
        let e = window.event;
        if (e.keyCode==13){
    
    
            //让表单提交
            form.submit()
        }
    }
</script>

在这里插入图片描述

常用的键盘键对应的数值
在这里插入图片描述

6，下拉框事件

<body>
请选择您的武器:
<select name="" id="weapon">
<option value="航母">航母</option>
<option value="歼20">歼20</option>
<option value="歼15">歼15</option>
<option value="核潜艇">核潜艇</option>
<option value="坦克">坦克</option>
<option value="M762">M762</option>
<option value="榴弹炮">榴弹炮</option>
</select>
</body>
<script>
    let weapon = document.getElementById('weapon');
    weapon.onchange=function () {
    
    
        console.log(weapon.value);//选择后，输出
    }
</script>

在这里插入图片描述
7，文本框事件

<body>
<textarea name="" id="tt" cols="30" rows="10">
    hello world
</textarea>
</body>
<script>
    document.getElementById('tt').onselect=function () {
    
    
        console.log(this.value);	//鼠标选中文本框的内容，并输出
    }
</script>

在这里插入图片描述
8，表单事件

<body>
<form action="7,文本框事件.html" id="form1" onsubmit="return fun()" onreset="fun1()">
    姓名：<input type="text" id="name" value="貂蝉">
    <input type="submit" value="提交">
    <input type="reset" value="重置">
</form>
</body>
<script>
    //提交事件
    document.getElementById('form1').onsubmit=function () {
    
    
        if (document.getElementById('name').value.trim()==''){
    
    
            return false
        }
    }
    function fun1() {
    
    
        console.log(1)
        console.log(2)
    }
    function fun() {
    
    
        if (document.getElementById('name').value.trim()==''){
    
    
            return false
        }
    }
</script>

在这里插入图片描述
点击提交后，跳转到文本框事件中

点击重置后，回到文本框貂蝉的原始状态

猜你喜欢