前端基礎之原生js事件繫結案例

Xiao0101發表於2024-03-21
前端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>

相關文章