JQuery事件机制

事件的注册

  • 普通的注册简单的事件,缺点只能注册一个事件
    $("p").click(function(){
        alert("简单的事件");
    }) 
    
  • bind方式注册事件
    $("p").bind({
        click:function(){
            alert('这是bind的click事件');
        },
        mouseenter:function(){
            alert('这是bind的mouseenter事件');
        }
    })
    
  • 委托事件 delegate
    $("div").delegate("p","click",function(){
        alert("这是一个委托事件");
    })
    

要给div注册一个委托事件,但是最终不是div执行的,而是p执行。

第一个参数指明事件由谁来执行。

第二个参数是事件的类型

第三个从参数,函数

  • 发展到on事件,既可以委托,又可以做普通事件
    $("div").on("click","p",function(){
        alert("on的委托事件");
    })
    $("#btm").on("click",function(){
        alert("你点击的是on的普通事件");
    })
    

一般建议用on来注册事件,如果是用jq动态添加元素,而元素又有事件,那么要使用委托事件才能使元素带有事件。

事件的解绑

  • unbind方式(一般不用)
    $(selector).unbind();//解绑所有事件
    $(selector).unbind("click");//解绑指定事件
    
  • undelegate(一般不用了)
    $(selector).undetegate();
    $(selector).undetegate();
    
  • off推荐使用的方式
    $(selector).off();//解绑所有事件
    $(selector).off("click");//解绑指定事件
    

触发事件

$("#btn").on("click",function(){
    $("p").click();
    $("p").trigger("click");
})

阻止冒泡事件

$("a").on("click",function(e){
    alert("onclick");
    //return false;     //阻止浏览器默认行为和事件冒泡
    e.preventDefault(); //阻止浏览器默认行为
    e.stopPropagation();//阻止冒泡
})

发表评论

电子邮件地址不会被公开。 必填项已用*标注