• fans
  • 1036 reader
  • followers
Chương 3 – Sự kiện
  • Tutorial Details
  • Độ khó: Căn bản
  • Thời gian: 30 phút
  • File size: < 1 Mb
  • Yêu cầu: Phù hợp cho tất cả các đối tượng lập trình viên
Có 8 bài viết trong series jQuery căn bảnHiển thị

JavaScript có một số cách được lập sẵn để phản ứng với những tương tác của người dùng và những sự kiện khác. Để làm cho trang web năng động và tương tác tốt, chúng ta cần phải tận dụng chức năng này, để vào những thời điểm phù hợp, chúng ta có thể sử dụng những kỹ thuật jQuery đã học và sắp học. Bạn cũng có thể làm những việc sau với anh bạn thân JavaScript, nhưng jQuery nâng cao và mở rộng những cơ chế quản lý sự kiện cơ bản để giúp nó có cú pháp đẹp hơn, tiết kiệm thời gian hơn và tất nhiên cũng mạnh mẽ hơn.

Thực hiện tác vụ khi trang được load

Chúng ta đã biết cách làm cho jQuery phản ứng như thế nào khi trang web được load. Bộ quản lý sự kiện $(document).ready() có thể được dùng để kích hoạt một hàm nào đó, nhưng chúng ta có thể bàn thêm một chút về nó.

Định thời gian thực thi code

Trong chương 1, chúng ta đã biết rằng $(document).ready() là cách của jQuery thực hiện các tác vụ tương đương với cách mà JavaScript thực hiện tác vụ với onload event được lập sẵn. Thực tế thì hai cách này đều có tác dụng giống nhau, nhưng chúng lại kích hoạt tác vụ ở những thời điểm hơi khác nhau.

Sự kiện window.onload được kích hoạt khi mà trình duyệt đã hoàn toàn load xong tài liệu. Điều này có nghĩa rằng mọi phần tử trên trang đã sẵn sàng để được thao tác bởi JavaScript. Đây chính là một điểm thuận lợi để chúng ta viết code mà không phải lo lắng về trật tự load.

Mặt khác, bộ quản lý đăng ký sử dụng $(document).ready() được kích hoạt khi DOM hoàn toàn sẵn sàng để sử dụng. Điều này cũng có nghĩa rằng mọi thành phần có thể được truy cập bởi code của chúng ta, nhưng không nhât thiết là tài liệu liên quan đã được download. Ngay sau khi HTML được download và chuyển qua cây DOM, code có thể được thực thi.

Lưu ý: Để đảm bảo rằng trang web vẫn có định dạng trước khi code JavaScript được thực hiện, người ta thường đặt <link rel=”stylesheet”> đằng trước thẻ <script> trong phần <head> của tài liệu.

Ví dụ chúng ta có một trang thư viện hình ảnh, trang đó bao gồm nhiều hình có dung lượng lớn mà chúng ta có thể ẩn, hiện, di chuyển hoặc thao tác với jQuery. Nếu bây giờ chúng ta thiết lập giao diện sử dụng sự kiện onload, thì người dùng sẽ phải đợi cho đến khi mọi tấm hình đã được download trước khi họ có thể sử dụng trang web. Hoặc tệ hơn, nếu những cách xử lý chưa được gán cho các phần tử có cách xử lý mặc định riêng như là các đường liên kết, thì việc tương tác với người dùng sẽ tạo ra những điều không mong đợi. Tuy nhiên khi chúng ta sử dụng $(document).ready(), thì giao diện sẽ sẵn sàng để sử dụng sớm hơn rất nhiều với những cách xử lý mong muốn.

Lưu ý: Cách sử dụng $(document).ready() luôn được ưa chuộng hơn là sử dụng bộ quản lý onload, nhưng chúng ta cũng nên nhớ rằng bởi vì những tệp tin hỗ trợ có thể chưa được load, cho nên những thuộc tính như độ cao và chiều rộng của tấm hình có thể chưa có sẵn trong lúc này. Nếu thực sự cần thiết, chúng ta có thể sử dụng bộ quản lý onload (hoặc hay hơn có thể sử dụng jQuery để thiết lập bộ quản lý cho load event). Hai cách này hoàn toàn tương thích với nhau.

Nhiều đoạn mã trên cùng một trang

