Thứ Bảy, 2 tháng 1, 2016

Sự kiện của chuột

1/02/2016 10:37:00 CH    No comments
jQuery Events – Các sự kiện của chuột | Quyetdo289's Blog

jQuery Events – Các sự kiện của chuột

09/07/2012

Các sự kiện của chuột gồm có :

  • .click()
  • .dbclick()
  • .focusin()
  • .focusout()
  • .hover()
  • .mousedown()
  • .mouseenter()
  • .mouseleave()
  • .mousemove()
  • .mouseout()
  • .mouseover()
  • .mouseup()
  • .toggle()

.click()

Mô tả : Phương thức .click() ràng buộc một event handler cho sự kiện click của JavaScript hoặc kích hoạt sự kiện đó trên một phần tử.

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .click(handler(eventObject))
    • Tham số :
      • handler(eventObject): hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào : 1.0
  • .click([eventData],handler(eventObject))
    • Tham số :
      • eventData: Tùy chọn, là một sơ đồ dữ liệu ( a map of data ) được truyền vào event handler
      • handler(eventObject): hàm được thực thi mỗi khi sự kiện được kích hoạt.
    • Phiên bản được thêm vào : 1.4.3
  • .click()
    • Phiên bản được thêm vào : 1.0

Đây là cách gọi tắt của phương thức .bind(‘click’,handler) hoặc .on(‘click’,handler) ở jQuery 1.7 trong 2 dạng đầu và .trigger(‘click’) trong dạng thứ 3.

Sự kiện click sẽ được gửi đến 1 phần tử khi con trỏ chuột ở trên phần tử, và nút chuột được ấn và thả ra. Mọi phần tử HTML đều có thể nhận sự kiện này.

Ví dụ, xem xét tài liệu HTML sau :

<div id="target">
    Click here
</div>
<div id="other">
    Trigger the handler
</div>

Sự kiện .click() có thể được gắn cho thẻ div có id=”target” như sau:

$("#target").click(function() {
    alert("Handler for .click() called.");
});

Bây giờ khi người dùng click vào phần tử này sẽ hiện lên thông báo:”Handler for .click called.”

Chúng ta cũng có thể kích hoạt sự kiện click của phần tử #target khi một phần tử khác được click bằng cách :

$("#other").click(function() {
    $("#target").click();
});

Khi đoạn code này được thực thi, người dùng click vào #other sẽ hiện lên thông báo: “Handler for .click called.”

Sự kiện click chỉ được kích hoạt sau một chuỗi chính xác các sự kiện sau:

  • Nút chuột được ấn trong khi con trỏ chuột nằm bên trong phần tử
  • Nút chuột được thả ra trong khi con trỏ chuột nằm bên trong phần tử

Đây là một chuỗi xự kiện nối tiếp đòi hỏi phải có trước khi nắm giữ một hành động click. Nếu không đủ tiêu chuẩn này thì sự kiện mousedown hoặc mouseup sẽ là phù hợp hơn.

Ví dụ 1: Ẩn các đoạn văn trên trang khi chúng được click vào

