Jquery事件详解

标签：

        Jquery让基于事件来进行响应变的非常简单，总体来说，事件有许多种，但是它们之间的使用方法都差不多，我们可以套用固定的代码模板来操作事件。而且我主要介绍的也是一些非常常用的事件来做例子。先开看Jquery的代码模板,

基本事件：

一个元素上面绑定一个事件，将按钮的名称变成Myvalue

     $("元素").bind(‘事件名称‘,function(e){
         
     });
     //例子
     $("#button").bind(‘click‘,function(e){
        $(this).attr(‘value‘,‘MyValue‘);
     });

一个元素绑定多个事件,下面的例子是一个按钮点击一个样式，在点击移除该样式

 1      $("元素").bind({
 2         ‘事件名称‘:function(e){
 3             
 4         },
 5         ‘事件名称2‘:function(e){
 6             
 7         }
 8      });
 9         var count = 0;
10     $(":button").bind({
11         ‘click‘ : function(e) {
12             count++;
13             if (count % 2 == 0) {
14                 $(this).attr(‘style‘, ‘background:yellow‘);
15             } else {
16                 $(this).removeAttr("style");
17             }
18         }
19     })

对于一些我们常用到的事件和一些常用到的场景, 

click事件(一次鼠标点击事件);

select事件(当某个下拉列表被选中之后);

change事件(所选元素的value值发生改变，一般用在<input：type="text,select">);

hover事件(当鼠标移到上面时，鼠标指针发生变化)；

focus事件(当聚焦到某个元素时触发的事件,一般用在<input:type="text">的场景);

focusin事件(和Focus的区别是当前元素和子元素任意一个元素获得聚焦后就会触发，而focus只有当前元素才触发);

blur事件(当鼠标失去焦点时触发的时间，一般用户输入一个元素后，自动聚焦到下一个元素);

submit事件(当Form表单提交时触发的事件,一般常用来清空已经输入的内容，多用来实现批量提交，就是输入学生信息或者用户信息时，不用跳转页面);

load事件(最常用的是Documet的Onload事件，一般用在大型资源加载的场景);

ready事件(表示该元素加载完成之后发生的事件);

keydown事件(当一个键被按下去之后产生的事件，一般用来阻止按Enter键重复的提交表单的场景);

冒泡事件和默认事件行为:

概念：冒泡事件是指当子元素和父元素同时绑定同一事件时，当点击子元素会触发子元素的事件和父元素的事件。使得得到无法想要的结果。

对于冒泡事件，Jquery两个函数来处理：

stopPropagation()：如果存在父元素和子元素同时绑定同一事件，默认子元素触发时，父元素也会触发，该方法会阻止父元素的事件触发，只停留在子元素的事件当中

stopImmediatePropagation():如果一个子元素同时绑定同一个事件时有多个方法，默认会顺序执行，该方法会阻止顺序执行，防止下面的效果覆盖掉上面的效果。

1       <div id="top">
2           <div id="child1"></div>
3           <div id="child2"></div>
4       </div>

     $("div").css({
          ‘width‘:‘auto‘,
          ‘height‘:‘200px‘,
     });
     
     $("#top").bind(‘click‘,function(){
         $(this).css(‘background‘,‘red‘);

     })
     
     $("#child1").bind(‘click‘,function(){
        $(this).css(‘background‘,‘red‘); 
     });

如果在Chlid1区域点击的时候会触发top的click事件，这不是想要的结果，可以通过在child1的函数当中添加stopPropagation元素，那么只有选中的子区域会执行

click事件，父区域就不会执行click事件。

默认事件的概念:  指HTML元素自带的一些事件，如点链接就会跳转页面，点击Submit按钮就会提交等等。

preventDefault()：取消默认的事件，

     $("a").bind(‘click‘,function(){
         $(this).preventDefault();
         });

该代码会取消链接的默认行为，产生的效果是，点击超链接之后不会在跳转页面，一般用在取消一些默认的快捷键上面。

Jquery事件详解

标签：

原文地址：http://www.cnblogs.com/rain144576/p/5116849.html