Event事件之剪貼板和拖動事件

剪貼板事件

1. oncopy

在用戶拷貝元素上的內容時觸發

提示

oncopy 事件在用戶拷貝元素時也會觸發，例如，拷貝 <img>元素。
oncopy 事件通常用於 type=”text” 的<input>元素。
有三種方式可以拷貝元素和內容：
- 按下 CTRL + C
- 在你的瀏覽器的 Edit(編輯) 菜單中選擇 “Copy（複製）”
- 郵件鼠標按鈕，在上下文菜單中選擇 “Copy（複製）” 命令。
支持冒泡。

瀏覽器支持

google	IE	firefox	safari	opera
true	true	true	true	true

注意：在嘗試拷貝一張圖片時（查看更多實例）， oncopy 事件可能無法應用在 Chrome, Firefox 和 Opera 瀏覽器中。

ElementObject.oncopy=function

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zsh</title>
</head>
<body>

    你可以選擇複製我。

</body>
<script>
    document.body.oncopy = function(){
        alert("您複製的內容是：" + window.getSelection())//獲取選中文本
    }
</script>
</html>

2. oncut

在用戶剪切元素的內容時觸發

提示

雖然使用的 HTML 元素都支持 oncut 事件，但實際上並非支持所有元素，例如
元素，除非設置了 contenteditable 爲 “true” (查看下文的更多實例)。
oncut 事件通常應用在 type=”text” 的元素中。
有三種方式可以拷貝元素和內容：
- 按下 CTRL + X
- 從瀏覽器的編輯菜單中選擇 “Cut（剪切）”
- 右擊鼠標按鈕在上下文菜單中選擇 “Cut（剪切）” 命令。
支持冒泡。

瀏覽器支持

google	IE	firefox	safari	opera
true	true	true	true	true

ElementObject.oncut=function

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zsh</title>
</head>
<body>

    你可以選擇剪切我。

</body>
<script>
    document.body.oncut = function(){
        alert("您剪切的內容是：" + window.getSelection())//獲取選中文本
    }
</script>
</html>

3. onpaste

在用戶向元素中粘貼文本時觸發

提示

雖然使用的 HTML 元素都支持 onpaste 事件，但實際上並非支持所有元素，例如
元素，除非設置了 contenteditable 爲 “true” (查看下文的更多實例)。
onpaste 事件通常用於 type=”text” 的元素。
有三種方式可以拷貝元素和內容：
- 按下 CTRL + X
- 從瀏覽器的編輯菜單中選擇 “Paste（粘貼）”
- 右擊鼠標按鈕在上下文菜單中選擇 “Paste（粘貼）” 命令。
支持冒泡。

瀏覽器支持

google	IE	firefox	safari	opera
true	true	true	true	true

ElementObject.onpaste=function

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zsh</title>
</head>
<body>

    您可以粘貼一些文本進來 <input type="text/">

</body>
<script>
    document.body.onpaste = function(){
        alert("你粘貼了文本")
    }
</script>
</html>

拖動事件

1. ondrag

在元素或者選取的文本被拖動時觸發

拖放是 HTML5 中非常常見的功能。更多信息可以查看菜鳥教程的 HTML 教程中的 HTML5 拖放。

提示

爲了讓元素可拖動，需要使用 HTML5 draggable 屬性。
鏈接和圖片默認是可拖動的，不需要 draggable 屬性。
在拖放的過程中會觸發以下事件：
- 在拖動目標上觸發事件 (源元素):
- - ondragstart - 用戶開始拖動元素時觸發
- - ondrag - 元素正在拖動時觸發
- - ondragend - 用戶完成元素拖動後觸發
- 釋放目標時觸發的事件:
- - ondragenter - 當被鼠標拖動的對象進入其容器範圍內時觸發此事件
- - ondragover - 當某被拖動的對象在另一對象容器範圍內拖動時觸發此事件
- - ondragleave - 當被鼠標拖動的對象離開其容器範圍內時觸發此事件
- - ondhttp://www.runoob.com/jsref/event-ondrop.htmlrop - 在一個拖動過程中，釋放鼠標鍵時觸發此事件
在拖動元素時，每隔 350 毫秒會觸發 ondrag 事件。
支持冒泡

