前端與移動開發----webAPI----文字框事件，滑鼠事件，標籤屬性操作方式

東三城發表於2020-11-24
前端移動開發WebAPI事件

JavaScript-DOM操作

文字框事件

  • onfocus 獲取焦點
dom.onfocus  ---> 獲取焦點時候觸發事件
  • onblur 失去焦點
dom.onblur    ---> 失去焦點觸發事件

滑鼠事件

  • onmouseenter 滑鼠進入事件【沒有事件冒泡】
dom.onmouseenter = function() {}
  • onmouseleave 滑鼠離開事件
dom.onmouseleave = function() {}
備註：
onmouseenter 和 onmouseleave 是對應的一組
  • onmouseover 滑鼠放到標籤之上【會有事件冒泡，少用】
dom.onmouseover = function() {}
  • onmouseout 滑鼠離開
dom.onmouseout = function() {}
  • 多個標籤註冊事件，獲取索引方式
實現的功能：
   使用者點選（滑鼠懸停）到標籤上，獲取該標籤對應的索引方式：
     1.通過給標籤（物件）動態新增一個表示索引的屬性，並賦值
     2.通過程式碼獲取該索引值即可

案例

  • 隔行變色滑鼠移動高亮顯示案例

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            line-height: 50px;
        }

        li:nth-child(even) {
            background-color: green;
        }

        li:nth-child(odd) {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <ul>
        <li>哈哈</li>
        <li>嘿嘿</li>
        <li>嘻嘻</li>
        <li>嗯嗯</li>
    </ul>
    <script>
        var lis = document.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            lis[i].onmouseenter = function () {
                for (var j = 0; j < lis.length; j++) {
                    lis[j].style.background = '';
                }
                this.style.background = 'red';
            }
        }
    </script>
</body>
</html>

    ​

  • tab欄切換案例

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			list-style: none;
			text-decoration: none;
			font-size: 20px;
			font-weight: 700;
			color: #999;
		}

		.nav {
			width: 100%;
			height: 55px;
			line-height: 55px;
			background-color: #ccc;
		}

		.nav .w {
			 width: 980px;
			 margin: 0 auto;
		}

		.nav li {
			float: left;
		}

		.nav li a {
			display: block;
			height: 55px;
			padding: 0 30px;
		}

		.active {
			background-color: orange;
			color: #fff;
		}
	</style>
</head>
<body>
    <div class="nav">
        <div class="w">
            <ul>
                <li><a href="javascript:;">首頁</a></li>
                <li><a href="javascript:;">前端培訓</a></li>
                <li><a href="javascript:;">PHP培訓</a></li>
                <li><a href="javascript:;">Java培訓</a></li>
                <li><a href="javascript:;">聯絡我們</a></li>
            </ul>
        </div>
    </div>

    <script>
        
        // 獲取a標籤
        var aBtns = document.querySelectorAll('.nav a');

        // 遍歷所有a標籤註冊滑鼠進入事件
        for(var i = 0; i < aBtns.length; i++) {
              aBtns[i].onmouseenter = function() {
                  this.classList.add('active');
              }
              //滑鼠離開移除原來的樣式
              aBtns[i].onmouseleave = function() {
                 this.classList.remove('active'); 
              }
        }



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

標籤屬性操作方式

  • 系統屬性
☞ 獲取屬性的值：
   dom.getAttribute(屬性名)；
   備註：
   	   1.通過getAttribute可以獲取標籤屬性對應的值
       2.如果標籤沒有對應的屬性，那麼getAttribute返回null
☞ 設定
  dom.setAttribute(屬性名,值);
    備註：
        1.通過setAttribute可以給標籤新增新的屬性
        2.如果該標籤已經存在某個屬性，是對該屬性值得修改
☞ 刪除
  dom.removeAttribute(屬性名)；
  	 備註：
     	1.通過removeAttribute可以將屬性移除
  • 自定義屬性（ 通過H5中提供的方式設定自定義屬性）
概念：以data-* 開始的屬性，為自定義屬性
作用：儲存資料(處理業務中的資料)
注意：H5提供的這種方式就是用來操作自定義屬性的,不能操作內建屬性
☞ 獲取
	dom物件.dataset   --->  返回自定義屬性的物件【該屬性只能獲取自定義屬性】    
	dom物件.dataset.屬性名稱  
	dom物件.dataset["屬性名稱"]
☞ 設定
	 Dom.dataset.自定義屬性名稱=值;
備註：
	getAttribute()也可以用來獲取自定義屬性

案例

  • 利用自定義屬性實現tab欄切換效果

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            border: 1px solid #ccc;
            margin: 50px auto;
        }

        .title {
            width: 100%;
            height: 60px;
            line-height: 60px;
        }

        .title a {
            display: block;
            height: 100%;
            width: 100px;
            text-align: center;
            text-decoration: none;
            float: left;
            background-color: yellowgreen;
            color: black;
        }

        .content {
            width: 100%;
            height: 300px;
        }

        .public {
            width: 100%;
            height: 100%;
        }

        a.active {
            background-color: orange;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="title">
            <a href="javascript:;" class="active" data-myID="one">百度</a>
            <a href="javascript:;" data-myID="two">淘寶</a>
            <a href="javascript:;" data-myID="three">京東</a>
        </div>
        <div class="content">
            <div class="public item1" id="one" style="display: block;">百度對應的內容</div>
            <div class="public item2" id="two" style="display: none;">淘寶對應的內容</div>
            <div class="public item3" id="three" style="display: none;">京東對應的內容</div>
        </div>
    </div>
    <script>
        var aBtns = document.querySelectorAll('a');
        var items = document.querySelectorAll('.public');
        //先完成tab欄切換
        for (var i = 0; i < aBtns.length; i++) {
            //點選每一個a標籤
            aBtns[i].onclick = function () {
                //排他思想去掉其他樣式
                for (var j = 0; j < aBtns.length; j++) {
                    aBtns[j].classList.remove('active');
                }
                //給當前a標籤設定樣式
                this.classList.add('active');

                //2. 點選當前標籤的時候,獲取標籤身上的自定義屬性值(其實就是內容區域對應的id值)
                var id = this.dataset.myid;
                // console.log(id);

                //利用排他思想,將其他盒子先隱藏
                for (var k = 0; k < items.length; k++) {
                    items[k].style.display = 'none';
                }
                // 3. 通過id獲取對應的內容盒子
                var box = document.getElementById(id);
                // 4. 將盒子顯示
                box.style.display = 'block';
            }
        }
    </script>
</body>
</html>

如有不足，請多指教，
未完待續，持續更新！
大家一起進步！

相關文章