• Bản quyền
  • Tác Giả
  • FAQs
Tech News, Magazine & Review WordPress Theme 2017
  • Home
  • HTML
    Các ký tự thực thể trong HTML

    Các ký tự thực thể trong HTML

    Cách chèn Plug-in vào trang web HTML

    Cách chèn Plug-in vào trang web HTML

    Cách tạo một cái bảng (table) trong HTML

    Cách tạo một cái bảng (table) trong HTML

    Cách tạo một cái danh sách trong HTML

    Cách tạo một cái danh sách trong HTML

    Cách chèn video trên Youtube vào trang web

    Cách chèn video trên Youtube vào trang web

    Cách chèn một cái khung vào bên trong trang web

    Cách chèn một cái khung vào bên trong trang web

    Cách chèn một đoạn audio vào trang web

    Cách chèn một đoạn audio vào trang web

    Cách chèn một đoạn video vào trang web

    Cách chèn một đoạn video vào trang web

    Cách tạo một cái bản đồ ảnh trong HTML

    Cách tạo một cái bản đồ ảnh trong HTML

  • CSS
    Chỉnh độ ưu tiên hiển thị giữa các phần tử HTML

    Chỉnh độ ưu tiên hiển thị giữa các phần tử HTML

    Cách sử dụng thuộc tính float & clear trong CSS

    Cách sử dụng thuộc tính float & clear trong CSS

    Cách thức định dạng cho một cái liên kết (Link)

    Cách thức định dạng cho một cái liên kết (Link)

    Chức năng & cách sử dụng thuộc tính transition

    Chức năng & cách sử dụng thuộc tính transition

    Cách tạo hiệu ứng chuyển động cho phần tử HTML

    Cách tạo hiệu ứng chuyển động cho phần tử HTML

    Cách thiết lập vị trí cho một phần tử HTML

    Cách thiết lập vị trí cho một phần tử HTML

    Chỉnh cách thức hiển thị của một phần tử HTML

    Chỉnh cách thức hiển thị của một phần tử HTML

    Cách tạo thanh cuộn (scroll) cho một phần tử HTML

    Cách tạo thanh cuộn (scroll) cho một phần tử HTML

    Cách chỉnh độ trong suốt cho một phần tử HTML

    Cách chỉnh độ trong suốt cho một phần tử HTML

  • JavaScript
    Từ dành riêng (Reserved Words) trong JavaScript

    Từ dành riêng (Reserved Words) trong JavaScript

    Thủ thuật giúp cải thiện hiệu suất chương trình

    Thủ thuật giúp cải thiện hiệu suất chương trình

    Khuôn khổ trình bày mã lệnh JavaScript

    Khuôn khổ trình bày mã lệnh JavaScript

    Chế độ nghiêm ngặt (Strict Mode) trong JavaScript

    Chế độ nghiêm ngặt (Strict Mode) trong JavaScript

    Thuật ngữ "Hoisting" trong JavaScript

    Thuật ngữ “Hoisting” trong JavaScript

    Cách tìm và sửa những câu lệnh bị lỗi

    Cách tìm và sửa những câu lệnh bị lỗi

    Các lệnh xử lý lỗi trong JavaScript

    Các lệnh xử lý lỗi trong JavaScript

    Câu lệnh break & continue trong JavaScript

    Câu lệnh break & continue trong JavaScript

    Cách sử dụng vòng lặp while & do while

    Cách sử dụng vòng lặp while & do while

  • jQuery
    Cách chọn các phần tử tổ tiên trong jQuery

    Cách chọn các phần tử tổ tiên trong jQuery

    Các phương thức thiết lập thuộc tính Class trong jQuery

    Các phương thức thiết lập thuộc tính Class trong jQuery

    Xóa phần tử HTML trong jQuery

    Xóa phần tử HTML trong jQuery

    Các phương thức lấy nội dung và thuộc tính trong jQuery

    Các phương thức lấy nội dung và thuộc tính trong jQuery

    Kết thúc hiệu ứng bằng phương thức Stop() trong jQuery

    Kết thúc hiệu ứng bằng phương thức Stop() trong jQuery

    Hiệu ứng động (Animation) trong jQuery

    Hiệu ứng động (Animation) trong jQuery

    Cách HIỆN/ẨN phần tử với hiệu ứng trượt trong jQuery

    Cách HIỆN/ẨN phần tử với hiệu ứng trượt trong jQuery

    Hàm Callback trong jQuery

    Hàm Callback trong jQuery

    Cách HIỆN/ẨN phần tử với hiệu ứng phai màu trong jQuery

    Cách HIỆN/ẨN phần tử với hiệu ứng phai màu trong jQuery

  • Mysql
    Tìm hiểu INNER JOIN trong MySQL

    Tìm hiểu INNER JOIN trong MySQL

    Tìm hiểu RIGHT JOIN trong MySQL

    Tìm hiểu RIGHT JOIN trong MySQL

    Cách sử dụng LEFT JOIN trong MySQL

    Cách sử dụng LEFT JOIN trong MySQL

    Danh sách các hàm trong MySQL

    Danh sách các hàm trong MySQL

    Tự động gán & tăng giá trị (AUTO_INCREMENT) trong MySQL

    Tự động gán & tăng giá trị (AUTO_INCREMENT) trong MySQL

    Cách lập chỉ mục trên cột trong MySQL

    Cách lập chỉ mục trên cột trong MySQL

    Ràng buộc DEFAULT trong MySQL

    Ràng buộc DEFAULT trong MySQL

    Ràng buộc CHECK trong MySQL

    Ràng buộc CHECK trong MySQL

    Ràng buộc FOREIGN KEY (khóa ngoại) trong MySQL

    Ràng buộc FOREIGN KEY (khóa ngoại) trong MySQL

  • PHP
    Cách sử dụng biểu thức chính quy (RegEx) trong PHP

    Cách sử dụng biểu thức chính quy (RegEx) trong PHP

    Cách sắp xếp thứ tự các phần tử mảng trong PHP

    Cách sắp xếp thứ tự các phần tử mảng trong PHP

    Cách khai báo, sử dụng Mảng (Array) trong PHP

    Cách khai báo, sử dụng Mảng (Array) trong PHP

    Cách khai báo và sử dụng hàm (function) trong PHP

    Cách khai báo và sử dụng hàm (function) trong PHP

    Vòng lặp for & foreach trong PHP

    Vòng lặp for & foreach trong PHP

    Vòng lặp while & do while trong PHP

    Vòng lặp while & do while trong PHP

    Lệnh switch case trong PHP

    Lệnh switch case trong PHP

    Lệnh điều kiện if ... else trong PHP

    Lệnh điều kiện if … else trong PHP

    Tìm hiểu cách sử dụng các loại toán tử trong PHP

    Tìm hiểu cách sử dụng các loại toán tử trong PHP

  • Phần Mềm
    • Đồ Họa
    • Kỹ Thuật
    • Văn Phòng