瀏覽器支持

google	IE	firefox	safari	opera
4.0	9.0	3.5	6.0	12.0

ElementObject.ondrag=function

以下實例演示了所有的拖放事件

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>zsh</title>
<style>
.droptarget {
    float: left; 
    width: 100px; 
    height: 35px;
    margin: 15px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}
</style>
</head>
<body>

<p>在兩個矩形框中來回拖動 p 元素:</p>
<div class="droptarget">
    <p draggable="true" id="dragtarget">拖動我!</p>
</div>
<div class="droptarget"></div>
<p style="clear:both;"><strong>注意：</strong>Internet Explorer 8 及更早 IE 版本或 Safari 5.1 及更早版本的瀏覽器不支持 drag 事件。</p>
<p id="demo"></p>
<script>
/* 拖動時觸發*/
document.addEventListener("dragstart", function(event) {
    //dataTransfer.setData()方法設置數據類型和拖動的數據
    event.dataTransfer.setData("Text", event.target.id);
    // 拖動 p 元素時輸出一些文本
    document.getElementById("demo").innerHTML = "開始拖動 p 元素.";    
    //修改拖動元素的透明度
    event.target.style.opacity = "0.4";
});
//在拖動p元素的同時,改變輸出文本的顏色
document.addEventListener("drag", function(event) {
    document.getElementById("demo").style.color = "red";
});
// 當拖完p元素輸出一些文本元素和重置透明度
document.addEventListener("dragend", function(event) {
    document.getElementById("demo").innerHTML = "完成 p 元素的拖動";
    event.target.style.opacity = "1";
});
/* 拖動完成後觸發 */
// 當p元素完成拖動進入droptarget,改變div的邊框樣式
document.addEventListener("dragenter", function(event) {
    if ( event.target.className == "droptarget" ) {
        event.target.style.border = "3px dotted red";
    }
});
// 默認情況下,數據/元素不能在其他元素中被拖放。對於drop我們必須防止元素的默認處理
document.addEventListener("dragover", function(event) {
    event.preventDefault();
});
// 當可拖放的p元素離開droptarget，重置div的邊框樣式
document.addEventListener("dragleave", function(event) {
    if ( event.target.className == "droptarget" ) {
        event.target.style.border = "";
    }
});
/*對於drop,防止瀏覽器的默認處理數據(在drop中鏈接是默認打開)
復位輸出文本的顏色和DIV的邊框顏色
利用dataTransfer.getData()方法獲得拖放數據
拖拖的數據元素id(“drag1”)
拖拽元素附加到drop元素*/
document.addEventListener("drop", function(event) {
    event.preventDefault();
    if ( event.target.className == "droptarget" ) {
        document.getElementById("demo").style.color = "";
        event.target.style.border = "";
        var data = event.dataTransfer.getData("Text");
        event.target.appendChild(document.getElementById(data));
    }
});
</script>

</body>
</html>

2. ondragend

在用戶完成元素或首選文本的拖動時觸發

拖放是 HTML5 中非常常見的功能。更多信息可以查看菜鳥教程的 HTML 教程中的 HTML5 拖放。

提示

爲了讓元素可拖動，需要使用 HTML5 draggable 屬性。
鏈接和圖片默認是可拖動的，不需要 draggable 屬性。
在拖放的過程中會觸發以下事件：
- 在拖動目標上觸發事件 (源元素):
- - ondragstart - 用戶開始拖動元素時觸發
- - ondrag - 元素正在拖動時觸發
- - ondragend - 用戶完成元素拖動後觸發
- 釋放目標時觸發的事件:
- - ondragenter - 當被鼠標拖動的對象進入其容器範圍內時觸發此事件
- - ondragover - 當某被拖動的對象在另一對象容器範圍內拖動時觸發此事件
- - ondragleave - 當被鼠標拖動的對象離開其容器範圍內時觸發此事件
- - ondhttp://www.runoob.com/jsref/event-ondrop.htmlrop - 在一個拖動過程中，釋放鼠標鍵時觸發此事件
在拖動元素時，每隔 350 毫秒會觸發 ondrag 事件。
支持冒泡

