第五章 事件處理及互動式網頁介面
onkeyup
onkeydown
缺點是有時間差 , 而且持續按住按鍵的話 , 無法偵測 . 

                                var obj_keyup = document.getElementById('txt_onkeyup');
                                obj_keyup.onkeyup = function (e) {
                                    document.getElementById('msg_onkeyup').innerHTML = e.keyCode + ' , 值為' + this.value;
                                }
oninput 
                            var obj_input = document.getElementById('txt_oninput');
                            //但是這個 e 無法作用????
                            obj_input.oninput = function (e) {
                                document.getElementById('msg_oninput').innerHTML = e.keyCode + ' , 值為' + this.value;
                            }
onmousewheel 在下面區塊上滾動 , 就能數字增加減少 
                                var div_wheel = document.getElementById('div_mousewheel');
                                div_mousewheel.onmousewheel = function (e) {
                                    document.getElementById('div_mousewheel_show').innerHTML = parseInt(document.getElementById('div_mousewheel_show').innerHTML, 10) + 1;
                                }

-
9999
-
剪貼薄

copy / oncopy
cut / oncut
paste / onpaste
 
                            //表示複製時會貼到下方的區塊
                            window.onload = function () {
                                document.body.onpaste = function (e) {
                                    document.getElementById('onpast_msg').innerHTML = e.clipboardData.getData("Text");
                                };

                                document.getElementById('cutsec').oncopy = function (e) {
                                    alert('複製不被允許!');
                                    e.preventDefault();
                                    return false;
                                };

                                document.getElementById('cutsec').oncut = function (e) {
                                    alert('剪下也不允許!');
                                    e.preventDefault();
                                    return false;
                                };
                            };

部分針對文字方塊

拖曳與置放
drag and drop
dragstart 開始拖曳被觸發
drag 拖曳操作的過程中被觸發
dragenter 拖曳進入目標元素時被觸發
dragleave 拖曳離開目標元素時被觸發
dragover 拖曳經過目標元素被觸發
drop 拖曳並目標放至目標元素時被觸發
dragend 結束拖曳操作時被觸發 
                                        var internalDNDType = 'text';
                                        function kt_dragstart(event) {
                                            event.dataTransfer.clearData();
                                            event.dataTransfer.setData(internalDNDType, event.currentTarget.id);
                                        }
                                        function kt_dragover(event) {
                                            event.preventDefault();
                                        }

                                        function kt_drop(event) {
                                            var did = event.dataTransfer.getData(internalDNDType);
                                            var d = document.getElementById(did);
                                            event.currentTarget.appendChild(d);
                                        }
可以將下方藍色方塊拖曳到更下放灰色的區塊

 
拖曳外部檔案物件 請看13章
History API

使用者操作網頁過程中, 瀏覽歷程的程式化控制

                            window.history.forward();
                            window.history.back();

                            window.history.go(i);   // 0 是目前頁面 , 1是下一頁, -1是上一頁
ajax方式的影響使之沒有上下一頁的行為 , 可以透過 pushState(state, title, url) 將瀏灠記錄加入至儲存體中(但是不會改變網頁內容)。
pushState() 方法僅是改變瀏灠記錄 , 並不會相對應地依瀏灠記錄的網址改變內容
  • state: javaScript物件, 用以關聯到此方法新建立的瀏覽歷程記錄。
  • title: 保留擴充用 , 可以空字串或一個特定字串
  • url:新瀏灠歷程記錄URL
                            pushState(state, title, url);
popstate / onpopstate
相同的網址不會重覆儲存 , 只會變更順序
由於它幾乎是應用在 ajax 上 , 所以只有儲存歷史記錄的動作 , 然後做ajax載入資料