Cách thường dùng để đăng ký bộ quản lý sự kiện thông qua JavaScript là gán một hàm cho thuộc tính tương ứng của phần tử DOM. Giả sử như chúng ta đã định nghĩa một hàm:

function doStuff() {
//làm một cái gì đó
}

Sau đó chúng ta có thể gán nó trong phần code HTML như sau:
<body onload=”doStuff();>

Hoặc chúng ta cũng có thể gán nó trong code JavaScript:
window.onload = doStuff;
Hai cách này đều thực thi hàm khi trang được load. Nhưng điểm mạnh của cách thứ hai nằm ở chỗ những cách xử lý được tách rời khỏi mã HTML.

Lưu ý: Bạn nên chú ý là khi chúng ta gán một hàm làm bộ quản lý, chúng ta sử dụng tên hàm nhưng bỏ hai dấu ngoặc đơn. Nếu có hai dấu ngoặc, hàm đó sẽ được gọi ngay lập tức. Còn nếu không có dấu ngoặc, tên hàm chỉ đơn giản được định danh, và có thể được dùng để gọi sau này.

Nếu chỉ với một hàm thì cách này cũng sử dụng được. Nhưng nếu chúng ta có thêm một hàm nữa:

function doOtherStuff() {
//làm một tác vụ khác
}

Sau đó chúng ta cũng thử chạy hàm này khi trang được load window.load = doOtherStuff;

Bạn sẽ thấy hàm thứ hai sẽ thắng hàm đầu tiên. Thuộc tính .onload chỉ có thể một lúc chứa một hàm tham chiếu, cho nên chúng ta không thể thêm vào cách xử lý hiện tại. Cơ chế $(document).ready() giải quyết trường hợp này rất êm xuôi. Mỗi một lần phương thức được gọi, nó sẽ thêm một hàm mới vào danh sách cách xử lý nội bộ, nên khi trang được load, tất cả các hàm sẽ được thực hiện. Các hàm sẽ thực hiện theo thứ tự mà chúng được đăng ký.

Cách viết tắt cho code ngắn gọn

Kết cấu $(document).ready() thực chất là gọi phương thức .ready() cho một đối tượng jQuery mà chúng ta đã tạo ra từ phần tử DOM. Hàm $() cung cấp cách viết tắt cho chúng ta bởi vì nó là một tác vụ phổ biến. Khi được gọi mà không có tham số, thì hàm này sẽ hoạt động như là khi tài liệu đã được thông qua. Cho nên thay vì chúng ta viết:

$(document).ready(function() {
//code ở đây
});

Chúng ta có thể viết

$().ready(function() {
//code ở đây
});

Hơn nữa, hàm $() có thể lấy một hàm khác làm tham số cho nó. Cho nên khi chúng ta làm như thế, jQuery sẽ tiến hành một lệnh gọi ẩn đến .ready(), do vậy cách viết như sau cũng cho kết quả tương tự

$(function() 
//code ở đây{
});

Tất nhiên cách viết trên ngắn gọn hơn, nhưng tôi khuyên bạn nên sử dụng kiểu viết đầy đủ để cho rõ ràng là đoạn code này có tác dụng gì.

Cùng làm việc với những thư viện khác

Trong một vài trường hợp chúng ta cần phải sử dụng nhiều hơn một thư viện JavaScript trên cùng một trang. Bởi vì nhiều thư viện cùng sử dụng ký hiệu nhận dạng $ do nó ngắn và thuận tiện, cho nên chúng ta phải có cách nào đó để tránh xảy ra xung đột giữa những tên này.

Thật may mắn khi mà jQuery cung cấp một phương thức gọi là .noConflict() để trả ký hiệu nhận dạng $ về cho các thư viện khác. Cách sử dụng phương thức .noConflict() thường thì như sau:

<script src="prototype.js" type="text/javascript"></script>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript"> 
jQuery.noConflict();
</script>
<script src="myscript.js" type="text/javascript"></script>

Đầu tiên thư viện Prototype được gọi, đây cũng là một thư viện JavaScript . Sau đó là bản thân jQuery được gọi và nó sẽ sử dụng $ cho nó. Tiếp theo phương pháp .noConflict() được gọi để giải phóng $, quyền điều khiển bây giờ lại quay trở về với thư viện được gọi đầu tiên, ở đây là Prototype. Bây giờ code của chúng ta có thể sử dụng cả hai thư viện, nhưng bất cứ khi nào chúng ta muốn sử dụng một phương thức jQuery, chúng ta cần phải sử dụng jQuery thay vì dấu $ làm ký hiệu nhận dạng.

