Bất cứ khi nào bạn truy cập một trang web, có thể bạn sẽ nhấp vào thứ gì đó như liên kết hoặc nút.
Các liên kết đưa bạn đến một phần nhất định của trang, một trang khác của trang web hoặc một trang web khác hoàn toàn. Mặt khác, các nút thường được thao tác bởi các sự kiện JavaScript để chúng có thể kích hoạt chức năng nhất định.
Trong hướng dẫn này, chúng ta sẽ khám phá hai cách khác nhau để thực hiện các sự kiện nhấp chuột trong JavaScript bằng hai phương pháp khác nhau.
Đầu tiên, chúng ta sẽ xem xét truyền thống onclick kiểu mà bạn thực hiện ngay từ trang HTML. Sau đó, chúng ta sẽ thấy cách “nhấp chuột” hiện đại hơn eventListner hoạt động, cho phép bạn tách HTML khỏi JavaScript.
Làm thế nào để sử dụng onclick sự kiện trong JavaScript
Các onclick sự kiện thực thi một chức năng nhất định khi một nút được bấm. Điều này có thể xảy ra khi người dùng gửi biểu mẫu, khi bạn thay đổi nội dung nhất định trên trang web và những việc khác tương tự.
Bạn đặt hàm JavaScript mà bạn muốn thực thi bên trong thẻ mở của nút.
Căn bản onclick cú pháp
<element onclick="functionToExecute()">Click</element>
Ví dụ
<button onclick="functionToExecute()">Click</button>
Lưu ý rằng onclick thuộc tính hoàn toàn là JavaScript. Giá trị mà nó nhận, là chức năng bạn muốn thực hiện, nói lên tất cả, vì nó được gọi ngay trong thẻ mở.
Trong JavaScript, bạn gọi một hàm bằng cách gọi tên của nó, sau đó bạn đặt dấu ngoặc đơn sau mã định danh hàm (tên).
onclick ví dụ sự kiện
Tôi đã chuẩn bị một số HTML cơ bản với một chút kiểu dáng để chúng ta có thể đặt onclick sự kiện vào thực tế trong thế giới thực.
<div>
<p class="name">freeCodeCamp</p>
<button>Change to Blue</button>
</div>
Và đây là CSS để làm cho nó trông đẹp mắt, cùng với tất cả phần còn lại của mã ví dụ:
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
p {
font-size: 2rem;
}
button {
padding: 7px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button.blue {
background-color: #3498db;
}
button.green {
background-color: #2ecc71;
}
button.orange {
background-color: orangered;
}
Vì vậy, trên trang web, đây là những gì chúng ta có:
Mục đích của chúng tôi là thay đổi màu của văn bản thành màu xanh lam khi chúng tôi nhấp vào nút. Vì vậy chúng ta cần thêm một onclick thuộc tính cho nút của chúng tôi, sau đó viết hàm JavaScript để thay đổi màu sắc.
Vì vậy, chúng tôi cần thực hiện một thay đổi nhỏ trong HTML của mình:
<div>
<p class="name">freeCodeCamp</p>
<button onclick="changeColor()">Change to Blue</button>
</div>
Chức năng chúng tôi muốn thực hiện là changeColor(). Vì vậy, chúng tôi cần viết nó trong một tệp JavaScript hoặc trong tệp HTML bên trong một <script> nhãn.
Nếu bạn muốn viết tập lệnh của mình trong tệp JavaScript, bạn cần liên kết tập lệnh đó trong HTML bằng cú pháp bên dưới:
<script src="https://www.freecodecamp.org/news/html-button-onclick-javascript-click-event-tutorial/path-to-javascript-file"></script>
Nếu bạn muốn viết tập lệnh trong tệp HTML, chỉ cần đặt tập lệnh đó vào trong thẻ script:
<script>
// Your Scripts
</script>
Bây giờ, hãy viết của chúng tôi changeColor() chức năng.
Trước hết, chúng ta cần chọn phần tử mà chúng ta muốn thao tác, đó là văn bản freeCodeCamp bên trong <p> nhãn.
Trong JavaScript, bạn làm điều đó với DOM getElementById(), getElementsByClassName()hoặc là querySelector() các phương pháp. Sau đó, bạn lưu trữ giá trị trong một biến.
Trong hướng dẫn này, tôi sẽ sử dụng querySelector() bởi vì nó hiện đại hơn và nó nhanh hơn. Tôi cũng sẽ sử dụng const để khai báo các biến của chúng tôi thay vì let và varbởi vì với constmọi thứ sẽ an toàn hơn khi biến trở thành chỉ đọc.
const name = document.querySelector(".name");
Bây giờ chúng ta đã chọn văn bản, hãy viết chức năng của chúng ta. Trong JavaScript, cú pháp hàm cơ bản trông như thế này:
function funcctionName () {
// What to do
}
Vì vậy, hãy viết chức năng của chúng tôi:
function changeColor() {
name.style.color = "blue";
}
Chuyện gì đang xảy ra vậy?
Hãy nhớ từ HTML rằng changeColor() là chức năng chúng ta sẽ thực hiện. Đó là lý do tại sao định danh hàm (tên) của chúng tôi được đặt thành changeColor. Nếu tên không tương quan với nội dung trong HTML, nó sẽ không hoạt động.
Trong DOM (Mô hình đối tượng tài liệu, đề cập đến tất cả HTML), để thay đổi bất kỳ thứ gì liên quan đến kiểu dáng, bạn cần viết “kiểu dáng” sau đó là dấu chấm (.). Tiếp theo là những gì bạn muốn thay đổi, có thể là màu sắc, màu nền, cỡ chữ, v.v.
Vì vậy, bên trong hàm của chúng ta, chúng ta lấy biến tên mà chúng ta đã khai báo để lấy văn bản freeCodeCamp, sau đó chúng ta thay đổi màu thành màu xanh lam.
Màu của văn bản của chúng tôi chuyển sang màu xanh bất cứ khi nào nhấp vào nút:
Mã của chúng tôi đang hoạt động!
Chúng ta có thể tiến xa hơn một chút bằng cách thay đổi văn bản của mình thành nhiều màu sắc hơn:
<div>
<p class="name">freeCodeCamp</p>
<button onclick="changeColor('blue')" class="blue">Blue</button>
<button onclick="changeColor('green')" class="green">Green</button>
<button onclick="changeColor('orangered')" class="orange">Orange</button>
</div>
Vì vậy, những gì chúng tôi muốn làm là thay đổi văn bản thành xanh dương, xanh lá cây và đỏ cam.
Khoảng thời gian này, các onclick các hàm trong HTML của chúng tôi lấy các giá trị của màu mà chúng tôi muốn thay đổi văn bản thành. Chúng được gọi là tham số trong JavaScript. Hàm mà chúng ta sẽ viết cũng có chức năng riêng của nó, mà chúng ta sẽ gọi là “màu sắc”.
Trang web của chúng tôi đã thay đổi một chút:
Vì vậy, hãy chọn văn bản freeCodeCamp của chúng ta và viết hàm để thay đổi màu của nó thành xanh dương, xanh lục và đỏ cam:
const name = document.querySelector(".name");
function changeColor(color) {
name.style.color = color;
}
Khối mã trong hàm lấy biến tên (nơi chúng tôi lưu trữ văn bản freeCodeCamp của mình), sau đó đặt màu thành bất kỳ thứ gì chúng tôi chuyển vào changeColor() chức năng trong các nút HTML.
Cách sử dụng nhấp chuột eventListener trong JavaScript
Trong JavaScript, có nhiều cách để làm điều tương tự. Khi bản thân JavaScript phát triển theo thời gian, chúng tôi bắt đầu cần tách mã HTML, CSS và JavaScript để tuân thủ các phương pháp hay nhất.
Trình xử lý sự kiện có thể thực hiện điều này vì chúng cho phép bạn tách JavaScript khỏi HTML. Bạn cũng có thể làm điều này với onclick, nhưng hãy thực hiện một cách tiếp cận khác tại đây.
Căn bản eventListener cú pháp
element.addEventListener("type-of-event", functionToExecute)
Bây giờ, hãy thay đổi văn bản freeCodeCampt thành màu xanh lam bằng cách sử dụng click eventListner
Đây là HTML mới của chúng tôi:
<div>
<p class="name">freeCodeCamp</p>
<button>Change Color</button>
</div>
Và đây là những gì nó trông giống như:
Lần này trong kịch bản của chúng tôi, chúng tôi cũng cần chọn nút (không chỉ văn bản freeCodeCamp). Đó là bởi vì không có JavaScript nào trong thẻ mở của nút của chúng tôi, điều này thật tuyệt.
Vì vậy, kịch bản của chúng tôi trông như thế này:
const name = document.querySelector(".name");
const btn = document.querySelector("button");
btn.addEventListener("click", function () {
name.style.color = "blue";
});
Chúng ta cũng có thể tách chức năng của mình hoàn toàn khỏi eventListener và chức năng của chúng tôi sẽ vẫn như cũ:
btn.addEventListener("click", changeColor);
function changeColor() {
name.style.color = "blue";
}
Cách xây dựng nút “Hiển thị thêm” và “Hiển thị ít hơn” với JavaScrpit
Một trong những cách tốt nhất để học là làm dự án, vì vậy hãy lấy những gì chúng ta đã học về onclick và “nhấp chuột” eventListner để xây dựng một cái gì đó.
Khi bạn truy cập một blog, bạn thường thấy các đoạn trích của các bài viết đầu tiên. Sau đó, bạn có thể nhấp vào nút “đọc thêm” để hiển thị phần còn lại. Hãy cố gắng làm điều đó.
Đây là HTML chúng tôi đang xử lý:
<article id="content">
<p>
freeCodeCamp is one of the best platforms to learn how to code.
freeCodeCamp has a detailed curriculum that will take you from zero to
hero in web development, software engineering, machine learning, and
more.
</p>
<p>
freeCodeCamp also has a YouTube channel containing over 1000 videos on
web development, software engineering, machine learning, data science,
freelance web development, database administration, and pretty much
anything related to tech. To get updates when videos are uploaded, you
need to subscribe to the channel and turn on notifications. You can also
follow freeCodeCamp on Twitter, where links to well written articles and
videos are tweeted daily.
</p>
<p>
Since no one has to pay to learn how to code on freeCodeCamp,
freeCodeCamp runs on voluntary donations from donors all around the
world in order to pay employees and maintain servers. If you are
generous enough consider joining the donors.
</p>
</article>
<button onclick="showMore()">Show more</button>
Đó là HTML đơn giản với một số thông tin về freeCodeCamp. Và có một nút chúng tôi đã đính kèm một onclick đến. Chức năng chúng tôi muốn thực hiện là showMore()mà chúng tôi sẽ viết sớm.
Không có CSS, đây là những gì chúng ta có:
Nó không quá xấu, nhưng chúng ta có thể làm cho nó trông đẹp hơn và hoạt động theo cách chúng ta muốn. Vì vậy, chúng tôi có một số CSS mà tôi sẽ giải thích bên dưới:
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #f1f1f1;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
article {
width: 400px;
background: #fff;
padding: 20px 20px 0;
font-size: 18px;
max-height: 270px;
overflow: hidden;
transition: max-height 1s;
text-align: justify;
margin-top: 20px;
}
p {
margin-bottom: 16px;
}
article.open {
max-height: 1000px;
}
button {
background: #0e0b22;
color: #fff;
padding: 0.6rem;
margin-top: 20px;
border: none;
border-radius: 4px;
}
button:hover {
cursor: pointer;
background: #1e1d25;
}
</style>
CSS đang làm gì?
Với bộ chọn phổ quát (*), chúng tôi sẽ xóa lề và phần đệm mặc định được gán cho các phần tử để chúng tôi có thể thêm phần lề và phần đệm của riêng mình.
Chúng tôi cũng đặt kích thước hộp thành hộp viền để chúng tôi có thể bao gồm phần đệm và đường viền trong tổng chiều rộng và chiều cao của các phần tử của chúng tôi.
Chúng tôi căn giữa mọi thứ trong phần thân bằng Flexbox và tạo cho nó một nền màu xám nhạt.
Của chúng ta <article> phần tử chứa văn bản có chiều rộng là 400pxnền trắng (#fff) và có phần đệm 20px ở trên cùng, 20 ở bên trái và bên phải và 0 ở dưới cùng.
Các thẻ đoạn văn bên trong nó có cỡ chữ là 18px và sau đó chúng tôi đã cung cấp cho chúng chiều cao tối đa là 270px. Do chiều cao tối đa của thành phần bài viết, tất cả văn bản sẽ không được chứa và sẽ tràn ra ngoài. Để khắc phục điều này, chúng tôi đặt tràn thành ẩn để không hiển thị văn bản đó lúc đầu.
Thuộc tính chuyển đổi đảm bảo rằng mọi thay đổi xảy ra sau 1 giây. Tất cả văn bản bên trong article được căn đều và có lề trên 20 pixel để nó không quá dính vào đầu trang.
Bởi vì chúng tôi đã loại bỏ lề mặc định, tất cả các đoạn văn của chúng tôi đã được đẩy lại với nhau. Vì vậy, chúng tôi đặt lề dưới là 16 pixel để tách chúng khỏi nhau.
Bộ chọn của chúng tôi, article.opencó tính chất là max-height đặt thành 1000px. Điều này có nghĩa là bất cứ lúc nào phần tử bài viết có một lớp open được gắn vào nó, chiều cao tối đa sẽ thay đổi từ 270px đến 1000px để hiển thị phần còn lại của bài báo. Điều này có thể thực hiện được với JavaScript – công cụ thay đổi cuộc chơi của chúng tôi.
Chúng tôi đã tạo kiểu cho nút của mình với nền tối và làm cho nó có màu trắng. Chúng tôi đặt đường viền của nó thành không để xóa đường viền mặc định của HTML trên các nút và chúng tôi đã cung cấp cho nó bán kính đường viền là 4px vì vậy nó có một đường viền hơi tròn.
Cuối cùng, chúng tôi đã sử dụng hover lớp giả trong CSS để thay đổi con trỏ nút thành con trỏ. Màu nền hơi thay đổi khi người dùng di chuột qua nó.
Chúng ta bắt đầu – đó là CSS.
Trang của chúng tôi bây giờ trông đẹp hơn:
Điều tiếp theo chúng ta cần làm là viết JavaScript để có thể xem phần còn lại của bài viết bị ẩn.
Chúng ta có một onclick thuộc tính bên trong thẻ mở nút của chúng tôi đã sẵn sàng để thực hiện một showMore() chức năng, vì vậy hãy viết chức năng.
Chúng tôi cần chọn bài viết của mình trước, vì chúng tôi phải hiển thị phần còn lại của nó:
const article = document.querySelector("#content");
Việc tiếp theo chúng ta cần làm là viết hàm showMore() để chúng tôi có thể chuyển đổi giữa xem phần còn lại của bài viết và ẩn nó.
function showMore() {
if (article.className == "open") {
// read less
article.className = "";
button.innerHTML = "Show more";
} else {
//read more
article.className = "open";
button.innerHTML = "Show less";
}
}
Chức năng đang làm gì?
chúng tôi sử dụng một if…else tuyên bố ở đây. Đây là một phần quan trọng của JavaScript giúp bạn đưa ra quyết định trong mã của mình nếu một điều kiện nhất định được đáp ứng.
Cú pháp cơ bản trông như thế này:
if (condition == "something") {
// Do something
} else {
// Do something else
}
Ở đây, nếu tên lớp của bài viết bằng open (nghĩa là chúng ta muốn thêm lớp open vào nó, lớp này được đặt chiều cao tối đa là 1000px trong CSS), thì chúng ta muốn xem phần còn lại của bài viết . Ngược lại, chúng tôi muốn bài viết trở lại trạng thái ban đầu nơi một phần của nó bị ẩn.
Chúng tôi làm điều này bằng cách gán cho nó một lớp mở trong khối khác, điều này làm cho nó hiển thị phần còn lại của bài viết. Sau đó, chúng tôi đặt lớp thành một chuỗi trống (không có) trong khối if, khiến nó trở về trạng thái ban đầu.
Mã của chúng tôi đang hoạt động tốt với quá trình chuyển đổi suôn sẻ:
Chúng tôi có thể tách HTML và JavaScript và vẫn sử dụng onclick, bởi vì onclick là JavaScript. Vì vậy, có thể viết phần này trong tệp JavaScript thay vì bắt đầu từ HTML.
button.onclick = function () {
if (article.className == "open") {
// read less
article.className = "";
button.innerHTML = "Show more";
} else {
//read more
article.className = "open";
button.innerHTML = "Show less";
}
};
Chúng tôi cũng có thể làm điều này bằng cách sử dụng eventListner:
<article id="content">
<p>
freeCodeCamp is one of the best platforms to learn how to code.
freeCodeCamp has a detailed curriculum that will take you from zero to
hero in web development, software engineering, machine learning, and
many more.
</p>
<p>
freeCodeCamp also has a YouTube channel containing over 1000 videos on
web development, software engineering, machine learning, data science,
freelance web development, database administration, and pretty more
anything related to tech. To get updates when videos are uploaded, you
need to subscribe to the channel and turn on notifications. You can also
follow freeCodeCamp on Twitter, where links to well written articles and
videos are tweeted daily.
</p>
<p>
Since no one has to pay to learn how to code on freeCodeCamp,
freeCodeCamp runs on voluntary donations from donors all around the
world in order to pay employees and maintain servers. If you are
generous enough consider joining the donors.
</p>
</article>
<button id="read-more">Show more</button>
const article = document.querySelector("#content");
const button = document.querySelector("#read-more");
button.addEventListener("click", readMore);
function readMore() {
if (article.className == "open") {
// Read less
article.className = "";
button.innerHTML = "Show more";
} else {
article.className = "open";
button.innerHTML = "Show less";
}
}
Chức năng của chúng tôi vẫn giữ nguyên!
Phần kết luận
Tôi hy vọng hướng dẫn này giúp bạn hiểu cách hoạt động của sự kiện nhấp chuột trong JavaScript. Chúng tôi đã khám phá hai phương pháp khác nhau ở đây, vì vậy bây giờ bạn có thể bắt đầu sử dụng chúng trong các dự án viết mã của mình.
Cảm ơn bạn đã đọc và tiếp tục mã hóa.
