Cùng tìm hiểu về sự kiện copy, cut và paste trong JavaScript. Bạn sẽ biết khái niệm cũng như cách bắt các loại sự kiện này trong JavaScript sau bài học này.

Sự kiện copy, cut và paste trong JavaScript

Sự kiện copy

Sự kiện copy trong JavaScript xảy ra khi người dùng tiến hành thao tác copy ở trên brower. Sự kiện này xảy ra trên các Element Object trong JavaScript.

Sự kiện cut

Sự kiện cut trong JavaScript xảy ra khi người dùng tiến hành thao tác cắt ở trên brower. Sự kiện này xảy ra trên các Element Object trong JavaScript.

Sự kiện paste

Sự kiện paste trong JavaScript xảy ra khi người dùng tiến hành thao tác dán ở trên brower. Sự kiện này xảy ra trên các Element Object trong JavaScript.

Bắt sự kiện copy, cut và paste trong JavaScript

Để bắt sự kiện copy, cut và paste trong JavaScript, chúng ta cần phải có một trình xử lý sự kiện (Event Handlers) giúp xử lý khi sự kiện xảy ra, và phải đăng ký trình xử lý sự kiện này vào Element cần quan sát.

Tuỳ vào cách đăng ký trình xử lý sự kiện mà chúng ta có 3 phương pháp bắt sự kiện copy và paste trong JavaScript sau đây:

Phương pháp 1: Sử dụng thuộc tính oncopy, oncut và onpaste

Chúng ta có thể sử dụng thuộc tính oncopy, oncut và onpaste của Element để bắt lần lượt các sự kiện copy, cut và paste, nếu trình xử lý sự kiện(Event Handlers) đã được đăng ký cho các giá trị thuộc tính này của Element.

Ví dụ cụ thể:

<textarea oncopy="copy()" oncut="cut()" onpaste="paste()">
</textarea>

<script>
function copy(){
    console.log('Copy');
}
</script>

<script>
function cut(){
    console.log('Cut');
}
</script>

<script>
function paste(){
    console.log('Paste');
}
</script>

Trong ví dụ này, các trình xử lý sự kiện copy, cut và paste được đăng ký cho Element có tag input thông qua các thuộc tính tương ứng. Do vậy khi các sự kiện này xảy ra đối với Element này, trình xử lý sự kiện sẽ bắt và xử lý chúng.

Phương pháp 2: Sử dụng thuộc tính oncopy, oncut và onpaste của Element thu được từ DOM

Cũng với phương pháp dùng thuộc tính oncopy, oncut và onpaste để đăng ký trình xử lý sự kiện, tuy nhiên lần này chúng ta không đăng ký trực tiếp vào thuộc tính của Element, mà bằng cách sử dụng DOM để lấy Element rồi mới đăng ký.

Ví dụ cụ thể:

<textarea id="memo"></textarea>

<script>
function copy(){
    console.log('Copy');
}

function cut(){
    console.log('Cut');
}

function paste(){
    console.log('Paste');
}

let memoarea = document.getElementById('memo');
memoarea.oncopy = copy;
memoarea.oncut = cut;
memoarea.onpaste = paste;
</script>

Trong ví dụ này, chúng ta dùng phương thức getElementById để lấy Element có id="btn" từ DOM. Sau đó mới dùng thuộc tính oncopy, oncut và onpaste của Element đó để đăng ký trình xử lý sự kiện giúp bắt các sự kiện khi nó xảy ra.

• Xem thêm: getElementById trong JavaScript

Phương pháp 3: Sử dụng phương thức addEventListener

Với phương pháp này, chúng ta cũng dùng DOM để lấy Element cần đăng ký trình xử lý sự kiện. Sau đó khai báo tên sự kiện cũng như tên trình xử lý sự kiện vào Element bằng phương thức addEventListener là xong.

Ví dụ cụ thể:

<textarea id="memo"></textarea>

<script>
function copy(){
    console.log('Copy');
}

function cut(){
    console.log('Cut');
}

function paste(){
    console.log('Paste');
}

let memoarea = document.getElementById('memo');
memoarea.addEventListener('copy', copy);
memoarea.addEventListener('cut', cut);
memoarea.addEventListener('paste', paste);
</script>

Trong ví dụ này, chúng ta dùng phương thức getElementById để lấy Element có id="btn" từ DOM. Sau đó dùng phương thức addEventListener của Element đó để đăng ký trình xử lý sự kiện tương ứng với thuộc tính của Element, nhằm bắt các sự kiện khi nó xảy ra.

• Xem thêm: addEventListener trong JavaScript

Trong trường hợp bắt sự kiện bằng phương thức addEventListener trong JavaScript, một Event Object chứa các thông tin về sự kiện đã xảy ra sẽ được trả về.

Đối với các sự kiện copy, cut và paste, một ClipboardEvent Object kế thừa từ Event Object sẽ được trả về. Chúng ta có thể thao tác với các thông tin chứa trong sự kiện qua đối tượng ClipboardEvent này.

Ví dụ chúng ta có thể lấy và xem thông tin về sự kiện đã xảy ra thông qua thao tác với đối tượng ClipboardEvent được trả về này.

<textarea id="memo"></textarea>

<script>
function copy(event){
    console.log(event);
}

function cut(event){
    console.log(event);
}

function paste(event){
    console.log(event);
}

let memoarea = document.getElementById('memo');
memoarea.addEventListener('copy', copy);
memoarea.addEventListener('cut', cut);
memoarea.addEventListener('paste', paste);
</script>

Ví dụ bắt sự kiện copy, cut và paste trong JavaScript

Hãy cùng xem một ví dụ cụ thể với mã HTML về cách bắt sự kiện copy, cut và paste trong JavaScript như sau. Trong ví dụ này chúng ta sử dụng tới phương pháp 3: Sử dụng phương thức addEventListener để bắt sự kiện. Các phương pháp khác cũng tiến hành tương tự.

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Sample</title>

<style type="text/css">
textarea{
width:500px;
height:100px;
}
</style>

</head>
<body>

<p>Ví dụ sử dụng sự kiện copy, cut và paste</p>

<textarea id="memo">Have nice day</textarea>

<script>
function copy(event){
    alert('Copy bị cấm')
    event.preventDefault();
}

function cut(event){
    alert('Cut bị cấm')
    event.preventDefault();
}

function paste(event){
    alert('Paste bị cấm')
    event.preventDefault();
}

let memoarea = document.getElementById('memo');
memoarea.addEventListener('copy', copy);
memoarea.addEventListener('cut', cut);
memoarea.addEventListener('paste', paste);
</script>

</body>
</html>

Với mã lệnh này, bằng cách sử dụng addEventListener chúng ta đã bắt được các sự kiện copy, cut và paste khi người dùng thực hiện nó trên brower.

Và bằng cách thao tác với đối tượng Event chứa các thông tin về sự kiện đã xảy ra, chúng ta dùng phương thức preventDefault đối với đối tượng này nhằm ngăn chặn các xử lý vốn có khi sự kiện được bắt.

Kết quả thì các hành động như copy, cut và past đoạn text Have nice day đều bị cấm nhờ đoạn mã này.

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách bắt sự kiện copy, cut và paste trong JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.

URL Link

https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/su-kien-trong-javascript/copy-cut-va-paste-trong-javascript/