No Result
View All Result
  • Home
  • HTML
    Các ký tự thực thể trong HTML

    Các ký tự thực thể trong HTML

    Cách chèn Plug-in vào trang web HTML

    Cách chèn Plug-in vào trang web HTML

    Cách tạo một cái bảng (table) trong HTML

    Cách tạo một cái bảng (table) trong HTML

    Cách tạo một cái danh sách trong HTML

    Cách tạo một cái danh sách trong HTML

    Cách chèn video trên Youtube vào trang web

    Cách chèn video trên Youtube vào trang web

    Cách chèn một cái khung vào bên trong trang web

    Cách chèn một cái khung vào bên trong trang web

    Cách chèn một đoạn audio vào trang web

    Cách chèn một đoạn audio vào trang web

    Cách chèn một đoạn video vào trang web

    Cách chèn một đoạn video vào trang web

    Cách tạo một cái bản đồ ảnh trong HTML

    Cách tạo một cái bản đồ ảnh trong HTML

  • CSS
    Chỉnh độ ưu tiên hiển thị giữa các phần tử HTML

    Chỉnh độ ưu tiên hiển thị giữa các phần tử HTML

    Cách sử dụng thuộc tính float & clear trong CSS

    Cách sử dụng thuộc tính float & clear trong CSS

    Cách thức định dạng cho một cái liên kết (Link)

    Cách thức định dạng cho một cái liên kết (Link)

    Chức năng & cách sử dụng thuộc tính transition

    Chức năng & cách sử dụng thuộc tính transition

    Cách tạo hiệu ứng chuyển động cho phần tử HTML

    Cách tạo hiệu ứng chuyển động cho phần tử HTML

    Cách thiết lập vị trí cho một phần tử HTML

    Cách thiết lập vị trí cho một phần tử HTML

    Chỉnh cách thức hiển thị của một phần tử HTML

    Chỉnh cách thức hiển thị của một phần tử HTML

    Cách tạo thanh cuộn (scroll) cho một phần tử HTML

    Cách tạo thanh cuộn (scroll) cho một phần tử HTML

    Cách chỉnh độ trong suốt cho một phần tử HTML

    Cách chỉnh độ trong suốt cho một phần tử HTML

  • JavaScript
    Từ dành riêng (Reserved Words) trong JavaScript

    Từ dành riêng (Reserved Words) trong JavaScript

    Thủ thuật giúp cải thiện hiệu suất chương trình

    Thủ thuật giúp cải thiện hiệu suất chương trình

    Khuôn khổ trình bày mã lệnh JavaScript

    Khuôn khổ trình bày mã lệnh JavaScript

    Chế độ nghiêm ngặt (Strict Mode) trong JavaScript

    Chế độ nghiêm ngặt (Strict Mode) trong JavaScript

    Thuật ngữ "Hoisting" trong JavaScript

    Thuật ngữ “Hoisting” trong JavaScript

    Cách tìm và sửa những câu lệnh bị lỗi

    Cách tìm và sửa những câu lệnh bị lỗi

    Các lệnh xử lý lỗi trong JavaScript

    Các lệnh xử lý lỗi trong JavaScript

    Câu lệnh break & continue trong JavaScript

    Câu lệnh break & continue trong JavaScript

    Cách sử dụng vòng lặp while & do while

    Cách sử dụng vòng lặp while & do while

  • jQuery
    Cách chọn các phần tử tổ tiên trong jQuery

    Cách chọn các phần tử tổ tiên trong jQuery

    Các phương thức thiết lập thuộc tính Class trong jQuery

    Các phương thức thiết lập thuộc tính Class trong jQuery

    Xóa phần tử HTML trong jQuery

    Xóa phần tử HTML trong jQuery

    Các phương thức lấy nội dung và thuộc tính trong jQuery

    Các phương thức lấy nội dung và thuộc tính trong jQuery

    Kết thúc hiệu ứng bằng phương thức Stop() trong jQuery

    Kết thúc hiệu ứng bằng phương thức Stop() trong jQuery

    Hiệu ứng động (Animation) trong jQuery

    Hiệu ứng động (Animation) trong jQuery

    Cách HIỆN/ẨN phần tử với hiệu ứng trượt trong jQuery

    Cách HIỆN/ẨN phần tử với hiệu ứng trượt trong jQuery

    Hàm Callback trong jQuery

    Hàm Callback trong jQuery

    Cách HIỆN/ẨN phần tử với hiệu ứng phai màu trong jQuery

    Cách HIỆN/ẨN phần tử với hiệu ứng phai màu trong jQuery

  • Mysql
    Tìm hiểu INNER JOIN trong MySQL

    Tìm hiểu INNER JOIN trong MySQL

    Tìm hiểu RIGHT JOIN trong MySQL

    Tìm hiểu RIGHT JOIN trong MySQL

    Cách sử dụng LEFT JOIN trong MySQL

    Cách sử dụng LEFT JOIN trong MySQL

    Danh sách các hàm trong MySQL

    Danh sách các hàm trong MySQL

    Tự động gán & tăng giá trị (AUTO_INCREMENT) trong MySQL

    Tự động gán & tăng giá trị (AUTO_INCREMENT) trong MySQL

    Cách lập chỉ mục trên cột trong MySQL

    Cách lập chỉ mục trên cột trong MySQL

    Ràng buộc DEFAULT trong MySQL

    Ràng buộc DEFAULT trong MySQL

    Ràng buộc CHECK trong MySQL

    Ràng buộc CHECK trong MySQL

    Ràng buộc FOREIGN KEY (khóa ngoại) trong MySQL

    Ràng buộc FOREIGN KEY (khóa ngoại) trong MySQL

  • PHP
    Cách sử dụng biểu thức chính quy (RegEx) trong PHP

    Cách sử dụng biểu thức chính quy (RegEx) trong PHP

    Cách sắp xếp thứ tự các phần tử mảng trong PHP

    Cách sắp xếp thứ tự các phần tử mảng trong PHP

    Cách khai báo, sử dụng Mảng (Array) trong PHP

    Cách khai báo, sử dụng Mảng (Array) trong PHP

    Cách khai báo và sử dụng hàm (function) trong PHP

    Cách khai báo và sử dụng hàm (function) trong PHP

    Vòng lặp for & foreach trong PHP

    Vòng lặp for & foreach trong PHP

    Vòng lặp while & do while trong PHP

    Vòng lặp while & do while trong PHP

    Lệnh switch case trong PHP

    Lệnh switch case trong PHP

    Lệnh điều kiện if ... else trong PHP

    Lệnh điều kiện if … else trong PHP

    Tìm hiểu cách sử dụng các loại toán tử trong PHP

    Tìm hiểu cách sử dụng các loại toán tử trong PHP

  • Phần Mềm
    • Đồ Họa
    • Kỹ Thuật
    • Văn Phòng