瀏覽器支持

google	IE	firefox	safari	opera
4.0	9.0	3.5	6.0	12.0

ElementObject.ondragend=function

3. ondragenter

在拖動的元素或選擇的文本進入到有效的放置目標時觸發

ondragenter 和 ondragleave 事件可以幫助用戶更好的理解可拖動元素進入和離開放置區域的過程。你可以在可拖動元素進入和離開放置區域時設置不同的背景顏色。

拖放是 HTML5 中非常常見的功能。更多信息可以查看菜鳥教程的 HTML 教程中的 HTML5 拖放。

提示

爲了讓元素可拖動，需要使用 HTML5 draggable 屬性。
鏈接和圖片默認是可拖動的，不需要 draggable 屬性。
在拖放的過程中會觸發以下事件：
- 在拖動目標上觸發事件 (源元素):
- - ondragstart - 用戶開始拖動元素時觸發
- - ondrag - 元素正在拖動時觸發
- - ondragend - 用戶完成元素拖動後觸發
- 釋放目標時觸發的事件:
- - ondragenter - 當被鼠標拖動的對象進入其容器範圍內時觸發此事件
- - ondragover - 當某被拖動的對象在另一對象容器範圍內拖動時觸發此事件
- - ondragleave - 當被鼠標拖動的對象離開其容器範圍內時觸發此事件
- - ondhttp://www.runoob.com/jsref/event-ondrop.htmlrop - 在一個拖動過程中，釋放鼠標鍵時觸發此事件
在拖動元素時，每隔 350 毫秒會觸發 ondrag 事件。
支持冒泡

瀏覽器支持

google	IE	firefox	safari	opera
4.0	9.0	3.5	6.0	12.0

ElementObject.ondragenter=function

4. ondragleave

在可拖動的元素或選取的文本移出放置目標時執觸發

拖放是 HTML5 中非常常見的功能。更多信息可以查看菜鳥教程的 HTML 教程中的 HTML5 拖放。

提示

爲了讓元素可拖動，需要使用 HTML5 draggable 屬性。
鏈接和圖片默認是可拖動的，不需要 draggable 屬性。
在拖放的過程中會觸發以下事件：
- 在拖動目標上觸發事件 (源元素):
- - ondragstart - 用戶開始拖動元素時觸發
- - ondrag - 元素正在拖動時觸發
- - ondragend - 用戶完成元素拖動後觸發
- 釋放目標時觸發的事件:
- - ondragenter - 當被鼠標拖動的對象進入其容器範圍內時觸發此事件
- - ondragover - 當某被拖動的對象在另一對象容器範圍內拖動時觸發此事件
- - ondragleave - 當被鼠標拖動的對象離開其容器範圍內時觸發此事件
- - ondhttp://www.runoob.com/jsref/event-ondrop.htmlrop - 在一個拖動過程中，釋放鼠標鍵時觸發此事件
在拖動元素時，每隔 350 毫秒會觸發 ondrag 事件。
支持冒泡

瀏覽器支持

google	IE	firefox	safari	opera
4.0	9.0	3.5	6.0	12.0

ElementObject.ondragleave=function

5. ondragover

在可拖動元素或選取的文本正在拖動到放置目標時觸發

默認情況下，數據/元素不能放置到其他元素中。如果要實現改功能，我們需要防止元素的默認處理方法。我們可以通過調用 event.preventDefault() 方法來實現 ondragover 事件。

拖放是 HTML5 中非常常見的功能。更多信息可以查看菜鳥教程的 HTML 教程中的 HTML5 拖放。

提示