Phương thức .ready() còn có một điểm nữa có thể giúp chúng ta trong trường hợp này. Hàm gọi ngược mà chúng ta đã chuyển cho nó có thể nhận một tham số đơn: chính là bản thân đối tượng jQuery. Điều này cho phép chúng ta đặt lại tên cho nó mà không sợ bị xung đột.

jQuery(document).ready(function($) {
//trong đây, chúng ta có thể sử dụng $ bình thường.
});

Hoặc sử dụng kiểu viết tắt chúng ta đã học ở trên

jQuery(function($) {
//code sử dụng $
});
Sự kiện cơ bản

Có nhiều lúc chúng ta muốn thực hiện một tác vụ nào đó vào những thời điểm mà không chỉ là lúc trang được load. Cũng như với JavaScript cho phép chúng ta đón chặn sự kiện load trang với <body onload=”> hoặc window.onload. Nó cung cấp điểm neo cho những sự kiện được người dùng khởi xướng như: nhấp chuột (onclick), trường nhập liệu bị thay đổi (onchange) và cửa sổ thay đổi kích thước (onresize). Khi được gán trực tiếp vào các phần từ trong DOM, những cách này cũng có mặt hạn chế giống như những điều chúng ta đã nói về onload. Cho nên, jQuery cho chúng ta những cách cải tiến hơn để xử lý những sự kiện này.

Bộ nút thay đổi màu chữ

Để minh hoạ cho những cách quản lý sự kiện, giả sử chúng ta muốn có một trang web có thể thay đổi màu sắc các đoạn văn tuỳ theo ý của người dùng. Chúng ta sẽ cho phép người dùng nhấp chuột vào 3 nút để thay đổi màu sắc theo kiểu Mặc định, Màu đỏ và Màu Xanh. Khi nhấn vào nút Màu Đỏ, thì nội dung sẽ chuyển thành màu đỏ, khi nhấn vào nút Màu Xanh thì nội dung sẽ thành màu xanh và cuối cùng khi nhấn vào nút Mặc định thì nội dung quay về trạng thái ban đầu.

Trong thực tế, người làm web có kinh nghiệm luôn áp dụng nguyên tắc nâng cao luỹ tiến. Nếu JavaScript không được bật thì nút thay đổi màu sắc phải bị ẩn đi, còn không thì vẫn phải hoạt động bằng các đường liên kết để cho ra những phiên bản khác nhau của trang. Trong tutorial này, chúng ta giả sử người dùng có bật JavaScript. Dưới đây là code HTML của nút thay đổi màu sắc của chúng ta:

<div id="switcher">
            <h3>Đổi định dạng</h3>
            <div class="button selected" id="switcher-default">Mặc Định</div>
            <div class="button" id="switcher-red">Màu đỏ</div>
            <div class="button" id="switcher-green">Màu Xanh</div>
        </div>
        <div class="text">
            <h1>This is the first para</h1>
            <p class="chapter">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
            Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. 
            Donec eu libero sit amet quam egestas semper.
            </p>
            <h1>This is the second para</h1>
            <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
            Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. 
            Donec eu libero sit amet quam egestas semper. 
            </p>
        </div>

Với một chút CSS trang web mẫu của chúng ta sẽ có dạng như hình dưới đây.

jquery event

Để bắt đầu, chúng ta thử với nút Màu Xanh. Bạn cần phải viết một chút code CSS để chỉ cho nó biết sẽ thay đổi như thế nào:

body.green .text{
            color: green;
        }

Mục đích của chúng ta sẽ là thêm một class=’green’ vào thẻ <body>. Điều này cho phép stylesheet tái định dạng trang web sao cho phù hợp. Với kiến thức bạn học được trong chương 2, chúng ta biết sẽ phải viết code như thế nào:

$('body').addClass('green');

Tuy nhiên, lần này chúng ta muốn khi người dùng nhấp chuột vào nút thì class=’green’ mới được thêm vào chứ không phải như trước là khi trang được load. Để làm được việc này, chúng ta sẽ cần đến phương thức .bind(). Phương thức này cho phép chúng ta cụ thể hoá bất cứ một sự kiện JavaScript nào và gán một cách xử lý cho nó. Trong trường hợp này sự kiện được gọi là click và cách xử lý là một hàm bao gồm một dòng code như ở trên:

$(document).ready(function() {
$('#switcher-green').bind('click', function() {
$('body').addClass('green');
});
});

Nếu bạn lưu lại và xem thử trên trình duyệt, khi bạn nhấp chuột vào nút màu xanh, nội dung của nó sẽ biến thành màu xanh lá cây.

jquery event

Đó là tất cả những gì bạn cần phải làm để gán một sự kiện. Thế mạnh của phương thức .ready() cũng được sử dụng ở đây. Phương thức .bind() được gọi nhiều lần nhưng vẫn hoạt động tốt và nhiều cách xử lý được thêm vào cùng một sự kiện khi cần thiết. Tất nhiên đây không phải là cách hay nhất hoặc hiệu quả nhất để hoàn hành tác vụ này. Ở phần tiếp theo của tutorial, chúng ta sẽ mở rộng và cải tiến mã của chúng ta để chúng ta có thể tự hào về nó.

Làm các nút khác hoạt động

Bây giờ chúng ta đã có nút màu xanh hoạt động như ý, việc tiếp theo chúng ta phải làm là cho hai nút còn lại là Mặc định và Màu Đỏ cũng có thể hoạt động được. Vấn đề khá là đơn giản, chúng ta sẽ sử dụng phương thức .bind() để thêm vào một bộ xử lý click cho mỗi một nút, thêm hoặc bỏ class khi cần. Chúng ta sẽ viết mã như sau:

$(document).ready(function() {
            $('#switcher-default').bind('click', function() {
			$('body').removeClass('red').removeClass('green'); 
});
            $('#switcher-red').bind('click', function(){
                $('body').addClass('red').removeClass('green');                
            });
            $('#switcher-green').bind('click', function() {
                $('body').addClass('green').removeClass('red');
            });
        });

Trong file stylesheet bạn phải có luật sau

body.red .text {
color: red;
}

Với đoạn mã ở trên chúng ta đã tiến hành những việc như sau:

  1. 1.Nếu người dùng nhấn vào thẻ div với ID #switcher-default thì sẽ bỏ cả hai class là red và green đi.
  2. 2.Nếu người dùng nhấn vào thẻ div với ID #switcher-red thì chúng ta sẽ thêm class=’red’ và bỏ class=’green’ đi.
  3. 3.Tương tự như bước 2 nhưng bỏ class=’red’ và thêm class=’green’.

Và bây giờ khi nhấn vào nút Màu Đỏ thì chữ sẽ được tô thành màu đỏ

Bộ xử lý sự kiện ngữ cảnh

Nút thay đổi màu sắc của chúng ta đã làm việc như mong muốn, nhưng người dùng không biết được là nút nào đang bị bấm. Cách chúng ta sẽ làm là thêm class=’selected’ cho nút nào đang được chọn và bỏ class đó đi ở những nút không được nhấp. Chúng ta chỉ đơn giản làm cho nút đang được chọn được tô đậm hơn một chút.

.selected {
font-weight: bold;
}

Chúng ta cũng có thể làm tương tự như cách đã làm ở trên bằng cách gọi mỗi nút bằng ID riêng và thêm và bỏ class nếu cần. Nhưng thay vào đó, chúng ta có thể tìm hiểu thêm một giải pháp khác hay hơn và linh động hơn. Nó sẽ sử dụng ngữ cảnh mà bộ xử lý sự kiện đang hoạt động.

Bất cứ khi nào một bộ xử lý sự kiện được kích hoạt, thì từ khoá this đại diện cho phần tử DOM được gán một kiểu xử lý. Ở những phần trước bạn cũng đã biết rằng hàm $() có thể lấy một phần tử DOM làm tham số cho nó. Bằng cách viết $(this) trong bộ xử lý sự kiện, chúng ta tạo ra một đối tượng jQuery tương ứng với phần tử DOM, và chúng ta có thể thao tác với nó như là chúng ta đã chọn nó bằng bộ chọn CSS. Do đó chúng ta có thể viết

$(this).addClass('selected');

Chèn dòng code này vào cả 3 bộ xử lý nó sẽ thêm class=’selected’ mỗi khi nút được nhấn. Để loại bỏ class ở những nút khác, chúng ta có thể tận dụng chức năng vòng lặp ẩn của jQuery để có:

$('#switcher .button').removeClass('selected');

Khi bạn chèn dòng code trên vào code jQuery của bạn, nó sẽ loại bỏ hết các class ở tất cả các thẻ div có class=’button’.

$(document).ready(function() {
            $('#switcher-default').bind('click', function() {
               $('body').removeClass('red').removeClass('green');
                $('#switcher .button').removeClass('selected');
                $(this).addClass('selected')
            });
            $('#switcher-red').bind('click', function(){
                $('body').addClass('red').removeClass('green');
                $('#switcher .button').removeClass('selected');
                $(this).addClass('selected');                
            });
            $('#switcher-green').bind('click', function() {
                $('body').addClass('green').removeClass('red');
                $('#switcher .button').removeClass('selected');
                $(this).addClass('selected')
            });
        });
jquery event

Demon Warlock Website facebook twitter user_email

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á.

  • Vinh Tran

    Thanks.Bài viết của tác giả rất chi tiết .
    Nhưng mọi người cho hỏi tí, tại sao mình chỉ đọc được đến phần “Bộ xử lí sự kiện ngữ cảnh” là hết vậy.

  • Nguyen Thien Hong Bao

    Sao em không đọc được hết bài

  • Trung Ngo

    Bài viết thực sự là rất hay, thx bác DW nhiều !

  • hoangtk401

    Bác DW có file pdf chương này không, gửi cho e vs, thanks bác nhiều nhé ^^

  • Hoàng Dinh

    Việt Nam giành độc lập. do ai? -> là Hồ chủ tịch.
    Tớ thiết kế web ngày càng giỏi hơn. -> do anh DW đó!
    Các bạn thì sao????????

  • Rain

    cảm ơn tác giả về bài viết, đây là lần đầu tiên mình đến với izwebz.com , cảm giác ban đầu rất tốt, mình khâm phục những các nhân và tổ chức phi lợi nhuận

  • chan the

    sao cái phần Ủy thác sự kiện khó hiểu thế,

  • dung

    mà như thế nào ý càng tối giản càng thiếu.Có mỗi chữ Mac Dinh là font-weight còn cái khác không.sau thỳ chọn cái Mac Dinh thì không remove máy cái màu đi là sao

  • dung

    mấy anh ơi khi em chọn vào nút thì chữ nó có đậm nhưng khi chọn nút khác cái nút trước nó vẫn đậm sao nó không remove vậy

    • Rain

      Sao kì vậy , bạn kiểm tra xem code:
      $(‘#switcher .button’).removeClass(‘selected’);
      bạn gõ chính xác chưa, nếu mấy dòng này có sai xót gì thì nút bạn nhấn trước đó ko bị remove đâu, mà có thể bạn đặt tên “class” khi định nghĩa css ko trùng khớp với tên “class” khi bạn gọi jQuery

  • Thúy Lương

    Anh Demon ơi, anh có file pdf của bài này ko anh ? Share cho tụi e nhé vì copy từ bài viết trên web code nhỏ, đọc ko rõ anh ạ. Thanks anh :)

  • http://izwebz.com vannon

    anh DW oi! ở phần “bộ nút thay đổi màu chữ ấy” em tự làm không chạy được coppy của anh cũng không chạy được không có nút button nào đâu mà click. em tự tạo nút button rồi đặt id cho nó mà vần click khong ra kết quả như anh
    ! vi dụ trên anh nói rõ hơn được không có lẽ e không phải là người duy nhất không hiểu đâu!.

    • Harry

      Ở đây là tạo 1 thẻ div để thay thế cho 1 button, đâu cần tạo 1 button đâu. Bạn kiểm tra xem trong file .css đã style cho các class .red, .green chưa. Chúc thành công !

  • Tony

    Bài viết rất hay .. giá như có thêm Clip minh họa sẽ dễ hiểu và sinh động hơn :)
    Tác giả có thể cập nhật thêm clip minh họa cho các phần trên được không ?
    Cám ơn

  • Simon

    Bản thân đã test rất kỹ: khi thêm dòng if($(event.target).is(‘.button’)) thì event.stopPropagation(); vẫn hoạt động rất tốt, nó vẫn chặn được bong bóng sự kiện, chẳng có nút nào bị biến mất khi click cả. Tại sao ở ví dụ trên bài viết lại nói rằng các nút sẽ biến mất sau khi click vào ??? Ko hỉu thật sự !

    • HuyCan

      Bài viết trên mình làm thành công , nhưng cái comment bạn nói gì thì mình không hiểu gì cả, bạn có thể nói rõ hơn không.

  • Simon

    đến phần ủy thác sự kiện sao mình thấy rối quá. Bài viết giải thích khó hiểu quá.

    • hien

      uhm, mình cũng không hiểu phần này, hy vọng có video nhe a DW

  • QuaiHiepMienTay

    Bài nào của anh DW cũng hay hêt. Đặc biệt là nó rất dễ hiểu. Nhưng tìm mãi ko thấy cái quảng cáo nào hết làm sao click đây anh.

  • hoang anh

    Chào a DW. Em làm phần “Bộ nút thay đổi màu chữ” giống của anh mà ko đc. 3 cái thẻ div đó có hiện ra cái nút để click đâu anh? Anh giúp em với!

  • supper mario

    mệt thật mới tới đây thôi ma đã thấy oải rồi,nhưng công nhận viết rất hay chứ đọc của người khác chắc bỏ ngay từ đầu rồi …

  • dangkhoa

    sao ko co chuong 1 chuòng 2 vậy mấy bác

  • Thoi

    phần 3 còn dang dở vậy anh?

  • http://www.dramove.co.cc Lam Ha

    Link download chương 3 nè mọi người http://www.mediafire.com/?j2neh9k97ywae6u mình chỉ copy và past thôi rồi chỉnh chút thôi nên không được gọn gàng lắm, có j bỏ qua :”>. Mọi người giúp đở nhau khi anh DW vắng mặt nhá!

    • Smile

      Sao down về thì open ko được, flie không tồn tại

  • http://www.google.com.vn nguyenth

    anh ơi, sao anh ko viết nốt chương 3 đi! Phần này khá hay mà sao anh ko viết cho đầy đủ!

  • nguyenlong

    a ah!e dang trong quá trình học về web nên những tài liệu a cung cấp rất tốt.Tuy nhiên e muốn a cho e xin những tài liệu về javaScript,Photoshop…được không tại e đang rất cần cho công việc của e đó. Mong a giúp đỡ e nhé gửi qua email của e đó longnguyen011085@gmail.com. Thank a nhiều nhé!

  • QN89

    Anh DW cho em hỏi vòng lặp jQuery mà anh đề cập là nó chạy như thế nào ạ ? em ko hình dung dc , trong đầu đến 2 – 3 cái giả thuyết , anh giải thích giùm em chỗ này được ko ạ .

    Với lại ở phần ủy thác sự kiện , cái event.taget với this nó chẳng phải là 1 sao ?? còn nữa , tại sao dùng .stopPropagation() lại ko ngăn bubble được ạ ?? vậy bản chất chỗ hàm is là j . em k hiểu cái này . Anh có cuốn ebook nào giới thiệu để em tìm hiểu luôn ạ .

    Thanks anh

    • QN89

      Đã thông suốt phần này . chak do ban nãy đọc nhìu quá nên não bị quá tải . ^^ thanks anh

    • QN89

      ah mà code phần này anh viết sai nè
      $(document).ready(function() {
      $(‘#switcher’).click(function(event) {
      if (!$(event.target).is(‘.button’)) {
      $(‘#switcher .button’).toggleClass(‘hidden’);
      }
      });
      $(‘#switcher .button’).click(function(event) {
      if($(event.target).is(‘.button’)) {
      $(‘body’).removeClass();
      if (this.id == ‘switcher-red’) {
      $(‘body’).addClass(‘red’);
      } else if (this.id == ‘switcher-green’) {
      $(‘body’).addClass(‘green’);
      }
      $(‘#switcher .button’).removeClass(‘selected’);
      $(this).addClass(‘selected’);
      }
      });
      });

      phần this.id phải đổi thành evevt.target.id mới đúng .

      • A Kid

        Kid ko hiểu lắm về phần này, tại đoạn code $(‘#switcher .button’) thì cái event.target của nó lúc mới nhận thì sẽ là button, sau đó nó sẽ nổi lên div#switcher. Vậy thì kid nghĩ là:
        1. Không cần check cái event.target phải là .button thì mới thực hiện, ta cứ cho nó thực hiện.
        2. Do dùng event.stopProgapation nên sự kiện click sẽ không nổi lên div#switcher được, vì thế nó sẽ không làm ẩn hiện các button bằng hàm:
        $(‘#switcher’).click(function(event) {
        if(event.target == this) {
        $(‘#switcher .button’).toggleClass(‘hidden’)
        }

        mà anh DW có viết là
        “Khi chúng ta nhấp chuột vào một nút, cả nhóm sẽ bị đóng lại như trước khi chúng ta gọi .stopPropagation(). Bộ xử lý cho việc ẩn hiện bộ nút bây giờ được gán cho thành phần giống như các nút, cho nên nếu bạn chỉ ngăn chặn bong bóng sự kiện sẽ không chặn được việc thay đổi class bị kích hoạt”

        Thật sự không hiểu, các bạn và a DW có thể giải thích dùm kid được không :) Cảm ơn rất nhiều.

        • A Kid

          :) Đọc lại vài lần thì thấy có thể đoạn code của a DW viết nhầm:

          $(document).ready(function() {
          $(‘#switcher’).click(function(event) {
          if (!$(event.target).is(‘.button’)) {
          $(‘#switcher .button’).toggleClass(‘hidden’);
          }
          });
          $(‘#switcher .button’).click(function(event) {
          if($(event.target).is(‘.button’)) {
          $(‘body’).removeClass();
          if (this.id == ‘switcher-red’) {
          $(‘body’).addClass(‘red’);
          } else if (this.id == ‘switcher-green’) {
          $(‘body’).addClass(‘green’);
          }
          $(‘#switcher .button’).removeClass(‘selected’);
          $(this).addClass(‘selected’);
          }
          });
          });

          Dòng
          $(‘#switcher .button’).click(function(event)
          Có thể sửa lại là:
          $(‘#switcher’).click(function(event) <=== Do đang nhắm tới phần tử bao ngoài (để ủy thác vào trong)

          Và dòng
          if (this.id == 'switcher-red') {
          $('body').addClass('red');
          } else if (this.id == 'switcher-green') {
          $('body').addClass('green');
          Sửa this lại là event.target như anh QN89 nói.
          Và đoạn code minh họa trên của đoạn này cũng sửa tương tự.
          Kid hiểu theo cách đó, không biết có đúng không nữa :)

          • Minh

            Theo mình thì bỏ nguyên phần “$(‘#switcher .button’).click(function(event) “. Còn phần nội dung trong hàm thì đưa lun vào $(‘#switcher’).click(function(event). Cũng hiểu giống bạn tức là ủy thác từ ‘div #switcher’ cho (event.target) của nó tức là ‘.button’

    • secret

      Cái this reference đến #switcher gồm 3 button nhưng event.target là reference đến cái button mà bạn click . Dễ hiểu là event.target reference đến cái hành động “chính xác” mà bạn thực thi.

  • http://homeviet.org MrBlackStar
    .hidden {
        display: none;
    }

    Cái này em nghĩ là phải có thêm !important , vì nếu để theo hàng ngang 3 button thì class div phải

    .button {
    display : inline;
    }

    Mà nếu đã inline thì ko thể none đc.

    • http://bocau.net Trung

      ko cần phải inline đâu bạn, chỉ cần float: left; là dc rồi.
      Sau đó xuống dòng thì clear nó đi

  • Hiếu

    Chương 3 không có file .pdf đính kèm hả bạn? Mình đọc 2 chương trước có file đính kèm mà?

  • Monkey.D.Luffy

    nhieu ung dung hay qua !!!!! em se co gang su dung het cac ung dung nay vao website ->>>> anh nhanh nhanh hoan thien bai nay nha de em va moi nguoi hoc .

  • http://www.nos.com.vn BackNguyen

    Bài viết khá hay và chi tiết ! DW đang truyền lửa đam mê cho anh em thích IT ! :D

Newbie

Các series nên xem trên izwebz cho newbie

Khi vào izwebz chắc nhiều bạn cho rằng các bài viết trên izwebz đều không có hệ thống gì cả? Thực chất, các bài biết đều đi theo một series của riêng nó, ví dụ như PHP, HTML & CSS, PSD2HTML, Photoshop, illustrator,… Trong bài viết này, mình sẽ tổng hợp lại các series bài viết cần thiết cho một newbie.

Izwebz facebook group

Social connect

Recent Comments

Archives