No Result
View All Result
IZWEBZ – Blog học lập trình, thiết kế web cơ bản & chuyên sâu
No Result
View All Result
Home JavaScript

Cách bắt sự kiện (Event) trong JavaScript

Demon Warlock by Demon Warlock
Cách bắt sự kiện (Event) trong JavaScript
Share on FacebookShare on Twitter

1) Sự kiện là gì !?

– Thông thường, sự kiện là những hành động của người dùng khi tương tác lên phần tử HTML.

– Ví dụ:

    • Khi người dùng click chuột vào phần tử, đó là một sự kiện.
=> Ví dụ, bạn hãy thử
    • Khi người dùng gõ văn bản vào textfield, đó là một sự kiện.
=> Ví dụ, bạn hãy thử
    • Khi người dùng di chuyển con trỏ vào phần tử, đó là một sự kiện.

=> Ví dụ, bạn hãy thử

Di chuyển con trỏ vào đây

 

  • ….

2) Các sự kiện trong JavaScript

– Trong JavaScript, mỗi sự kiện sẽ tương ứng với một cái tên.

– Dưới đây là danh sách một vài sự kiện phổ biến mà ta thường dùng trong JavaScript.

Tên sự kiện Mô tả
onclick Sự kiện xảy ra khi người dùng click chuột vào phần tử
ondblclick Sự kiện xảy ra khi người dùng click kép chuột vào phần tử
onmouseenter Sự kiện xảy ra khi người dùng di chuyển con trỏ vào phần tử
onmouseleave Sự kiện xảy ra khi người dùng di chuyển con trỏ ra khỏi phần tử.
onkeydown Sự kiện xảy ra khi người dùng đang nhấn một phím
onkeyup Sự kiện xảy ra khi người dùng nhả phím ra
oncopy Sự kiện xảy ra khi người dùng sao chép nội dung của phần tử
oncut Sự kiện xảy ra khi người dùng cắt nội dung của phần tử
onpaste Sự kiện xảy ra khi người dùng dán nội dung vào phần tử
onchange Sự kiện xảy ra khi người dùng thay đổi giá trị của phần tử

