day12 事件監聽/事件委託/拖拽/JSON對象

時間 2021-01-14

標籤 javascript css html java 程序員 json 瀏覽器 app 函數工具欄目 JavaScript 简体版

原文原文鏈接

5. 事件綁定的三種方式

(1) 經過HTML元素進行綁定

<button onclick="fun()">點擊</button>
var fun = function(){

}

(2) 經過JS獲取HTML元素進行綁定

var oBtn = document.querySelector('button');
oBtn.onclick = function(){
    
}

(3) 經過事件監聽

語法：

元素.addEventListener(‘去掉on的事件’,回調函數,[是否捕獲]);javascript

可選參數是否捕獲，默認是false 冒泡
addEventListener() 主流高版本瀏覽器

當冒泡與捕獲同時存在時:先捕獲後冒泡css

document.addEventListener('click',function(){
        alert('document冒泡');
    })     
    
    window.addEventListener('click', function(){
        alert('window冒泡');
    })
    document.addEventListener('click',function(){
        alert('document捕獲');
    },true)     
    
    window.addEventListener('click', function(){
        alert('window捕獲');
    },true)
//結果：window捕獲-》document捕獲=》document冒泡=》window冒泡

事件監聽的好處：

（1）能夠爲一個元素，屢次綁定相同的事件(相似於代碼的合併)html

document.addEventListener("click",function(){
        alert(1);
    });
    
    document.addEventListener("click",function(){
        alert(2);
    });
//結果: 1->2

(2) 程序員可使用事件監聽的方式肯定觸發的過程是冒泡仍是捕獲java

document.addEventListener("click",function(){
        alert("document");
    },true);
    
    window.addEventListener("click",function(){
        alert("window");
    },true);
//結果: window->document

事件監聽兼容:

IE的事件監聽：元素.attachEvent("帶on的事件",回調函數）程序員

沒有第三個參數
參數不省略on
默認冒泡

設計兼容函數(考慮函數的功能，參數，返回值)json

<script>    
    function addEvent(obj,type,callBack){
        if(obj.attachEvent){
             obj.attachEvent("on"+type,callBack);
        }else{
            obj.addEventListener(type,callBack);
        }
    }
    
    addEvent(document,"click",function(){
        alert("1");
    });
</script>

6. 事件委託

委託：讓別人去作瀏覽器

事件委託：某個事件讓其餘元素來完成app

例如：頁面上有1000個li，爲每個li添加單擊事件。函數

解決辦法：使用委託只須要在li父級上加一次事件就能夠。工具

<script>    
    // 經過事件委託實現高亮
    var oUl = document.querySelector('ul');
    oUl.onclick = function(evt){
        //委託中真實的元素不是this對象
        // this.style.backgroundColor = 'pink';//錯誤
        // 如何得到真正的操做元素
        var e = evt||event;
        var target = e.srcElement||e.target;
        // console.log(target.tagName);//'LI'
        if(target.tagName=='LI'){
            target.style.backgroundColor='pink';
        }
    }
</script>

//委託的實現方法：
父級元素.事件 = function(){
    //獲取事件源  當前的操做元素
    var target = e.srcElement||e.target;
    console.log(target.tagName);//'LI'
}

事件委託的好處

1) 經過父元素實現子元素的事件響應，從而大大提升效率

2) 能夠爲新添加的元素，提早綁定事件

<script>    
    var oUl = document.querySelector('ul');
    oUl.onmousemove = function(evt){
        var e = evt|| event;
        var target = e.srcElement||e.target;
        if(target.tagName == 'LI'){
            target.style.backgroundColor='pink';
        }
    }
    oUl.onmouseout = function(evt){
        var e = evt|| event;
        var target = e.srcElement||e.target;
        if(target.tagName == 'LI'){
            target.style.backgroundColor='';
        }
    }
    
    var oInput = document.querySelector('input');
    var oBtn = document.querySelector('button');
    oBtn.onclick = function(){
        // 添加li元素
        var oLi = document.createElement('li');
        oLi.innerHTML = oInput.value;
        oUl.appendChild(oLi);
        oInput.value='';
    }
