jQuery - other event

Bài viết này giới thiệu một số kinh nghiệm cơ bản về một số sự kiện(event) khác trong jQuery.

1. change: Thường dùng cho checkbox hoặc radio button.
Tình huống: Check vào một checkbox hoặc một radio button bên trái, ô vuông xám bên phải sẽ hiển thị danh sách những checkbox hoặc radio nào được chọn.
Code

<div>
  <style>
  #change_table tr td div{
    width:200px; 
    height:100px;
    background-color:#EAEAEA;
    border:1px solid black;
  }
  </style>
  <script type="text/javascript">
  jQuery(document).ready(function(){
    jQuery("[name='cks']").change(function(){
    var str="";
    jQuery("input[name='cks']:checked").each(function(i,val){
      str += jQuery(this).val() + " duoc checked, ";
    });
    jQuery("#cks_div").html(str);
    });
    jQuery("[name='rds']").change(function(){
    var str="";
    jQuery("input[name='rds']:checked").each(function(i,val){
      str += jQuery(this).val() + " duoc checked, ";
    });
    jQuery("#rds_div").html(str);
    });
  });
  </script>
  <table id="change_table"><tr>
    <td>
    <input type="checkbox" value="checkbox 1" name="cks">checkbox 1
    </input>
    <input type="checkbox" value="checkbox 2" name="cks">checkbox 2
    </input>
    <input type="checkbox" value="checkbox 3" name="cks">checkbox 3
    </input>
    <input type="checkbox" value="checkbox 4" name="cks">checkbox 4
    </input>
    </td>
    <td><div id="cks_div">Không có checkbox nào được check.</div></td>
  </tr>
  <tr>
    <td>
    <input type="radio" value="radio 1" name="rds">radio 1</input>
    <input type="radio" value="radio 2" name="rds">radio 2</input>
    <input type="radio" value="radio 3" name="rds">radio 3</input>
    <input type="radio" value="radio 4" name="rds">radio 4</input>
  </td>
    <td><div id="rds_div">Không có radio button nào được chọn.</div>
    </td>
  </tr>
  </table>
</div>

Demo


checkbox 1 checkbox 2 checkbox 3 checkbox 4	Không có checkbox nào được check.
radio 1 radio 2 radio 3 radio 4	Không có radio button nào được chọn.



2. focus và blur
Tình huống: Kiểm tra độ mạnh của password. Có 4 loại kí tự: kí tự thường, kí tự hoa, số, các kí tự đặc biệt. Điều kiện:
• very weak: Thỏa 1 trong 4 loại kí tự.
• weak: Thỏa 2 trong 4 loại kí tự.
• medium: Thỏa 3 trong 4 loại kí tự.
• strong: thỏa 4 loại kí tự.
• Mật khẩu rỗng: sẽ hiển thị thông báo yêu cầu nhập.
Code

<div>
  <style>
  #pass_test:focus{
    background-color:black;
    color:white;
  }
  </style>
  <script type="text/javascript">
  jQuery(document).ready(function(){
    jQuery("#pass_test").focus(function(){
      jQuery("#pass_none").hide();
      jQuery("#pass_strength").html("very weak");
      jQuery("#pass_strength").fadeIn();
    });
    jQuery("#pass_test").blur(function(){
      if(jQuery("#pass_test").val()==""){
        jQuery("#pass_strength").hide();
        jQuery("#pass_none").fadeIn();
      }
    });
    jQuery("#pass_test").keyup(function(){
      var input = jQuery(this).val();
      var strongRegex = new RegExp("^(?=.*[^a-zA-Z0-9_])(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9]).*$", "g");
      var mediumRegex = new RegExp("^(((?=.*[A-Z])(?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[a-z])(?=.*[^a-zA-Z0-9_]))|((?=.*[a-z])(?=.*[0-9])(?=.*[^a-zA-Z0-9_]))|((?=.*[A-Z])(?=.*[0-9])(?=.*[^a-zA-Z0-9_]))).*$", "g");
      var enoughRegex = new RegExp("^(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[^a-zA-Z0-9_]))|((?=.*[A-Z])(?=.*[^a-zA-Z0-9_]))|((?=.*[0-9])(?=.*[^a-zA-Z0-9_]))).*", "g");
      if (strongRegex.test(input)){
        jQuery("#pass_strength").html("strong");
      }else if (mediumRegex.test(input)){
        jQuery("#pass_strength").html("medium");
        }else if (enoughRegex.test(input)){
          jQuery("#pass_strength").html("weak");
          }else{
            jQuery("#pass_strength").html("very weak");
          }
    });
  });
  </script>
  <table>
    <tr>
      <td>
        <input type="text" id="pass_test"/>
      </td>
      <td>
        <div id="pass_strength" style="display:none"></div>
        <div id="pass_none" style="display:none">Vui lòng nh?p m?t kh?u.</div>
      </td>
    </tr>
  </table>
</div>

Demo


Vui lòng nhập mật khẩu.



3. live và bind: Thường dùng cho các để khai báo các hàm callback cho các sự kiện của một element
Giống nhau
• Cú pháp: objects.bind(event name, callback function),objects.live(event name, callback function)
• Có thể khai báo 1 hàm callback cho nhiều event cùng lúc. VD: bind("click mousedown mouseup",callback function)
Khác nhau
• Hàm bind bắt buộc phải được sử dụng trong function callback của sự kiện ready của document. Hàm live không bắt buộc điều đó.
VD: $(document).ready(function(){ $("#element_id").bind(event name,callback)});
Code

<div>
  <style>
  #bind_left{
    width:200px;
    height:200px;
    float:left;
    background-color:#D0D0D0;
  }
  #bind_right{
    width:200px;
    height:200px;
    float:left;
    margin-left:50px;
    background-color:#EAEAEA;
    overflow:auto;
  }
  </style>
  <script type="text/javascript">
  jQuery(document).ready(function(){
    jQuery("#bind_left").bind("mousedown mouseup click",function(e){
      jQuery("#bind_right").html(jQuery("#bind_right").html()+ " " + e.type);
    });
  });
  jQuery("#bind_left").live("mouseover mouseout",function(e){
    jQuery("#bind_right").html(jQuery("#bind_right").html()+ " " + e.type);
  });
  </script>
  <div id="bind_left"></div>
  <div id="bind_right"></div>
  <div style="clear:both;"></div>
</div>

Demo


4. scroll: Dùng để bắt sự kiện của thanh cuộn.
Code

<div><script type="text/javascript">
$(document).ready(function() {
 jQuery(window).scroll(function(){
  if (jQuery(window).scrollTop()>0)
  {
   jQuery("#back").removeAttr("disabled");
  }
  else{
   jQuery("#back").attr("disabled",true);
  }
 });
 jQuery("#back").click(function(){
  var j = 0;
  var len = jQuery(window).scrollTop()/20;
  for (var i = jQuery(window).scrollTop(); i>=0;i-=len)
  {
   (i>0)? j = i:j = 0;  
   jQuery(window).scrollTop(j).delay(5);
  }
 });
});
</script><div style="position:fixed;z-index:190;bottom:0;right:0px;"><input id="back" type="button" value=">>Back to top<<" /></div></div>

Demo
Tạo Button Back To Top đơn giản nằm ở góc phải màn hình. Chỉ khi nào có thể scroll lên đầu trang được thì button mới được enable lên.