<html>
<head>
    <style>
        p { color:red; margin:5px; cursor:pointer; }
        p:hover { background:yellow; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p>First Paragraph</p>
    <p>Second Paragraph</p>
    <p>Yet one more Paragraph</p>
    <script>
         $("p").click(function () {
             $(this).slideUp();
         });
    </script>
</body>
</html>

Ví dụ 2: Kích hoạt sự kiện click trên tất cả các đoạn văn trên trang

$("p").click();

.dbclick()

Mô tả : Phương thức .dbclick() ràng buộc một event handler cho sự kiện dbclick của JavaScript hoặc kích hoạt sự kiện đó trên một phần tử.

Kiểu trả về: đối tượng jQuery

Cú pháp:

  • .dbclick(handler(eventObject))
    • Tham số:
      • handler(eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào: 1.0
  • .dbclick([eventData],handler(eventObject))
    • Tham số:
      • eventData: Tùy chọn, là một sơ đồ dữ liệu ( a map of data ) được truyền vào event handler
      • handler(eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào: 1.4.3
  • .dbclick()
    • Phiên bản được thêm vào: 1.0

Đây là cách gọi tắt của phương thức .bind(‘dbclick’,handler) trong 2 dạng đầu, và .trigger(‘dbclick’) trong dạng thứ ba.

Sự kiện dbclick sẽ được gửi đến 1 phần tử khi phần tử được double click. Mọi phần tử HTML đều có thể nhận sự kiện này.

Ví dụ, xem xét tài liệu HTML sau:

<div id="target">
    Double-click here
</div>
<div id="other">
    Trigger the handler
</div>

Sự kiện .dbclick() có thể được gắn cho thẻ div có id =”target” như sau :

$("#target").dbclick(function() {
    alert("Handler for .dbclick() called.");
});

Bây giờ khi người dùng click vào phần tử này sẽ hiện lên thông báo : “Handler for .dbclick called.”

Để kích hoạt sự kiện bằng tay, hãy gọi .dbclick() không có tham số:

$("#other").click(function() {
    $("#target").dbclick();
});

Khi đoạn code này được thực thi, người dùng click (chỉ 1 click) vào #other sẽ hiện lên thông báo: “Handler for .dbclick called.”

Sự kiện dbclick chỉ được kích hoạt sau một chuỗi chính xác các sự kiện sau:

  • Nút chuột được ấn trong khi con trỏ nằm bên trong phần tử
  • Nút chuột được thả ra trong khi con trỏ nằm bên trong phần tử
  • Nút chuột được ấn một lần nữa trong khi con trỏ nằm bên trong phần tử trong một khoảng thời gian cho phép tùy thuộc vào hệ thống
  • Nút chuột được thả ra trong khi con trỏ nằm bên trong phần tử

Sẽ là không khôn ngoan khi ràng buộc cả hai sự kiện click và dbclick cho cùng một đối tượng. Chuỗi các sự kiện nối tiếp nhau để kích hoạt sự kiện khác nhau giữa các trình duyệt trong việc phân 2 sự kiện click với 1 sự kiện dbclick. Độ nhạy của double click ( được tính bằng khoảng thời gian lớn nhất giữa hai lần click chuột mà được phát hiện là một lần double click) có thể khác nhau giữa các hệ thống và trình duyệt khác nhau và thường phụ thuộc vào cấu hình của người dùng.

Ví dụ 1: Hiển thị hộp thoại thông báo “Hello World!” khi click đúp vào mỗi đoạn văn trên trang

$("p").dblclick( function () { alert("Hello World!"); });

Ví dụ 2 : Click đúp để toggle màu nền

<!DOCTYPE html>
<html>
<head>
<style>
     div 
     { 
          background:blue;
          color:white;
          height:100px;
          width:150px;
     }
     div.dbl 
     { 
           background:yellow;color:black; 
     }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <div></div>
    <span>Double click the block</span>
<script>
     var divdbl = $("div:first");
     divdbl.dblclick(function () { 
         divdbl.toggleClass('dbl'); 
     });
</script>
</body>
</html>

.focusin()

Mô tả : Phương thức .focusin() ràng buộc một event handler cho sự kiện “focusin”

Kiểu trả về : đối tượng jQuery

Cú pháp:

  • .focusin(handler(eventObject))
    • Tham số:
      • handler(eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào:1.4
  • .focusin([eventData],handler(eventObject))
    • Tham số:
      • eventData: Tùy chọn, là một sơ đồ dữ liệu ( a map of data ) được truyền vào event handler
      • handler(eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào: 1.4.3

Đây là cách gọi tắt của phương thức .bind(‘focusin’,handler)

Sự kiện focusin sẽ được gửi đến 1 phần tử khi nó, hoặc bất kỳ phần tử nào bên trong nó nhận được focus. Đây là một điểm khác biệt so với sự kiện focus, cái mà hỗ trợ phát hiện sự kiện focus trên thành phần cha ( Nói theo một nghĩa khác là nó hỗ trợ sự kiện bong bóng).

Sự kiện này có thể sử dụng cùng với sự kiện focusout;

Ví dụ : Xem sự kiện focus xảy ra bên trong các đoạn văn trên trang

<!DOCTYPE html>
<html>
<head>
    <style>span {display:none;}</style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p><input type="text" /> <span>focusin fire</span></p>
    <p><input type="password" /> <span>focusin fire</span></p>
<script>
     $("p").focusin(function() {
         $(this).find("span").css('display','inline').fadeOut(1000);
     });
</script>
</body>
</html>

.focusout()

Mô tả : Phương thức .focusout() ràng buộc một event handler cho sự kiện “focusout” của JavaScript

Kiểu trả về : đối tượng jQuery

Cú pháp:

  • .focusout(handler(eventObject))
    • Tham số:
      • handler(eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào: 1.4
  • .focusout([eventData],handler(eventObject))
    • Tham số:
      • eventData: Tùy chọn, là một sơ đồ dữ liệu ( a map of data ) được truyền vào event handler
      • handler(eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào: 1.4.3

Đây là cách gọi tắt của phương thức .bind(‘focusout’,handler)

Sự kiện focusout sẽ được gửi đến 1 phần tử khi nó, hoặc bất kỳ phần tử nào bên trong nó mất focus. Đây là một điểm khác biệt so với sự kiện blur, cái mà hỗ trợ phát hiện sự kiện mất focus trên thành phần cha ( nói theo một nghĩa khác là nó hỗ trợ sự kiện bong bóng).

Sự kiện này có thể sử dụng cùng với sự kiện focusin

Ví dụ : Xem sự kiện mất focus xảy ra bên trong các đoạn văn trên trang và ghi chú sự khác biệt giữa số lần focusout và số lần blur.

<!DOCTYPE html>
<html>
<head>
 <style>
    .inputs { float: left; margin-right: 1em; }
    .inputs p { margin-top: 0; }
 </style>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="inputs">
 <p>
     <input type="text" /><br />
     <input type="text" /> 
 </p>
 <p>
     <input type="password" />
 </p>
</div>
<div id="fo">focusout fire</div>
<div id="b">blur fire</div>
<script>
    var fo = 0, b = 0;
    $("p").focusout(function() {
        fo++;
        $("#fo")
        .text("focusout fired: " + fo + "x");
     }).blur(function() {
        b++;
        $("#b")
        .text("blur fired: " + b + "x");
     });
</script>
</body>
</html>

.hover()

Mô tả : Phương thức .hover() ràng buộc hai handler cho các phần tử so khớp, được thực thi khi con trỏ chuột đi vào và đi ra khỏi phần tử.

Kiểu trả về : đối tượng jQuery

Các dạng sử dụng của .hover():

  • .hover(handlerIn(eventObject), handlerOut(eventObject))
  • .hover(handlerInOut(eventObject))
.hover(handlerIn(eventObject), handlerOut(eventObject))
  • Tham số:
    • handlerIn(eventObject) : hàm được thực thi khi con trỏ chuột đi vào phần tử
    • handlerOut(eventObject) : hàm được thực thi khi con trỏ chuột đi ra khỏi phần tử
  • Phiên bản được thêm vào: 1.0

Phương thức .hover() ràng buộc handler cho cả hai sự kiện mouseenter và mouseleave. Bạn có thể sử dụng nó đơn giản là áp dụng hành vi cho một phần tử trong suốt khoảng thời gian con trỏ chuột nằm bên trong phần tử.

Cách gọi $(selector).hover(handlerIn,handlerOut) là dạng tắt cho : $(selector).mouseenter(handlerIn).mouseleave(handlerOut);

Ví dụ 1: Thêm style cho list items khi nó đang được hover qua.

<!DOCTYPE html>
<html>
<head>
 <style>
     ul { margin-left:20px; color:blue; }
     li { cursor:default; }
     span { color:red; }
 </style>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 <ul>
     <li>Milk</li>
     <li>Bread</li>
     <li class='fade'>Chips</li>
     <li class='fade'>Socks</li>
 </ul>
<script>
$("li").hover(
    function () {
        $(this).append($("<span> ***</span>"));
    }, 
    function () {
        $(this).find("span:last").remove();
    }
);
//li with fade class
$("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});
</script>
</body>
</html>

Ví dụ 2: Thêm style cho các cột trong bảng khi nó được hover qua

$("td").hover(
    function () {
        $(this).addClass("hover");
    },
    function () {
        $(this).removeClass("hover");
    }
);

Ví dụ 3: Để bỏ ràng buộc trong ví dụ trên, bạn có thể viết :

$("td").unbind('mouseenter mouseleave');
.hover(handlerInOut(eventObject))
  • Tham số:
    • handlerInOut(eventObject) : hàm được thực thi khi con trỏ chuột đi vào hoặc đi ra khỏi phần tử
  • Phiên bản được thêm vào: 1.4

Phương thức .hover() khi chỉ được truyền vào một function, sẽ thực thi handler đó cho cả hai sự kiện mouseenter và mouseleave.Nó cho phép người dùng sử dụng các phương thức toggle (chuyển đổi) khác nhau của jQuery bên trong handler hoặc phản ứng khác nhau bên trong handler phụ thuộc vào event.type.

Cách gọi $(selector).hover(handlerInOut) là dạng tắt cho :
$(selector).bind(“mouseenter mouseleave”, handlerInOut);

Ví dụ : Slide ( trượt ) thẻ li anh em ruột tiếp theo lên hoặc xuống khi hover và chuyển đổi class.

<!DOCTYPE html>
<html>
<head>
    <style>
       ul { margin-left:20px; color:blue; }
       li { cursor:default; }
       li.active { background:black;color:white; }
       span { color:red; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 <ul>
    <li>Milk</li>
    <li>White</li>
    <li>Carrots</li>
    <li>Orange</li>
    <li>Broccoli</li>
    <li>Green</li>
 </ul>
<script>
   $("li")
   .filter(":odd")
   .hide()
   .end()
   .filter(":even")
   .hover(
      function () {
          $(this).toggleClass("active")
          .next().stop(true, true).slideToggle();
      }
   );
</script>
</body>
</html>

.mousedown()

Mô tả: Phương thức .mousedown() ràng buộc một handler cho sự kiện “mousedown” của JavaScript hoặc kích hoạt sự kiện đó trên một phần tử.

Kiểu trả về: đối tượng jQuery

Cú pháp:

  • .mousedown(handler(eventObject))
    • Tham số:
      • handler (eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào: 1.0
  • .mousedown([eventData],handler(eventObject))
    • Tham số:
      • eventData: Một sơ đồ dữ liệu được truyền vào event handler
      • handler (eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào: 1.4.3
  • .mousedown()
    • Phiên bản được thêm vào: 1.0

Phương thức này là dạng tắt cho .bind(‘mousedown’,handler) ở 2 dạng đầu và .trigger(‘mousedown’) ở dạng thứ 3.

Sự kiện mousedown được gửi tới một phần tử khi con trỏ chuột ở trên nó, và nút chuột được ấn. Mọi phần tử HTML đều có thể nhận sự kiện này.

Ví dụ có tài liệu HTML sau :

<div id="target">
    Click here
</div>
<div id="other">
    Trigger the handler
</div>

Sự kiện .mousedown có thể tác động đến phần tử div#target :

$('#target').mousedown(function() {
    alert('Handler for .mousedown() called.');
});

Khi ta click vào phần tử div#target sẽ hiện lên thông báo “ Handler for .mousedown() called.”

Để kích hoạt sự kiện này khi một phần tử khác được click :/p> 

$('#other').click(function() {
    $('#target').mousedown();
});

Khi đoạn code trên được thực thi, nếu click vào div#other sẽ hiện lên thông báo “ Handler for .mousedown called.”

Sự kiện mousedown được gửi đến phần tử mỗi khi nút chuột được click. Để chỉ tác động đến các nút cụ thể, chúng ta có thể sử dụng thuộc tính which của đối tượng sự kiện. Không phải tất cả các trình duyệt đều hỗ trợ thuộc tính này ( IE sử dụng button thay cho nó ), nhưng jQuery đã tiêu chuẩn hóa thuộc tính này do đó nó có thể an toàn để sử dụng trên mọi trình duyệt. Giá trị của which sẽ bằng 1 cho nút chuột trái, bằng 2 cho nút chuột giữa và bằng 3 cho nút chuột phải.

Sự kiện này chủ yếu hữu ích trong việc đảm bảo các nút chính được sử dụng để bắt đầu một hoạt động kéo. Nếu bỏ qua nó thì các kết quả lạ có thể xảy ra khi người dùng cố gắng sử dụng một trình đơn ngữ cảnh. Trong khi các nút giữa và phải có thể được phát hiện với những thuộc tính của nó, điều này là không đáng tin cậy. Ví dụ, trong Opera và Safari, click chuột phải mặc định sẽ không được phát hiện.

Nếu người dùng click vào một phần tử rồi kéo ra xa và nhả nút chuột thì nó vẫn được tính là một sự kiện mousedown. Các hành động tuần tự này được coi như việc ấn nút “Canceling” trên đa số các giao diện người dùng, do đó sẽ là tốt hơn nếu chúng ta sử dụng sự kiện “click” trừ khi chúng ta biết chắc rằng sự kiện mousedown là thích hợp hơn cho trường hợp cụ thể nào đó.

Ví dụ 1: Hiển thị text khi sự kiện mouseup và mousedown được kích hoạt.

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
 <p>Press mouse and release here.</p>
<script>
    $("p").mouseup(function(){
       $(this).append('<span style="color:#F00;">Mouse up.</span>');
    }).mousedown(function(){
       $(this).append('<span style="color:#00F;">Mouse down.</span>');
    });
</script>
</body>
</html>
Ví dụ 2: Hiển thị thông báo nút chuột được click : trái:1, giữa : 2, phải : 3
$("#MouseDown").mousedown(function (e) {
   alert(e.which);
});

.mouseup()

Mô tả : Phương thức .mouseup() ràng buộc một handler cho sự kiện “mouseup” trong javascript hoặc kích hoạt sự kiện đó trên một phần tử.

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .mouseup(handler(eventObject))
    • Tham số:
      • handler (eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào:1.0
  • .mouseup([eventData],handler(eventObject))
    • Tham số:
      • eventData: Một sơ đồ dữ liệu được truyền vào event handler
      • handler (eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào: 1.4.3
  • .mouseup()
    • Phiên bản được thêm vào: 1.0

Phương thức này là dạng tắt cho .bind(‘mouseup’,handler) ở 2 dạng đầu và .trigger(‘mouseup’) ở dạng thứ 3.

Sự kiện mouseup được gửi tới một phần tử khi con trỏ chuột ở trên nó, và nút chuột được nhả ra. Mọi phần tử HTML đều có thể nhận sự kiện này.

Ví dụ có tài liệu HTML sau :

<div id="target">
    Click here
</div>
<div id="other">
    Trigger the handler
</div>

Sự kiện .mouseup có thể tác động đến phần tử div#target :

$('#target').mouseup(function() {
 alert('Handler for .mouseup() called.');
});

Khi ta click vào phần tử div#target sẽ hiện lên thông báo “ Handler for .mouseup() called.”

Để kích hoạt sự kiện này khi một phần tử khác được click :

$('#other').click(function() {
    $('#target').mouseup();
});

Khi đoạn code trên được thực thi, nếu click vào div#other sẽ hiện lên thông báo “ Handler for .mouseup called.”

Nếu người dùng click bên ngoài một phần tử, kéo vào nó và nhả nút chuột ra thì nó vẫn được tính là một sự kiện mouseup. Các hành động tuần tự này không được coi như một việc ấn nút trên đa số các giao diện người dùng, do đó sẽ là tốt hơn nếu chúng ta sử dụng sự kiện “click” trừ khi chúng ta biết chắc rằng sự kiện mouseup là thích hợp hơn cho trường hợp cụ thể nào đó.

Ví dụ 1: Hiển thị text khi sự kiện mouseup và mousedown được kích hoạt.

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p>Press mouse and release here.</p>
<script>
    $("p").mouseup(function(){
        $(this).append('<span style="color:#F00;">Mouse up.</span>');
    }).mousedown(function(){
        $(this).append('<span style="color:#00F;">Mouse down.</span>');
 });
</script>
</body>
</html>

.mouseenter()

Mô tả : Phương thức .mouseenter() ràng buộc một handler sẽ xảy ra khi con trỏ chuột đi vào một phần tử hoặc kích hoạt sự kiện đó trên một phần tử.

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .mouseenter(handler(eventObject))
    • Tham số:
      • handler (eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào: 1.0
  • .mouseenter([eventData],handler(eventObject))
    • Tham số:
      • eventData: Một sơ đồ dữ liệu được truyền vào event handler
      • handler (eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào: 1.4.3
  • .mouseenter()
    • Phiên bản được thêm vào : 1.0

Phương thức này là dạng tắt cho .bind(‘mouseenter’,handler) ở 2 dạng đầu và .trigger(‘mouseenter’) ở dạng thứ 3.

Sự kiện mouseenter của Javascript là độc quyền cho Internet Explorer.Vì tiện ích chung của sự kiện, jQuery đã mô hình hóa sự kiện này để nó có thể được sử dụng trên mọi trình duyệt.

Sự kiện này được gửi đến một phần tử khi con trỏ chuột đi vào phần tử. Mọi phần tử HTML đều có thể nhận sự kiện này.

Ví dụ có tài liệu HTML sau :

<div id="outer">
    Outer
    <div id="inner">
       Inner
    </div>
</div>
<div id="other">
    Trigger the handler
</div>
<div id="log"></div>

Sự kiện .mouseenter có thể tác động đến phần tử div#outer :

$('#outer').mouseenter(function() {
    $('#log').append('<div>Handler for .mouseenter() called.</div>');
});

Khi con trỏ chuột di chuyển qua div#outer, message sẽ được nối tiếp vào div#log

Để kích hoạt sự kiện này khi một phần tử khác được click :

$('#other').click(function() {
    $('#outer).mouseenter();
});

Khi đoạn code trên được thực thi, nếu click vào div#other, message sẽ được nối tiếp vào div#log

Sự kiện mouseenter khác sự kiện mouseover ở cách nó xử lý sự kiện bong bóng. Nếu sự kiện mouseover được sử dụng trong ví dụ này, khi con trỏ chuột di chuyển qua phần tử Inner, handler sẽ được kích hoạt. Thường thì đây là một hành vi không ai thích cả. Trong khi đó, sự kiện mouseenter chỉ kích hoạt handler của nó khi con trỏ chuột đi vào thành phần mà nó giới hạn, không bao gồm các con cháu. Do đó trong ví dụ này, handler sẽ được kích hoạt khi con trỏ chuột đi vào thành phần Outer mà không phải là thành phần Inner.

Ví dụ : Hiển thị text khi sự kiện mouseenter và mouseout được kích hoạt. Sự kiện mouseover vẫn xảy ra khi con trỏ chuột đi vào phần tử con, trong khi mouseenter chỉ xảy ra khi con trỏ chuột đi vào thành phần được giới hạn.

<html>
<head>
 <style>
    div.out {
        width:40%;
        height:120px;
        margin:0 15px;
        background-color:#D6EDFC;
        float:left;
   }
   div.in {
        width:60%;
        height:60%;
        background-color:#FFCC00;
        margin:10px auto;
   }
   p {
        line-height:1em;
        margin:0;
        padding:0;
   }
</style>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <div class="out overout">
        <p>move your mouse</p>
        <div class="in overout">
            <p>move your mouse</p>
            <p>0</p>
        </div>
        <p>0</p>
    </div>
    <div class="out enterleave">
        <p>move your mouse</p>
        <div class="in enterleave">
        <p>move your mouse</p>
        <p>0</p>
     </div>
        <p>0</p>
   </div>
<script>
    var i = 0;
    $("div.overout").mouseover(function(){
        $("p:first",this).text("mouse over");
        $("p:last",this).text(++i);
    }).mouseout(function(){
        $("p:first",this).text("mouse out");
    });
    var n = 0;
    $("div.enterleave").mouseenter(function(){
        $("p:first",this).text("mouse enter");
        $("p:last",this).text(++n);
    }).mouseleave(function(){
        $("p:first",this).text("mouse leave");
    });
</script>
</body>
</html>

.mouseover()

Mô tả : Phương thức .mouseover() ràng buộc một handler cho sự kiện “mouseover” của JavaScript hoặc kích hoạt sự kiện đó trên một phần tử.

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .mouseover(handler(eventObject))
    • Tham số :
      • handler (eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào : 1.0
  • .mouseover([eventData],handler(eventObject))
    • Tham số :
      • eventData: Một sơ đồ dữ liệu được truyền vào event handler
      • handler (eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào : 1.4.3
  • .mouseover()
    • Phiên bản được thêm vào : 1.0

Phương thức này là dạng tắt cho .bind(‘mouseover’,handler) ở 2 dạng đầu và .trigger(‘mouseover’) ở dạng thứ 3.

Sự kiện mouseover được gửi đến một phần tử khi con trỏ chuột đi vào phần tử. Mọi phần tử HTML đều có thể nhận sự kiện này.

Ví dụ có tài liệu HTML sau :

<div id="outer">
    Outer
    <div id="inner">
        Inner
     </div>
</div>
<div id="other">
    Trigger the handler
</div>
<div id="log"></div>

Sự kiện .mouseover có thể tác động đến phần tử div#outer :

$('#outer').mouseover(function() {
    $('#log').append('<div>Handler for .mouseover() called.</div>');
});

Khi con trỏ chuột di chuyển qua div#outer, message sẽ được nối tiếp vào div#log
Để kích hoạt sự kiện này khi một phần tử khác được click :

$('#other').click(function() {
    $('#outer).mouseover();
});

Khi đoạn code trên được thực thi, nếu click vào div#other, message sẽ được nối tiếp vào div#log

Sự kiện mouseover có thể gây nhiều phiền toái do sự kiện bong bóng mà nó tạo ra.

Chẳng hạn như trong ví dụ trên, khi con trỏ chuột di chuyển qua phần tử div#inner thì một sự kiện mouseover sẽ được gửi đến nó, sau đó là div#outer và có thể kích hoạt handler mouseover của chúng ta tại những thời điểm không thích hợp. Giải pháp trong trường hợp này là bạn có thể sử dụng sự kiện mouseenter để thay thế.

Ví dụ : Hiển thị số lần sự kiện mouseover và mouseenter được kích hoạt. Sự kiện mouseover vẫn xảy ra khi con trỏ chuột đi vào phần tử con, trong khi mouseenter chỉ xảy ra khi con trỏ chuột đi vào thành phần được giới hạn.

<!DOCTYPE html>
<html>
<head>
 <style>
     div.out { width:40%; height:120px; margin:0 15px;
         background-color:#D6EDFC; float:left; }
     div.in { width:60%; height:60%; 
         background-color:#FFCC00; margin:10px auto; }
     p { line-height:1em; margin:0; padding:0; }
 </style>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <div class="out overout">
        <span>move your mouse</span>
        <div class="in">
        </div>
    </div>
    <div class="out enterleave">
         <span>move your mouse</span>
         <div class="in">
         </div>
    </div>
<script>
    var i = 0;
    $("div.overout").mouseover(function() {
        i += 1;
        $(this).find("span").text( "mouse over x " + i );
        }).mouseout(function(){
            $(this).find("span").text("mouse out ");
    });
    var n = 0;
    $("div.enterleave").mouseenter(function() {
        n += 1;
        $(this).find("span").text( "mouse enter x " + n );
    }).mouseleave(function() {
        $(this).find("span").text("mouse leave");
    });
</script>
</body>
</html>

.mouseout()

Mô tả : Phương thức .mouseout() ràng buộc một handler cho sự kiện “mouseout” của JavaScript hoặc kích hoạt sự kiện đó trên một phần tử.

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .mouseout(handler(eventObject))
    • Tham số :
      • handler (eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào : 1.0
  • .mouseout([eventData],handler(eventObject))
    • Tham số :
      • eventData: Một sơ đồ dữ liệu được truyền vào event handler
      • handler (eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào : 1.4.3
  • .mouseout()
    • Phiên bản được thêm vào : 1.0

Phương thức này là dạng tắt cho .bind(‘mouseout’,handler) ở 2 dạng đầu và .trigger(‘mouseout’) ở dạng thứ 3.

Sự kiện mouseout được gửi đến 1 phần tử khi con trỏ chuột rời khỏi phần tử. Mọi phần tử HTML đều có thể nhận sự kiện này.

Ví dụ có tài liệu HTML sau :

<div id="outer">
    Outer
    <div id="inner">
       Inner
    </div>
</div>
<div id="other">
    Trigger the handler
</div>
<div id="log"></div>

Sự kiện .mouseout có thể tác động đến phần tử div#outer :

$('#outer').mouseout(function() {
    $('#log').append('Handler for .mouseout() called.');
});

Khi con trỏ chuột đi ra khỏi div#outer, message sẽ được nối tiếp vào div#log

Để kích hoạt sự kiện này khi một phần tử khác được click :

$('#other').click(function() {
    $('#outer').mouseout();
});

Khi đoạn code trên được thực thi, nếu click vào div#other, message sẽ được nối tiếp vào div#log

Sự kiện .mouseout có thể gây nhiều phiền toán do sự kiện bong bóng mà nó tạo ra. Chẳng hạn trong ví dụ trên, khi con trỏ chuột đi ra khỏi phần tử Inner, một sự kiện mouseout sẽ được gửi đến nó, sau đó là Outer và có thể kích hoạt handler mouseout ở những thời điểm không thích hợp. Giải pháp trong trường hợp này là bạn có thể sử dụng mouseleave để thay thế.

Ví dụ: (Xem ví dụ ở phần mouseleave)

.mousemove()

Mô tả : Phương thức .mousemove() ràng buộc một handler cho sự kiện “mousemove” của JavaScript hoặc kích hoạt sự kiện đó trên một phần tử.

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .mousemove(handler(eventObject))
    • Tham số :
      • handler (eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào : 1.0
  • .mousemove([eventData],handler(eventObject))
    • Tham số :
      • eventData: Một sơ đồ dữ liệu được truyền vào event handler
      • handler (eventObject) : hàm được thực thi mỗi khi sự kiện được kích hoạt
    • Phiên bản được thêm vào : 1.4.3
  • .mousemove()
    • Phiên bản được thêm vào : 1.0

Phương thức này là dạng tắt cho .bind(‘mousemove’,handler) ở 2 dạng đầu và .trigger(‘mousemove’) ở dạng thứ 3.

Sự kiện mousemove được gửi đến 1 phần tử khi con trỏ chuột di chuyển bên trong phần tử. Mọi phần tử HTML đều có thể nhận sự kiện này.

Ví dụ có tài liệu HTML sau :

<div id="target">
    Move here
</div>
<div id="other">
    Trigger the handler
</div>
<div id="log"></div>

Sự kiện .mousemove có thể tác động đến phần tử div#target:

$("#target").mousemove(function(event) {
    var msg = "Handler for .mousemove() called at ";
    msg += event.pageX + ", " + event.pageY;
    $("#log").append("<div>" + msg + "</div>");
});

Khi con trỏ chuột di chuyển bên trong div#target, message sẽ được nối tiếp vào div#log

Handler for .mousemove() called at (399, 48)
Handler for .mousemove() called at (398, 46)
Handler for .mousemove() called at (397, 44)
Handler for .mousemove() called at (396, 42)

Để kích hoạt sự kiện này khi một phần tử khác được click :

$("#other").click(function() {
    $("#target").mousemove();
});

Handler cho việc gọi .mousemove là (undefined,undefined)

Khi theo dõi sự di chuyển của chuột, bàn thường cần phải biết vị trí thực tế của con trỏ chuột. Đối tượng sự kiện được truyền vào handler bao gồm một số thông tin về tọa độ chuột. Các thuộc tính (properties) chẳng hạn như .clientX,.offsetX và .pageX là luôn có giá trị nhưng có thể khác nhau giữa các trình duyệt. Thật may mắn là jQuery đã chuẩn hóa thuộc tính .pageX và .pageY để nó có thể được sử dụng trong tất cả các trình duyệt. Những thuộc tính này cung cấp tọa độ X và Y của con trỏ chuột so với góc trên – trái của tài liệu như là được minh họa trong ví dụ trên .

Hãy ghi nhớ rằng sự kiện mousemove được kích hoạt bất cứ khi nào con trỏ chuột di chuyển, thận chí đối với từng pixel. Điều này có nghĩa là hàng trăm sự kiện có thể được tạo ra trong 1 khoảng thời gian rất ngắn. Nếu handler phải thực hiện các xử lý quan trọng hoặc nhiều handler cho một sự kiện đã tồn tại, nó có thể gây ảnh hưởng nghiêm trọng đến hiệu năng trên trình duyệt. Do đó rất quan trọng phải tối ưu handler mousemove hết sức có thể, và tránh dùng nó trừ khi thực sự cần thiết.
Một mô hình phổ biến là bind handler mousemove từ bên trong một handler mousedown, và unbind nó từ một handler mouseup tương ứng. Nếu thực thi các sự kiện tuần tự này, hãy nhớ rằng sự kiện mouseup có thể được gửi tới một phần tử HTML khác với mousemove. Để tính toán việc này, handler mouseup cần gắn vào một phần tử cấp cao trong cây DOM, chẳng hạn như <body> .

Ví dụ : Hiển thị tọa độ chuột khi con trỏ chuột di chuyển qua thẻ div. Các tọa độ liên quan đến cửa sổ, trong trường hợp này là iframe.

<!DOCTYPE html>
<html>
<head>
 <style>
    div { width:220px; height:170px; margin: 10px 50px 10px 10px;
        background:yellow; border:2px groove; float:right; }
    p { margin:0; margin-left:10px; color:red; width:220px;
        height:120px; padding-top:70px;
        float:left; font-size:14px; }
    span { display:block; }
 </style>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <p>
       <span>Move the mouse over the div.</span>
    <span>&nbsp;</span>
    </p>
    <div></div>
<script>
    $("div").mousemove(function(e){
       var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
       var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
       $("span:first").text("( e.pageX, e.pageY ) : " + pageCoords);
       $("span:last").text("( e.clientX, e.clientY ) : " + clientCoords   );
   });
</script>
</body>
</html>

.toggle()

Mô tả : Phương thức .toggle() ràng buộc hai hoặc nhiều handler cho các phần tử so khớp và được thực thi khi click luân phiên nhau.

Kiểu trả về : đối tượng jQuery

Cú pháp :

  • .toggle(handler(eventObject),handler(eventObject)[,handler(eventObject)])
    • Tham số :
      • handler (eventObject) : hàm được thực thi mỗi khi số lần ckick vào phần tử là chẵn
      • handler(eventObject) : hàm được thực thi mỗi khi số lần ckick vào phần tử là chẵn
      • handler(eventObject) : Một handler thêm để quay vòng đến cùng sau khi click
    • Phiên bản được thêm vào : 1.0

Ghi chú : jQuery cũng cung cấp một phương thức hoạt cảnh tên là .toggle() để xỏ chốt sự tính nhìn thấy được của các phần tử. Trong bất cứ trường hợp nào , hoạt cảnh hay phương thức sự kiện được xảy ra phụ thuộc vào tập các tham số được truyền vào.
Phương thức .toggle() ràng buộc một handler cho sự kiện click, bởi vậy nguyên tắc vạch ra cho các kích hoạt click ở đây là rất tốt.

Ví dụ có tài liệu HTML sau :

<div id="target">
    Click here
</div>
    Sự kiện .toggle có thể tác động đến phần tử div: 
    $('#target').toggle(function() {
       alert('First handler for .toggle() called.');
    }, function() {
       alert('Second handler for .toggle() called.');
    });

Khi phần tử được click lặp lại nhiều lần thì message sẽ xen kẽ là :

First handler for .toggle() called.
Second handler for .toggle() called.
First handler for .toggle() called.
Second handler for .toggle() called.
First handler for .toggle() called.

Nếu có nhiều hơn 2 handler được cung cấp, phương thức toggle sẽ thực hiện vòng quanh tất cả chúng. Ví dụ nếu có 3 handler thì handler thứ nhất sẽ được gọi ở lần click đầu tiên, thứ tư, thứ 7, … và cứ tiếp tục quy luật như vậy.

Phương thức toggle được cung cấp để tạo ra sự thuận tiện.

Phương thức toggle được cung cấp để tạo ra sự thuận tiện. Nó tương đối đơn giản để thực hiện hành vi tương tự bằng tay, và nó là cần thiết nếu các giả thiết được xây dựng vào .toggle() tỏ ra có giới hạn. Ví dụ, .toggle() không được đảm bảo để làm việc chính xác nếu áp dụng 2 lần trên cùng một phần tử. Vì .toggle() nội tại sử dụng một handler click để làm công việc của mình, chúng ta có thể unbind click để loại bỏ một hành vi được gắn với .toggle(), do đó các handler click khác có thể bị xung đột. Sự thực thi cũng gọi phương thức .preventDefault() trong sự kiện, do đó liên kết sẽ không được tuân theo và nút bấm sẽ không được click nếu phương thức .toggle() được gọi trên phần tử.

Ví dụ 1: Click để chuyển đổi trạng thái highlight trên list item

<!DOCTYPE html>
<html>
<head>
    <style>
        ul { margin:10px; list-style:inside circle; font-weight:bold; }
        li { cursor:pointer; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <ul>
        <li>Go to the store</li>
        <li>Pick up dinner</li>
        <li>Debug crash</li>
       <li>Take a jog</li>
    </ul>
<script>
    $("li").toggle(
       function () {
          $(this).css({"list-style-type":"disc", "color":"blue"});
       },
       function () {
          $(this).css({"list-style-type":"disc", "color":"red"});
    },
    function () {
       $(this).css({"list-style-type":"", "color":""});
    }
 );
</script>
</body>
</html>
Categories: Web

0 nhận xét:

Đăng nhận xét