Bạn sẽ được tìm hiểu đầy đủ tất cả các sự kiện trong bài hướng dẫn nâng cao về sự kiện

3) Bắt sự kiện là gì !?

– “Bắt sự kiện” là khi một sự kiện nào đó xảy ra thì ta muốn JavaScript phản ứng lại với sự kiện đó bằng việc thực thi một đoạn mã xác định.

– Ví dụ, tôi muốn khi người dùng thì câu lệnh alert(‘Xin chào JavaScript’) sẽ được thực thi.

– Ví dụ, tôi muốn:

– Khi người dùng di chuyển con trỏ vào phần tử này thì màu nền của phần tử này sẽ chuyển sang màu hồng (tức là câu lệnh this.style.backgroundColor=’pink’ được thực thi)

– Khi người dùng di chuyển con trỏ ra khỏi phần tử này thì màu nền của phần tử này sẽ chuyển sang màu trắng (tức là câu lệnh this.style.backgroundColor=’white’ được thực thi)

4) Cách bắt sự kiện trong JavaScript

– Trước khi bắt sự kiện thì ta cần phải xác định rõ ba thành phần:

  • (1) Phần tử dùng để xảy ra sự kiện.
  • (2) Sự kiện sẽ xảy ra.
  • (3) Đoạn mã sẽ được thực thi khi sự kiện xảy ra.