爲了讓元素可拖動，需要使用 HTML5 draggable 屬性。
鏈接和圖片默認是可拖動的，不需要 draggable 屬性。
在拖放的過程中會觸發以下事件：
- 在拖動目標上觸發事件 (源元素):
- - ondragstart - 用戶開始拖動元素時觸發
- - ondrag - 元素正在拖動時觸發
- - ondragend - 用戶完成元素拖動後觸發
- 釋放目標時觸發的事件:
- - ondragenter - 當被鼠標拖動的對象進入其容器範圍內時觸發此事件
- - ondragover - 當某被拖動的對象在另一對象容器範圍內拖動時觸發此事件
- - ondragleave - 當被鼠標拖動的對象離開其容器範圍內時觸發此事件
- - ondhttp://www.runoob.com/jsref/event-ondrop.htmlrop - 在一個拖動過程中，釋放鼠標鍵時觸發此事件
在拖動元素時，每隔 350 毫秒會觸發 ondrag 事件。
支持冒泡

瀏覽器支持

google	IE	firefox	safari	opera
4.0	9.0	3.5	6.0	12.0

ElementObject.ondragover=function

6. ondragstart

在用戶開始拖動元素或選擇的文本時觸發

拖放是 HTML5 中非常常見的功能。更多信息可以查看菜鳥教程的 HTML 教程中的 HTML5 拖放。

提示

爲了讓元素可拖動，需要使用 HTML5 draggable 屬性。
鏈接和圖片默認是可拖動的，不需要 draggable 屬性。
在拖放的過程中會觸發以下事件：
- 在拖動目標上觸發事件 (源元素):
- - ondragstart - 用戶開始拖動元素時觸發
- - ondrag - 元素正在拖動時觸發
- - ondragend - 用戶完成元素拖動後觸發
- 釋放目標時觸發的事件:
- - ondragenter - 當被鼠標拖動的對象進入其容器範圍內時觸發此事件
- - ondragover - 當某被拖動的對象在另一對象容器範圍內拖動時觸發此事件
- - ondragleave - 當被鼠標拖動的對象離開其容器範圍內時觸發此事件
- - ondhttp://www.runoob.com/jsref/event-ondrop.htmlrop - 在一個拖動過程中，釋放鼠標鍵時觸發此事件
在拖動元素時，每隔 350 毫秒會觸發 ondrag 事件。
支持冒泡

瀏覽器支持

google	IE	firefox	safari	opera
4.0	9.0	3.5	6.0	12.0

ElementObject.ondragstart=function

7. ondrop

在可拖動元素或選取的文本放置在目標區域時觸發

拖放是 HTML5 中非常常見的功能。更多信息可以查看菜鳥教程的 HTML 教程中的 HTML5 拖放。

提示

爲了讓元素可拖動，需要使用 HTML5 draggable 屬性。
鏈接和圖片默認是可拖動的，不需要 draggable 屬性。
在拖放的過程中會觸發以下事件：
- 在拖動目標上觸發事件 (源元素):
- - ondragstart - 用戶開始拖動元素時觸發
- - ondrag - 元素正在拖動時觸發
- - ondragend - 用戶完成元素拖動後觸發
- 釋放目標時觸發的事件:
- - ondragenter - 當被鼠標拖動的對象進入其容器範圍內時觸發此事件
- - ondragover - 當某被拖動的對象在另一對象容器範圍內拖動時觸發此事件
- - ondragleave - 當被鼠標拖動的對象離開其容器範圍內時觸發此事件
- - ondhttp://www.runoob.com/jsref/event-ondrop.htmlrop - 在一個拖動過程中，釋放鼠標鍵時觸發此事件
在拖動元素時，每隔 350 毫秒會觸發 ondrag 事件。
支持冒泡

瀏覽器支持

google	IE	firefox	safari	opera
4.0	9.0	3.5	6.0	12.0

ElementObject.ondrop=function

文檔內容出自 W3cSchool和菜鳥教程，如需查看更詳細的有關內容請登錄 http://www.w3school.com.cn/ 和 http://www.runoob.com/

zzzzzzz周紹輝

發佈了44 篇原創文章 · 獲贊 12 · 訪問量 5萬+

私信關注