</script>

7. 拖拽(考點)

拖拽思路： onmousedown onmousemove onmouseup

(1).首先爲須要拖拽的對象添加一個onmousedown事件

記錄：鼠標點擊某個對象時的內部偏移量

e.offsetX e.offsetY

(2).鼠標在文檔上移動

要想讓操做的元素動起來，該元素必須有定位

移動的過程，實際上改變，元素的left和top

(3).中止移動，須要觸發onmouseup鼠標擡起時，取消移動

document.onmousemove = null;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #box{
                width: 100px;
                height: 100px;
                background-color: pink;
                position: absolute;
                left: 400px;
                top: 400px;
                cursor: move;
            }
        </style>
    </head>
    <body>
        <div id="box">
            
        </div>
    </body>
</html>
<script type="text/javascript">
    // 某個鼠標按鍵被按下 onmousedown
    //某個鼠標按鍵被鬆開 onmouseup
    
    var oBox = document.querySelector('#box');
    oBox.onmousedown = function(evt){
        var e= evt||event;
        var offsetX = e.offsetX;
        var offsetY = e.offsetY;
        console.log('offset:' + offsetX,offsetY);
        document.onmousemove = function(evt){
            var e = evt|| event;
            oBox.style.left= e.pageX - offsetX + 'px';
            oBox.style.top = e.pageY - offsetY + 'px';
            console.log('page:' + e.pageX,e.pageY);
        }
    }
    document.onmouseup = function(){
        document.onmousemove = null;
    }
    
</script>

拖拽的邊界問題？？：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #box{
                width: 100px;
                height: 100px;
                background-color: pink;
                position: absolute;
                left: 400px;
                top: 400px;
                cursor: move;
            }
        </style>
    </head>
    <body>
        <div id="box">
            
        </div>
    </body>
</html>
<script type="text/javascript">
    // 某個鼠標按鍵被按下 onmousedown
    //某個鼠標按鍵被鬆開 onmouseup
    
    var oBox = document.querySelector('#box');
    oBox.onmousedown = function(evt){
        var e= evt||event;
        var offsetX = e.offsetX;
        var offsetY = e.offsetY;
        document.onmousemove = function(evt){
            var e = evt|| event;
            // 判斷標準
            //e.pageX是鼠標的位置，因此鼠標位置再向左移動offsetX的距離，
            //來判斷oBox左邊是否到達邊界
            var left = e.pageX - offsetX;
            var top = e.pageY - offsetY;
            //console.log(left);
            //(1) 左邊界
            if(left<0){
                left=0;
            }
            //(3) 最大的寬
            // window.innerWidth瀏覽器的可視寬度
            var leftMax = window.innerWidth-oBox.offsetWidth;
            console.log('leftMax' + leftMax);
            if(left>leftMax){
                left = leftMax;
            }
            //(2)上邊界
            if(top<0){
                top=0;
            }
            //(4)最大的高
            // window.innerHeight瀏覽器的可視高度
            var topMax = window.innerHeight-oBox.offsetHeight;
            if(top>topMax){
                top = topMax;
            }
            
            oBox.style.left= left + 'px';
            oBox.style.top = top + 'px';
        }
    }
    document.onmouseup = function(){
        document.onmousemove = null;
    }    
</script>

8. JSON對象

json: 輕量級存儲工具，是一種跨平臺的數據交互格式
做用：存儲數據

json對象定義:

var obj = {"key1":value1,..."keyN":valueN};

說明:嚴格的json對象鍵必須用雙引號引發來； json的值能夠是任意類型的

json 操做賦值和取值
- 取值：json.鍵
- 遍歷取值 for in

JSON對象->JSON字符串 :必須是嚴格模式的字符串和對象

JSON.stringify(json對象)

var json = {"name":"老王","age":"18"};
var str = JSON.stringify(json);
console.log(str,typeof str);//string

JSON字符串-> JSON對象

JSON.parse(json字符串)

var str1 = '{"name":"老王","age":"18"}';
var json1 = JSON.parse(str1);
console.log(json1,typeof json1);

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。