Day16

1-什么是事件委托，原理是什么？

2-js 中有幾種定時(shí)器，有什么區(qū)別？

3-如何清除定時(shí)器？

4-封裝一個(gè)動畫函數(shù)

1-什么是事件委托，原理是什么？

JS事件代理就是通過給父級元素（例如：ul,tr等等）綁定事件，不給子級元素（例如:li,td等等）綁定事件，然后當(dāng)點(diǎn)擊子級元素時(shí)，

　　通過事件冒泡機(jī)制在其綁定的父元素上觸發(fā)事件處理函數(shù)，主要目的是為了提升性能，因?yàn)槲也挥媒o每個(gè)子級元素綁定事件，只給父級元素綁定一次就好了，在原生js里面就是通過event對象的taget屬性實(shí)現(xiàn)。

var ul=document.querySelector("ul");
ul.onclick=function(e){
//e這里指event對象
var target=e.target=e.target||e.srcElement;//target 獲取觸發(fā)事件的目標(biāo)（li）
if（target.nodeName.toLowerCase()==' li '）{
//目標(biāo)（li）節(jié)點(diǎn)名轉(zhuǎn)小寫字母，不轉(zhuǎn)換的話是大寫字母
alert（target.innerHTML）
　　}
}

jq方式實(shí)現(xiàn)相對而言簡單


$('ul').on('click','li',function(){
//事件邏輯
})

其中第二個(gè)參數(shù)指的是觸發(fā)事件的具體目標(biāo)，特別是給動態(tài)添加的元素添加事件。

2-js 中有幾種定時(shí)器，有什么區(qū)別？

setTimeout只在指定時(shí)間后執(zhí)行一次，代碼如下：
<script>
//定時(shí)器 異步運(yùn)行
function hello(){
alert("hello");
}
//使用方法名字執(zhí)行方法
var t1 = window.setTimeout(hello,1000);
var t2 = window.setTimeout("hello()",3000);//使用字符串執(zhí)行方法
window.clearTimeout(t1);//去掉定時(shí)器
</script> 


setInterval以指定時(shí)間為周期循環(huán)執(zhí)行，代碼如下：
 

//實(shí)時(shí)刷新時(shí)間單位為毫秒
setInterval('refreshQuery()',8000); 
/* 刷新查詢 */
function refreshQuery(){
   $("#mainTable").datagrid('reload',null);
}

詳細(xì)介紹

3-如何清除定時(shí)器？

如上題

//清除Timeout的定時(shí)器,

傳入id(創(chuàng)建定時(shí)器時(shí)會返回一個(gè)id) clearTimeout(i);

//清除Interval的定時(shí)器,

傳入id(創(chuàng)建定時(shí)器時(shí)會返回一個(gè)id) clearInterval(j);

例子

//　window.setInterval(code,millisec);



var i = 0;
    //設(shè)置定時(shí)器（循環(huán)去執(zhí)行）
    var timeId = setInterval(function () {
      i++;
      console.log('定時(shí)運(yùn)行：' + i + '次')
    }, 500)

    //清理定時(shí)器
    my$('btn').onclick = function () {
      window.clearInterval(timeId)
    }



//window.setTimeout(code,millisec);

var i = 0;
    //設(shè)置定時(shí)器（一次性定時(shí)器）
    var timeId = setTimeout(function () {
      i++;
      console.log('定時(shí)運(yùn)行：' + i + '次')
    }, 500)
    //清理定時(shí)器（這個(gè)定時(shí)器雖然只有一次，但是也得清理 既可以釋放內(nèi)存，也可以便于后邊代碼的判斷。）
    my$('btn').onclick = function () {
      window.clearTimeout(timeId)
    }

4-封裝一個(gè)動畫函數(shù)

<!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>JS動畫demo與函數(shù)封裝</title>
    <style>
        .parent{
            width: 300px;height: 300px;
            background: gray;
            position: relative;
        }
        .son{
            position: absolute;
            width: 50px;
            height: 50px;
            background: rgb(100, 100,180);
        }
    </style>
</head>
<body>
    <div class = "parent">
        <div class="son">
        </div>
    </div>

    <script>
        window.onload = function(){
            var parent = document.getElementsByClassName("parent")[0];
            var son = document.getElementsByClassName("son")[0];

            parent.addEventListener("mouseover",function(){
                animate(son, { "left": 100 }, function () { });
            },false);
            parent.onmouseleave = function () {
                animate(son, { "left":0 }, function () { });
            }
        }
    </script>
    <script>
        // 獲取當(dāng)前制定樣式的屬性值
        function getStyle(ele,attr){
            if(window.getComputedStyle){       //兼容性檢測，優(yōu)先采用W3C標(biāo)準(zhǔn)
                return window.getComputedStyle(ele,null)[attr];
            }else{
                return ele.currentStyle[attr]; //兼容Ie低版本瀏覽器
            }
        }     
        /*
        * 緩動動畫函數(shù)
        * 原理：盒子原本的樣式值 + "步長"（不斷變化的值）；達(dá)到目標(biāo)值后停止緩動。
        * ele：指定的節(jié)點(diǎn)對象
        * attr_json：樣式屬性和值的集合（json對象格式，如{"width":200,"left":10}）
        * callback:回調(diào)函數(shù)，動畫執(zhí)行完后執(zhí)行的函數(shù)
        * 注意：如果控制 盒子的透明度 在本函數(shù)json屬性集合中需要使用opacity,控制層級需要使用zIndex
        * */
        function animate(ele,attr_json,callback){
            // 清除定時(shí)器，避免動畫重合
            clearInterval(ele.timer);

            ele.timer = setInterval(function(){
                var flag = true;    //定時(shí)器是否清除的標(biāo)記值

                for(var attr in attr_json){
                    var current = 0;
                    //獲取當(dāng)前樣式
                    if(attr == "opacity"){          //如果是透明度，那么返回值，如果不兼容就返回0
                        current = Math.round(parseInt(getStyle(ele,attr)*100))||0;
                    }else{                          //其他
                        current = parseInt(getStyle(ele,attr));
                    }

                    //計(jì)算步長,并進(jìn)行取整來避免除不盡引起的誤差
                    var stepLength = (attr_json[attr] - current)/10;
                    stepLength = stepLength > 0?Math.ceil(stepLength):Math.floor(stepLength);

                    //判斷要改變的樣式是否是透明度
                    if(attr == "opacity"){
                        if("opacity" in ele.style){
                            ele.style.opacity = (current+stepLength)/100;
                        }else{
                            ele.style.filter = "alpha(opacity = " + (current+stepLength)*10+")";
                        }
                    }

                    //判斷要改變的樣式是否是層級
                    else if(attr == "zIndex"){
                        ele.style.zIndex = current+stepLength;
                    }
                    //其他屬性
                    else{
                        ele.style[attr] = (current + stepLength) + "px";
                    }
                    //判斷是否清除定時(shí)器
                    if(current != attr_json[attr]){
                        flag = false;
                    }
                }

                if(flag){
                    clearInterval(ele.timer);
                    if(callback){
                        callback();
                    }
                }
            },10)
        }
    </script>
</body>
</html>

posted @ 2021-02-08 10:51 =小王= 閱讀(36) 評論(0) 收藏舉報(bào)

刷新頁面返回頂部

=小銘=

Day16

公告