Event事件（2）及Json物件
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>