– Dưới đây là cú pháp dùng để bắt sự kiện:

<Tên-phần-tử Tên-sự-kiện="đoạn mã sẽ được thực thi khi sự kiện xảy ra">
Ví dụ:

Khi người dùng click kép chuột vào nút “Xem kết quả” thì đoạn mã:

var a = 100;
var b = 50;
var result = (a + b)*2;
alert(‘Kết quả của biểu thức là: ‘ + result)
sẽ được thực thi.


<!DOCTYPE html>
<html>
<body>
    <button ondblclick="var a = 100;var b = 50;var result = (a + b)*2;alert('Kết quả của biểu thức là: ' + result)">Xem kết quả</button>
</body>
</html>

Xem ví dụ

Ví dụ:

Khi người dùng click chuột vào nút “Xin chào” thì hàm hello() sẽ được thực thi


<!DOCTYPE html>
<html>
<body>
    <button onclick="hello()">Xin chào</button>
    <p id="demo"></p>
    <script>
        function hello(){
            var name = "Nguyễn Thành Nhân";
            var year = 1993;
            var str = "Tôi tên " + name + " sinh năm " + year;
            document.getElementById("demo").innerHTML = str;
        }
    </script>
</body>
</html>

Xem ví dụ

– Lưu ý: Với cùng một phần tử, ta có thể bắt cho nó nhiều sự kiện.

Ví dụ:

Phần tử <div> có id là demo bên dưới được bắt hai sự kiện:

  • Khi người dùng di chuyển con trỏ vào nó thì sự kiện onmouseenter xảy ra và câu lệnh this.style.backgroundColor=’yellow’ sẽ được thực thi.
  • Khi người dùng di chuyển con trỏ vào nó thì sự kiện onmouseleave xảy ra và câu lệnh this.style.backgroundColor=’gray’ sẽ được thực thi.

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        #demo{
            width:300px;
            height:200px;
            background-color:gray;
        }
    </style>
</head>
<body>
    <div id="demo" onmouseenter="this.style.backgroundColor='yellow'" onmouseleave="this.style.backgroundColor='gray'"></div>
</body>
</html>

Xem ví dụ

– Lưu ý:

  • Nếu đoạn mã được viết bên trong bên trong cặp dấu nháy kép thì trong đoạn mã tuyệt đối không được chứa ký tự là dấu nháy kép.
  • Nếu đoạn mã được viết bên trong bên trong cặp dấu nháy đơn thì trong đoạn mã tuyệt đối không được chứa ký tự là dấu nháy đơn.
