2018年1月26日 星期五

HTML 事件属性

Window 事件屬性

針對 window 對象觸發的事件（應用到 <body> 標籤）：
屬性值描述
onafterprintscript文檔打印之後運行的腳本。
onbeforeprintscript文檔打印之前運行的腳本。
onbeforeunloadscript文檔卸載之前運行的腳本。
onerrorscript在錯誤發生時運行的腳本。
onhaschangescript當文檔已改變時運行的腳本。
onloadscript頁面結束加載之後觸發。
onmessagescript在消息被觸發時運行的腳本。
onofflinescript當文檔離線時運行的腳本。
ononlinescript當文檔上線時運行的腳本。
onpagehidescript當窗口隱藏時運行的腳本。
onpageshowscript當窗口成為可見時運行的腳本。
onpopstatescript當窗口歷史記錄改變時運行的腳本。
onredoscript當文檔執行撤銷（redo）時運行的腳本。
onresizescript當瀏覽器窗口被調整大小時觸發。
onstoragescript在 Web Storage 區域更新後運行的腳本。
onundoscript在文檔執行 undo 時運行的腳本。
onunloadscript一旦頁面已下載時觸發（或者瀏覽器窗口已被關閉）。

Form 事件

由 HTML 表單內的動作觸發的事件（應用到幾乎所有 HTML 元素，但最常用在 form 元素中）：
屬性值描述
onblurscript元素失去焦點時運行的腳本。
onchangescript在元素值被改變時運行的腳本。
oncontextmenuscript當上下文菜單被觸發時運行的腳本。
onfocusscript當元素獲得焦點時運行的腳本。
onformchangescript在表單改變時運行的腳本。
onforminputscript當表單獲得用戶輸入時運行的腳本。
oninputscript當元素獲得用戶輸入時運行的腳本。
oninvalidscript當元素無效時運行的腳本。
onresetscript當表單中的重置按鈕被點擊時觸發。HTML5 中不支持。
onselectscript在元素中文本被選中後觸發。
onsubmitscript在提交表單時觸發。

Keyboard 事件

屬性值描述
onkeydownscript在用戶按下按鍵時觸發。
onkeypressscript在用戶敲擊按鈕時觸發。
onkeyupscript當用戶釋放按鍵時觸發。

Mouse 事件

由鼠標或類似用戶動作觸發的事件：
屬性值描述
onclickscript元素上發生鼠標點擊時觸發。
ondblclickscript元素上發生鼠標雙擊時觸發。
ondragscript元素被拖動時運行的腳本。
ondragendscript在拖動操作末端運行的腳本。
ondragenterscript當元素元素已被拖動到有效拖放區域時運行的腳本。
ondragleavescript當元素離開有效拖放目標時運行的腳本。
ondragoverscript當元素在有效拖放目標上正在被拖動時運行的腳本。
ondragstartscript在拖動操作開端運行的腳本。
ondropscript當被拖元素正在被拖放時運行的腳本。
onmousedownscript當元素上按下鼠標按鈕時觸發。
onmousemovescript當鼠標指針移動到元素上時觸發。
onmouseoutscript當鼠標指針移出元素時觸發。
onmouseoverscript當鼠標指針移動到元素上時觸發。
onmouseupscript當在元素上釋放鼠標按鈕時觸發。
onmousewheelscript當鼠標滾輪正在被滾動時運行的腳本。
onscrollscript當元素滾動條被滾動時運行的腳本。

Media 事件

由媒介（比如視頻、圖像和音頻）觸發的事件（適用於所有 HTML 元素，但常見於媒介元素中，比如 <audio>、<embed>、<img>、<object> 以及 <video>）:
屬性值描述
onabortscript在退出時運行的腳本。
oncanplayscript當文件就緒可以開始播放時運行的腳本（緩衝已足夠開始時）。
oncanplaythroughscript當媒介能夠無需因緩衝而停止即可播放至結尾時運行的腳本。
ondurationchangescript當媒介長度改變時運行的腳本。
onemptiedscript當發生故障並且文件突然不可用時運行的腳本（比如連接意外斷開時）。
onendedscript當媒介已到達結尾時運行的腳本（可發送類似「感謝觀看」之類的消息）。
onerrorscript當在文件加載期間發生錯誤時運行的腳本。
onloadeddatascript當媒介數據已加載時運行的腳本。
onloadedmetadatascript當元數據（比如分辨率和時長）被加載時運行的腳本。
onloadstartscript在文件開始加載且未實際加載任何數據前運行的腳本。
onpausescript當媒介被用戶或程序暫停時運行的腳本。
onplayscript當媒介已就緒可以開始播放時運行的腳本。
onplayingscript當媒介已開始播放時運行的腳本。
onprogressscript當瀏覽器正在獲取媒介數據時運行的腳本。
onratechangescript每當回放速率改變時運行的腳本（比如當用戶切換到慢動作或快進模式）。
onreadystatechangescript每當就緒狀態改變時運行的腳本（就緒狀態監測媒介數據的狀態）。
onseekedscript當 seeking 屬性設置為 false（指示定位已結束）時運行的腳本。
onseekingscript當 seeking 屬性設置為 true（指示定位是活動的）時運行的腳本。
onstalledscript在瀏覽器不論何種原因未能取回媒介數據時運行的腳本。
onsuspendscript在媒介數據完全加載之前不論何種原因終止取回媒介數據時運行的腳本。
ontimeupdatescript當播放位置改變時（比如當用戶快進到媒介中一個不同的位置時）運行的腳本。
onvolumechangescript每當音量改變時（包括將音量設置為靜音）時運行的腳本。
onwaitingscript當媒介已停止播放但打算繼續播放時（比如當媒介暫停已緩衝更多數據）運行腳本
於
標籤： ,

拖曳一個小方塊

<body>
    <div id="t_1">
        <div class="box">

        </div>
    </div>
</body>
<script>
        $(document).ready(function () {

            $('div.box').on('mousedown', function (e) {
                let t1 = e.target;
                let x = e.offsetX;
                let y = e.offsetY;

                $('#t_1').on('mousemove', function (e) {
                    let t2 = e.target;
                    let _x = e.offsetX;
                    let _y = e.offsetY;

                    if (e.target.isEqualNode(e.currentTarget)) {
                        // console.log(_x);

                        $(t1).css({
                            left: (_x - x),
                            top: (_y - y)
                        });
                    }
                });
            });

            $('#t_1').on('mouseup', function (e) {
                $('#t_1').off('mousemove');
            });

        });
    </script>
於
標籤：

2018年1月1日 星期一

html_edit

https://kevinroth.com/rte/
http://unverse.net/Whizzywig-web-based-rich-text-editor
於
訂閱： 文章 (Atom)