Hướng dẫn javascript .click function - hàm javascript .click
Trong bài này chúng ta sẽ tìm hiểu sự kiện click trong Javascript, đây là sự kiện xảy ra khi nhấp chuột vào một đối tượng HTML nào đó. Sự kiện này áp dụng cho mọi thẻ HTML.sự kiện click trong Javascript, đây là sự kiện xảy ra khi nhấp chuột vào một đối tượng HTML nào đó. Sự kiện này áp dụng cho mọi thẻ HTML. Show
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.freetuts.net, không được copy dưới mọi hình thức. Click là một sự kiện rất quan trọng trong các ngôn ngữ lập trình hướng sự kiện. Khi người dùng muốn thao tác với những chức năng trên phần mềm thì phải sử dụng chuột để click. Lúc này ta sẽ bắt sự kiện đó và trả kết quả về cho user. 1. Khi nào sử dụng sự kiện click trong Javascript?Ta cần bắt sự kiện click khi muốn xây dựng một chức năng nào đó, và chức năng này sẽ xảy ra khi người dùng click vào một đối tượng nào đó. Ví dụ bạn xây dựng chức năng hiển thị danh sách sinh viên, bạn xây dựng một button Hiển Thị Sinh Viên, nếu người dùng click vào button này thì sẽ gọi Ajax để lấy danh sách và trả kết quả về cho người dùng.Hiển Thị Sinh Viên, nếu người dùng click vào button này thì sẽ gọi Ajax để lấy danh sách và trả kết quả về cho người dùng. Bài viết này được đăng tại [free tuts .net] 2. Cú pháp sự kiện click trong JavascriptChúng ta có hai cách để bắt sự kiện click trong js, thứ nhất là gắn trực tiếp trên thẻ HTML, và thứ hai là sử dụng thông qua thuộc tính onclick của các đối tượng DOM. Cách 1: Gắn trực tiếp trên thẻ HTMLTrong đó 6 là thẻ HTML bạn cần bắt sự kiện click, còn 7 chính là hàm sẽ được thực thi khi sự kiện click xảy ra. Ví dụ: Hiển thị thông báo khi người dùng click vào một button.: Hiển thị thông báo khi người dùng click vào một button. Cách 2: Gắn sự kiện click vào đối tượng DOMMình sẽ đặt id cho thẻ input trên, sau đó sử dụng các hàm hỗ trợ DOM để gọi đến thẻ này, sau đó gắn một hàm vào thuộc tính click. 3. Gán nhiều hành động cho sự kiện click cùng lúcĐối với sự kiện click trong js, bạn có thể gán nhiều hành động vào nhiều thời điểm khác nhau. Tuy nhiên, nó chỉ nhận hành động mà bạn gán cuối cùng thôi nhé. Ví dụ: Gọi đến hai thông báo khi xảy ra sự kiện click.: Gọi đến hai thông báo khi xảy ra sự kiện click. Trong ví dụ trên thì chỉ có hàm thứ hai là được gọi. Nếu bạn muốn gọi cả hai hàm tách biệt thì tốt nhất định nghĩa hai hàm riêng, sau đó gắn chung một lần vào sự kiện click. Trên là nhữn chia sẻ về sự kiện click trong javascript. Nếu có vướng mắc gì thì hãy để lại bình luận. Hay nếu bài viết có sai sót thì hãy đóng góp giúp mình nhé. Trong bài này mình sẽ giới thiệu các sự kiện trong Javascript. Sự kiện hay còn lại là event, là một tác động nào đó lên các đối tượng HTML thông qua cấu trúc DOM. Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.freetuts.net, không được copy dưới mọi hình thức. Đáng lẽ bài này mình sẽ tiếp tục giới thiệu với các bạn DOM, nhưng nhận thấy việc học mà không thực hành thì rất nhàm chán và khó nhớ bài. Vì vậy, trong bài này mình sẽ giới thiệu về các sự kiện js. Sau bài này chúng ta có thể làm được nhiều ví dụ hơn và mình cũng sẽ không mất quá nhiều thời gian giải thích nữa.sự kiện js. Sau bài này chúng ta có thể làm được nhiều ví dụ hơn và mình cũng sẽ không mất quá nhiều thời gian giải thích nữa. Trước tiên chúng ta hãy tìm hiểu xem sự kiện trong JS là gì đã nhé. 1. Sự kiện trong javascript là gì?Sự kiện là một hành động tác động lên các đối tượng HTML, qua đó ta có thể bắt được sự kiện và yêu cầu javascript thực thi một chương trình nào đó. Bài viết này được đăng tại [free tuts .net] Mỗi sự kiện chúng ta có thể gán nhiều hành động. Ví dụ bạn có một sự kiện là tết âm lịch, thì bạn sẽ có những hành động trong sự kiện đó là mua đồ mới, dọn dẹp nhà cửa, mua bao lì xì, ..tết âm lịch, thì bạn sẽ có những hành động trong sự kiện đó là mua đồ mới, dọn dẹp nhà cửa, mua bao lì xì, .. Xét về mặt thực tế thì ta có dụ thế này: Giả sử bạn xây dựng một form đăng ký tài khoản và bạn muốn bắt sự kiện khi người dùng CLICK vào button đăng ký thì hiện những hành động như:: Giả sử bạn xây dựng một form đăng ký tài khoản và bạn muốn bắt sự kiện khi người dùng CLICK vào button đăng ký thì hiện những hành động như:
Như vậy, bạn cần phải nhớ rằng mỗi sự kiện trong JS thì ta có thể gán nhiều hành động khác nhau, và gán bao nhiêu hành động thì phụ thuộc vào từng chức năng cụ thể. Ví dụ: Giả sử mình có một thẻ input có id là 'clickme', bây giờ mình viết sự kiện khi click vào ô input thì xuất ra một thông báo.: Giả sử mình có một thẻ input có id là 'clickme', bây giờ mình viết sự kiện khi click vào ô input thì xuất ra một thông báo. document.getElementById('clickme').onclick = function(){ alert('Bạn đã click vào nút này!'); }; 2. Cách thêm / bắt sự kiện trong JavascriptChúng ta có hai cách cơ bản để bắt sự kiện, thứ nhất là code trực tiếp trong thẻ HTML, thứ hai là sử dụng javascript như chúng ta đã làm ở phần 1. Cách 1: Bắt sự kiện trực tiếp trong thẻ HTMLGiả sử mình có một đoạn mã HTML như sau: Bây giờ ta chỉ cần định nghĩa môt hàm có tên là 8 là được. function do_something(){ alert('Bạn đã click vào nút này!'); } Cách 2: Bắt sự kiện cho một thẻ HTML bằng javascriptĐể thêm sự kiện bằng Javascript thì bạn sẽ sử dụng cú pháp như sau: elementObject.eventName = function(){ // do something }; Trong đó:
Ví dụ: Thêm sự kiện click cho button có 9 Cách 3: Bắt sự kiện cho nhiều thẻ HTML bằng JavascripTrong javascript, trường hợp bạn muốn bắt sự kiện trên nhiều thẻ HTML thì có thể sử dụng vòng lặp nhé. Cú pháp như sau:: 0 Ví dụ: Thêm sự kiện khi click vào tất cả các thẻ a có class="show" thì thông báo lên câu chào.: Thêm sự kiện khi click vào tất cả các thẻ a có class="show" thì thông báo lên câu chào. 1 Như vậy trong đề bài này muốn khi click vào thẻ 0 đầu tiên và thẻ 0 thứ 3 thì sẽ thông báo câu chào. 0 đầu tiên và thẻ 0 thứ 3 thì sẽ thông báo câu chào. 2 3. Các sự kiện (Events) trong javascrptSau khái niệm sự kiện là gì thì chắc hẳn bạn đang nôn nóng muốn biết danh sách các sự kiện trong javascript rồi phải không nào? Ok ta bắt đầu ngay luôn.sự kiện là gì thì chắc hẳn bạn đang nôn nóng muốn biết danh sách các sự kiện trong javascript rồi phải không nào? Ok ta bắt đầu ngay luôn. Trong Javascript có rất nhiều sự kiện, và mỗi đối tượng HTML thì lại có những sự kiện khác nhau nên mình chỉ liệt kê được những sự kiện thông dụng nhất thôi nhé.có những sự kiện khác nhau nên mình chỉ liệt kê được những sự kiện thông dụng nhất thôi nhé. Bảng các sự kiện thường dùng trong javascript.
Ok bây giờ ta sẽ làm một số ví dụ để các bạn thực hành nhé. 4. Các ví dụ về xử lý sự kiện trong javascriptBây giờ ta sẽ thực hành một vài ví dụ nhé. Ví dụ 1: Viết chương trình gồm một ô input và một thẻ div dùng để hiển thị nội dung (giá trị của ô input) khi người dùng gõ vào ô input: Viết chương trình gồm một ô input và một thẻ div dùng để hiển thị nội dung (giá trị của ô input) khi người dùng gõ vào ô input Vì đề bài yêu cầu khi nhập dữ liệu vào ô input thì hiển thị nội dung bên trong thẻ 4 nên ta có thể sử dụng sự kiện 5. Thứ hai nữa là chúng ta sẽ sử dụng các hàm DOM Element để truy xuất các đối tượng HTML. 3 Nếu như bài này bạn sử dụng sự kiện 6 hoặc 7 thì sẽ có kết quả sai. Lý do là những sự kiện này xảy ra khi bạn nhấn phím xuống nên nó sẽ lấy giá trị chưa được cập nhật. Còn sự kiện 5 xảy ra khi bạn nhả phím ra nên nó sẽ lấy được giá trị mới. Ví dụ 2: Viết chương trình khi người dùng copy nội dung của website thì thông báo là bạn đã copy thành công Viết chương trình khi người dùng copy nội dung của website thì thông báo là bạn đã copy thành công Bài này quá dễ phải không nào. Trong danh sách các sự kiện trên thì có sự kiện oncopy nên ta sẽ sử dụng nó để giải bài này. 4 Ví dụ 3: Viết chương trình tính tổng của hai số nhập vào (tính tự động)Viết chương trình tính tổng của hai số nhập vào (tính tự động) Bài này ta phải tạo 3 ô input và gán sự kiện 5 cho 2 ô input đầu tiên, trong sự kiện này sẽ thực hiện tính tổng của hai ô và in kết quả vào ô input thứ 3. 5 5. Lời kếtNhư vậy là mình đã giới thiệu xong danh sách các sự kiện thường dùng trong Javascript. Qua bài này bạn phải hiểu được cơ chế hoạt động của sự kiện, để từ biết được nên gán hành động nào vào sự kiện nào. Làm việc với Javascript không khó, cái khó là bạn phải hiểu cơ chế hoạt động của JS nhé. |