Ví dụ:

<button onclick="alert("Hello")">Xin chào</button> <!-- SAI -->
<button onclick='alert('Hello')'>Xin chào</button> <!-- SAI -->
<button onclick="alert('Hello')">Xin chào</button> <!-- ĐÚNG -->
<button onclick='alert("Hello")'>Xin chào</button> <!-- ĐÚNG -->

5) Một số ví dụ khác

Ví dụ:

<!DOCTYPE html>
<html>
<body>
    <input type="text" onkeydown="this.style.backgroundColor='pink'" onkeyup="this.style.backgroundColor='yellow'" placeholder="gõ ký tự vào đây">
</body>
</html>

Xem ví dụ

Ví dụ:

<!DOCTYPE html>
<html>
<body>
    <textarea cols="50" rows="15" oncopy="alert('Bạn vừa sao chép nội dung của phần tử này')" oncut="alert('Bạn vừa cắt nội dung của phần tử này')" onpaste="alert('Bạn vừa dán nội dung vào phần tử này')">Tài liệu hướng dẫn học lập trình web</textarea>
</body>
</html>

Xem ví dụ

Ví dụ:

<!DOCTYPE html>
<html>
<body>
    <select onchange="alert('Bạn vừa thay đổi giá trị của phần tử này')">
        <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="javascript">JavaScript</option>
        <option value="mysql">MySQL</option>
        <option value="php">PHP</option>
    </select>
</body>
</html>
Demon Warlock

Demon Warlock

Tôi được sinh ra ở Việt Nam, nhưng hiện tại đang sống và làm việc tại Mỹ. Ngành tôi học không có liên quan gì đến thiết kế web. Nhưng đây là sở thích từ ngày còn là sinh viên du học, do vậy bây giờ dù cho đang đi làm nhưng tôi vẫn thích dùng thời gian rảnh rỗi của mình để học về thiết kế web. Như các bạn, tôi cũng việc mày mò tự học và khám phá.

Next Post
Số (number) trong JavaScript

Số (number) trong JavaScript

Blog học lập trình, thiết kế web từ cơ bản đến nâng cao cho người bắt đầu. Ngoài ra, còn chia sẻ các tài nguyên như: theme, plugin và game.

Follow Us

Chuyên mục

  • CSS
  • Đồ Họa
  • HTML
  • JavaScript
  • jQuery
  • Kỹ Thuật
  • Mysql
  • Phần Mềm
  • PHP
  • Văn Phòng

Recent News

Download Office 2016

Download Office 2016 – Hướng Dẫn Cài Đặt Chi Tiết

22 Tháng Mười Một, 2022
Download Office 2010 Professional – Hướng Dẫn Cài Đặt Chi Tiết

Download Office 2010 Professional – Hướng Dẫn Cài Đặt Chi Tiết

22 Tháng Mười Một, 2022
  • FAQs
  • Bản quyền
  • Tác Giả

© 2022 izwebz - Blog học lập trình, thiết kế web chuyên sâu

No Result
View All Result
  • Bản quyền
  • Chính sách bảo mật
  • Download Adobe Lightroom Classic CC 2020 – Hướng Dẫn Cài Đặt Chi Tiết
  • Download Adobe Photoshop CS6 – Hướng Dẫn Cài Đặt Chi Tiết
  • Download Adobe Premiere Pro CC 2020 – Hướng Dẫn Cài Đặt Chi Tiết
  • Download Internet Download Manager Full 2022
  • Download Photoshop 2019 – Hướng Dẫn Cài Đặt Chi Tiết
  • Download ProShow Gold 9.0 Và Hướng Dẫn Cài Đặt
  • Download Proshow Producer 9 – Hướng Dẫn Cài Đặt
  • FAQs
  • Home 1
  • Liên hệ
  • Tác Giả

© 2022 izwebz - Blog học lập trình, thiết kế web chuyên sâu