前端基础之原生js事件绑定案例

原生js事件绑定

  • 开关灯案例
<script>
<div id="d1" class="c1 bg_green bg_red"></div>
<button id="d2">变色</button>
<script>
    let btnEle = document.getElementById('d2')
    let divEle = document.getElementById('d1')
    btnEle.onclick = function () {  // 绑定点击事件
        // 动态的修改div标签的类属性
        divEle.classList.toggle('bg_red')
    }
</script>
  • input框获取焦点失去焦点案例
<input type="text" value="老板，几位？" id="d1">
<script>
    let iEle = document.getElementById('d1')
    // 获取焦点事件
    iEle.onfocus = function () {
        // 将input框内部值去除
        iEle.value = ''
        // 点value就是获取，等号赋值就是设置值
    }
    // 失去焦点事件
    iEle.onblur = function () {
        // 给input标签重写赋值
        iEle.value = '没钱送客'
    }
</script>
  • 实时展示当前时间
<input type="text" id="d1" style="display: block; height: 50px;width: 200px">
<button id="d2">开始</button>
<button id="d3">结束</button>

<script>
    let t = null
    let inputEle = document.getElementById('d1')
    let startBtnEle = document.getElementById('d2')
    let endBtnEle = document.getElementById('d3')
    // 1.访问页面之后，将访问的时间展示到input框中
    // 2.动态展示当前时间
    // 3.页面上加两个按钮，一个开始一个结束
    function showTime(){
        let currentTime = new Date();
        inputEle.value = currentTime.toLocaleString()
    }
    startBtnEle.onclick = function () {
        // 限制定时器只能开一个
        if (!t) {
              t = setInterval(showTime,1000)  // 每点击一次开始就会开设一个定时器，而t只指代最后一个
        }
    }
    endBtnEle.onclick = function () {
        clearInterval(t)
        // 还应该将t重置为空
        t = null
    }
</script>
  • 省市联动
<body>
<select name="" id="d1">
    <option value="" selected disabled>--请选择--</option>
</select>

<select name="" id="d2"></select>
<script>
    let proEle = document.getElementById('d1')
    let cityEle = document.getElementById('d2')
    // 先模拟省市数据
    data = {
        "安徽省":['合肥','芜湖','马鞍山'],
        "江苏省":['南京','徐州','苏州'],
        "浙江省":['杭州','义乌','宁波'],
        "北京市":['朝阳区','海淀区','昌平区'],
        "上海市":['黄浦区','青浦区','杨浦区']
    };
    // for循环获取省
    for (let key in data){
        // 将省的信息做成一个个option标签，添加到第一个select框中
        // 1.创建option标签
        let opEle = document.createElement('option')
        // 2.设置文本
        opEle.innerText = key
        // 3.设置value
        opEle.value = key  // <option value="省">省</option>
        // 4.将创建好的option标签添加到第一个select中
        proEle.appendChild(opEle)
    }
    // 文本域变化事件  change事件
    proEle.onchange = function () {
        // 先获取到用户选择的省
        let currentPro = proEle.value
        // 获取对应的市信息
        let currentCityList = data[currentPro]
        // 清空市select中所有的option
        cityEle.innerHTML = ''
        // 自己再加一个请选择
        let s = "<option disabled selected>--请选择--</option>"
        cityEle.innerHTML = s
        // for循环所有的市，渲染到第二个select中
        for (let i=0;i<currentCityList.length;i++){
            let currentCity = currentCityList[i]
            // 1.创建option标签
            let opEle = document.createElement('option')
            // 2.设置文本
            opEle.innerText = currentCity
            // 3.设置value
            opEle.value = currentCity
            // 4.将创建好的option标签添加到第一个select中
            cityEle.appendChild(opEle)
        }
    }
</script>
</body>
posted @ 2024-03-21 22:20  Xiao0101  阅读(40)  评论(0)    收藏  举报