关于javascript:day12-事件监听事件委托拖拽JSON对象

<button onclick="fun()"> 点击 </button>
var fun = function(){}

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

元素.addEventListener(‘去掉 on 的事件’, 回调函数,[是否捕捉]);

可选参数是否捕捉，默认是 false 冒泡
addEventListener() 支流高版本浏览器

当冒泡与捕捉同时存在时: 先捕捉后冒泡

    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）能够为一个元素，屡次绑定雷同的事件(相似于代码的合并)

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

(2) 程序员能够应用事件监听的形式确定触发的过程是冒泡还是捕捉

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

IE 的事件监听：元素.attachEvent(“ 带 on 的事件 ”, 回调函数）

没有第三个参数
参数不省略 on
默认冒泡

设计兼容函数(思考函数的性能，参数，返回值)

<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>

委托：让他人去做

事件委托：某个事件让其余元素来实现

例如：页面上有 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>

<!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;
            // 判断规范
            var left = e.pageX - offsetX;
            var top = e.pageY - offsetY;
            console.log(left);
            
            if(left<0){left=0;}
            // window.innerWidth 浏览器的可视宽度
            var leftMax = window.innerWidth-oBox.offsetWidth;
            console.log('leftMax' + leftMax);
            if(left>leftMax){left = leftMax;}
            
            if(top<0){top=0;}
            // 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>

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);

关于javascript:day12-事件监听事件委托拖拽JSON对象

5. 事件绑定的三种形式

(1) 通过 HTML 元素进行绑定

(2) 通过 JS 获取 HTML 元素进行绑定

(3) 通过事件监听

语法：

事件监听的益处：

事件监听兼容:

6. 事件委托

事件委托的益处

7. 拖拽

8. JSON 对象