jQuery知识整理笔记4

1，事件绑定
    （1），eventName(fn);编码效率高/部分事件没有实现，不能添加

        $("button").click(function(){alert("hello1");});

    （2）,   on(eventName,fn);编码效率略低/所有js事件都可以添加    

        $("button").on("click",function(){alert("hello2");});

2，事件解绑
    off方法
    $("button").off();不传参数，移除所有事件
    $("button").off("click");传一个参数，会移除所有指定类型的事件
    $("button").off("click",test1);传两个参数，会移除所有指定类型的指定事件

3，事件冒泡和默认行为
    事件冒泡：从子级到父级的响应
    阻止事件冒泡：return false;或者event.stopPropagation();    (注意event为function（event）里面的参数，并且前面两个方法都是写在子级)
    默认行为：按照代码正常运行
    阻止默认行为：return false;或者event.preventDefault();

4，自动触发
    .trigger();会触发事件冒泡和默认行为
    .triggerHandler();不会触发事件冒泡和默认行为
    自定义事件：事件必须由on来绑定，事件必须通过trigger或者triggerHandler来触发

    $(".son").on("myClick",function(){alert("son");});$(".son").trigger("myClick");

5，事件命名空间（有效的）：事件必须由on来绑定，事件必须通过trigger或者triggerHandler来触发

    //同样的事件命名张三$(".son").on("Click.zs",function(){alert("click1");});//同样的事件命名李四$(".son").on("Click.ls",function(){alert("click2");});//只触发李四的事件$(".son").trigger("Click.ls");

    （1），利用trigger触发子元素带命名空间的事件，那么父元素带相同的命名空间的事件也会被触发，而父元素没有命名空间的事件不会被触发
    （2），利用trigger触发子元素不带命名空间的事件，那么子元素所有相同类型的事件和父元素所有相同类型的事件都会被触发6，事件委托：找一个入口函数执行之前就有的元素来监听，动态添加的某些元素的事件

    $("ul").delegate("li","click",function(){console.log($(this).html());});<ul><li>第一个li</li><li>第二个li</li><li>第三个li</li></ul><button>添加一个li</button>

7，移入移出事件:
    mouseover/mouseover事件，子元素被移入移出也会触发父元素事件

    $(".father").mouseover(function(){console.log("father被移入");});$(".father").mouseover(function(){console.log("father被移出");});<div class="father"><div class="son"></div></div>

    mouseenter/mouseleave事件,子元素被移入移出不会触发父元素事件

    $(".father").mouseenter(function(){console.log("father被移入");});$(".father").mouseleave(function(){console.log("father被移出");});

    hover移入移出都监听，可以有两个function也可以只写一个

    $(".father").hover(function(){console.log("father被移入");},function(){console.log("father被移出");});