js---常见事件

1,点击事件

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

在这里插入图片描述
双击后:
js---常见事件_第1张图片
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>

js---常见事件_第2张图片

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>

js---常见事件_第3张图片

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>

js---常见事件_第4张图片

常用的键盘键对应的数值
js---常见事件_第5张图片

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>

js---常见事件_第6张图片
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>

js---常见事件_第7张图片
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>

js---常见事件_第8张图片
点击提交后,跳转到文本框事件中
js---常见事件_第9张图片
点击重置后,回到文本框貂蝉的原始状态
js---常见事件_第10张图片

你可能感兴趣的:(js,js,html)