/* 看板娘 */ /* 粒子吸附*/

绑定事件

一、绑定事件的两种方式

# 就是给HTML元素添加自定义的功能

绑定事件的方式1

 

绑定事件的方式1
    <button onclick="func()">点我</button>
    <script>
        function func() {
            alert(123)
        }
    </script>

绑定事件的方式2

 

<button id="d1">选我</button>
    <script>
        // 1.先查找标签
        var btnEle = document.getElementById('d1')
        // 2.绑定事件
        btnEle.onclick = function () {
            alert(456)
        }
    </script>

 

内置参数

this指代的就是当前被操作对象本身

在事件的函数体代码内部使用

btnEle.onclick = function () {
            alert(456)
            console.log(this)
        }

 

 

事件练习 

onclick    单击事件

onfocus  聚焦事件

onblur    失去焦点事件

onchange   文本域变化事件

onload   等待 ...加载完毕后执行事件

点击按钮的同时出现当前的时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" id="d2">
    <button id="d1">出来！</button>
    <button id="d3">站住！</button>

    <script>
        // 1.先查找按钮标签
        var btnEle = document.getElementById('d1')
        var btn1Ele = document.getElementById('d3')
        // 定义一个存储定时器的全局变量
        var t = null
        // 3.单独编写一个展示时间的函数
        function showTime(){
            // 3.获取当前时间
            var cTime = new Date().toLocaleString()
            // 4.将时间添加到input文本框中
            var iEle = document.getElementById('d2')
            iEle.value = cTime
        }
        // 2.绑定点击事件
        btnEle.onclick = function () {
            if(!t){
                t = setInterval(showTime,1000)
            }
        }
        // 3.绑定点击事件
        btn1Ele.onclick = function () {
            clearInterval(t)
            // 把t清空
            t = null
        }
    </script>
</body>
</html>

　　

搜索框案例

用户的数据校验          

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
  <p>username:
      <input type="text" id="d1">
<span id =”username“ style="color: red"></span>
  </p>
    <p>password:
        <input type="text" id="d2">
         <span id="pwd" style="color: red"></span>
    </p>
    <button id="d3">登录</button>
</div>
<script>
    //1.查找标签按钮
    var btnEle = document.getElementById('d3')
    //2'绑定事件
    btnEle.onclick=function () {
        //3.获取input数据
        var usernameEle = document.getElementById('d1').value
        var passwordEle = document.getElementById('d2').value
        // console.log(usernameEle,passwordEle )
        //判断数据是否合法
        if(!usernameEle){
            var sp1Ele  = document.getElementById('username')
            sp1Ele.innerText= '用户名不能为空'
        }
        if(!passwordEle){
            var sp2Ele  = document.getElementById('pwd')
            sp2Ele.innerText= '密码不能为空'
        }
    }
</script>
</body>
</html>

  select 省市联动案例

   select框联动指的是一个框变了另外的一个框跟着变了，即同步变化，同步更新

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
        }
    </script>
</head>
<body>
<p>省:
    <select name="" id="d1">

    </select>
</p>
<p>区:
    <select name="" id="d2">

    </select>
</p>

<script>
    var data = {"河北": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"], "安徽":["合肥","芜湖"]};
    var se1Ele = document.getElementById('d1')
    var se2Ele = document.getElementById('d2')
    for (let pro in data){
        var opEle = document.createElement('option')
        opEle.innerText = pro
        opEle.value = pro
        se1Ele.appendChild(opEle)
    }
    se1Ele.onchange = function () {
        var cutpro = this.value
        cityList = data[cutpro]
        se2Ele.innerHTML = ''
        for (let i=0;i<cityList.length;i++){
            var opEle = document.createElement('option')
            opEle.innerText = cityList[i]
            opEle.value = cityList[i]
            se2Ele.appendChild(opEle)
        }
    }









</script>
</body>
</html>

 

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   

 

posted @ 2022-02-14 22:36  红绿灯的黄呀  阅读(54)  评论(0)    收藏  举报