Event事件（2）
1.事件委託：
把一個事件讓別的元素去做（當爲某些元素添加相同的事件時，可以爲這些元素的父元素添加該事件）。
優點：
①提高程序的執行效率
②動態創建的元素添加事件可以在動態創建的函數外面添加事件。
③冒泡或者捕獲都可以產生事件委託。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="創建li" id="btn" />
<ul>
<li>孩子多個1</li>
<li>孩子多個2</li>
<li>孩子多個3</li>
<li>孩子多個4</li>
<li>孩子多個5</li>
<li>孩子多個6</li>
<li>孩子多個7</li>
<li>孩子多個8</li>
<li>孩子多個9</li>
<li>孩子多個10</li>
</ul>
</body>
</html>
<script>
oUl.addEventListener("click",function(e){
var e = e || event;
//this指向 ul
//使用委託的關鍵：重新獲取事件源
var target = e.target || e.srcElement;
if( target.tagName.toLowerCase() == "li" ){
alert( target.innerHTML );
}
})
</script>
2.瀏覽器的一些默認行爲
①：右鍵單擊出現的菜單
②：超鏈接的默認跳轉和刷新頁面
③：form表單中的submit按鈕，會刷新瀏覽器
④：瀏覽器的圖片和被選中的文字，默認會被拖拽
3.取消瀏覽器默認行爲
e.preventDefault();
e.returnValue = false;//兼容IE
兼容寫法：
e.preventDefault ？ e.preventDefault（） ： e.returnValue= false;
或者在函數的最後寫return false；（return後什麼都不執行了）
3.Json對象：
Json(javascript object notation)全稱是javascript對象表示法，它是一種數據交換的文本格式，而不是一種編程語言，用於讀取結構化數據。
作用：存儲數據
Json簡單的數據的存取：
①：簡單值使用與JavaScript相同的語法，可以在JSON中表示字符串、數值、布爾值和null，字符串必須使用雙引號表示，不能使用單引號。數值必須以十進制表示，且不能使用NaN和Infinity。
②：對象作爲一種複雜數據類型，表示的是一組有序的鍵值對兒。而每個鍵值對兒中的值可以是簡單值，也可以是複雜數據類型的值。
與javascript的對象字面量相比，json有三個不同的地方
1、JSON沒有變量的概念
2、JSON中，對象的鍵名必須放在雙引號裏面
3、因爲JSON不是javascript語句，所以沒有末尾的分號
拖拽案例（百度登陸時候的掃描二維碼界面可以拖動）：
思路：
1.需要通過三個事件完成 onmousedown 、onmousemove、onmouseup。
2.鼠標按下時需要記錄按下時相對於操作後的元素的內部偏移量offsetX||offsetY
3.鼠標移動時設置物體的left和top值。left = pageX - offsetX；top = pageY - offsetY;
4.鼠標按鍵擡起時取消移動。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style type="text/css">
#box{
height: 200px;width: 200px;background: skyblue;border-radius: 50%;
cursor: move;
position: absolute;
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
</html>
<script type="text/javascript">
box.onmousedown = function (e) {
var e = e||event;
var disx = e.offsetX || layerX;
var disy = e.offsetY || layerY;
document.onmousemove = function (e) {
var e = e || event;
var x = e.pageX - disx;
var y = e.pageY - disy;
var maxX = window.innerWidth - 200;
var maxY = window.innerHeight - 200;
if (x < 0) {
x = 0;
}else if (x>maxX) {
x = maxX;
}
if (y < 0) {
y = 0;
}else if (y>maxY) {
y = maxY;
}
box.style.left = x+'px';
box.style.top = y+'px';
}
document.onmouseup = function(){
document.onmousemove = '';
}
}
</script>