1.  事件冒泡

    阻止事件冒泡的两种方式：

• event.stopPropagation();
• return false ;

2. 绑定事件——bind(type,[data],function)

   type为一个或多个事件类型的字符串，data是作为event.data属性值传递给事件对象的额外对象。

• 一个元素绑定多个事件，可用空格隔开。

  $("#btn").bind( "click mouseover", function () {  ...);

• 通过映射方式为同一元素绑定多个事件。

$(function () {            $( ".txt").bind({            "focus": function () {                    $( "#divTip").html("请输入" ).show();                },            "blur":function () {                    $( "#divTip")                        .show()                        .html( "合法");                }            });        });

 

• 第二个参数data的使用。

var info = { name: 'Cathy', date: '2014-1-24' };    $(function () {        $("#test").bind("click", info, function (event) {            $("#divTip").show().html(event.data.name + "," + event.data.date);        });    });

3.事件切换

• hover:鼠标悬停与鼠标移除事件切换。

$(function () {        $(".clsTitle").hover(        function () {            $(".clsContent").show();        },        function () {            $(".clsContent").hide();        });    });

• toggle:依次顺序调用N个函数，最后一个调用完成后再从第一个轮流执行。

$(function () {        $("#divTest").toggle(            function () {                alert(1);            },            function () {                alert(2);            },            function () {                alert(3);            }        );    });

4.移除事件——unbind(type,func)

   参数说明：type为要移除的事件类型，func为要移除的事件处理函数。如果func为空，则移除元素所有的事件。

function func() {        $("#divTip").append("点击按钮2");    }    $(function () {        $("#Button1").click(function () {            $("#divTip").append("点击按钮1");        });        $("#Button2").click(func);        $("#Button3").click(function () {            $("input").unbind("click", func);        });    });

5.其他事件

one(type,[data],func)——为元素绑定只执行一次的事件。

trigger(type,[data])——在所选择的元素上触发指定类型的事件。

$(function () {var i = 1;function btn_Click() {this.value = i++;            }            $( "input").one("click" , btn_Click);            $( "input").bind("click" , btn_Click);            $( "input").trigger("click" );        })

6.实例应用

①选项卡效果

      
       
家居 
       
 电器
       
 二手
      
      
       
我是家居的内容 
       
 欢迎您来到电器城 
       
 二手市场，产品丰富多彩 
      

②屏幕中间弹窗遮罩

        
      
            
                   
       这是一条可删除的记录            
                                           
      
        
      
        
      
            
       
                
        删除时提示            
       
            
       
                
        
        您真的要删除该条记录吗？