jQuery篇——事件对象及事件委托

-------数不清第几次复习jQuery了，还是不记得(～﹃～)~，感觉写一次博客就能记住，并且便于复习和查阅，开开心心的复习以下jQuery事件对象及事件委托吧！

1.jQuery事件绑定

jQuery中有两种绑定事件方式

• .eventName(fn);
  编码效率略高/ 部分事件jQuery没有实现,所以不能添加
• .on(eventName, fn);
  编码效率略低/ 所有js事件都可以添加

注意点:二者可以添加多个相同或者不同类型的事件,不会覆盖

		    $("button").mouseenter(function () {
                alert("hello mouseenter");
            });
            $("button").on("click", function () {
                alert("hello click1");
            });

事件移除

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

2.jQuery事件冒泡和默认行为

1. 什么是事件冒泡?
   子元素和父元素注册相同的事件，子元素向父元素传递响应事件。
2. 如何阻止事件冒泡？
   在子元素的回调函数中return false；即可阻止事件冒泡，父元素便不可响应事件。
   或者在子元素的回调函数中传入一个event参数，执行event.stopPropagation();语句，同样可阻止事件冒泡。
3. 什么是默认行为?
   如a标签的跳转与input标签的提交事件，是一个标签的默认行为。
4. 如何阻止默认行为
   在事件的回调函数中return false或者执行event.preventDefault();语句后即可阻止默认行为。

			$("a").click(function (event) {
                alert("弹出注册框");
                // return false;
                event.preventDefault();
            });

3.jQuery事件自动触发

让事件实现自动触发，可以通过jQuery以下两种方法

            $(".son").click(function (event) {
                alert("son");
            });
            $(".father").click(function () {
                alert("father");
            });
            $(".father").trigger("click");				//传入要触发的事件作为参数
            $(".father").triggerHandler("click");		//同trigger

二者的区别：
trigger: 如果利用trigger自动触发事件,会触发事件冒泡。如果利用trigger自动触发事件,会触发默认行为
triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发事件冒泡。如果利用triggerHandler自动触发事件, 不会触发默认行为

注意：利用trigger自动触发a标签的跳转事件时，用span标签把a标签的内容包裹起来来触发span标签

4.jQuery自定义事件

首先： 想要自定义事件, 必须满足两个条件
1.事件必须是通过on绑定的
2.事件必须通过trigger来触发

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

5.jQuery事件命名空间

想要事件的命名空间有效,必须满足两个条件
1.事件是通过on来绑定的
2.通过trigger触发事件

            $(".son").on("click.zs", function () {
                alert("click1");		//在事件名称后打点表示命名空间。
            });
            $(".son").on("click.ls", function () {
                alert("click2");
            });
            // $(".son").trigger("click.zs");
            $(".son").trigger("click.ls");

利用trigger触发子元素带命名空间的事件, 那么父元素带相同命名空间的事件也会被触发. 而父元素没有命名空间的事件不会被触发
利用trigger触发子元素不带命名空间的事件,那么子元素所有相同类型的事件和父元素所有相同类型的事件都会被触发

6.jQuery事件委托

在jQuery中,如果通过核心函数找到的元素不止一个, 那么在添加事件的时候,jQuery会遍历所有找到的元素,给所有找到的元素添加事件，却不会给动态增加的元素添加事件。要给动态添加的子元素添加事件，就要用到事件委托。

            $("ul").delegate("li", "click", function () {
                console.log($(this).html());
            });
            以下代码的含义, 让ul帮li监听click事件
            之所以能够监听, 是因为入口函数执行的时候ul就已经存在了, 所以能够添加事件
            之所以this是li,是因为我们点击的是li, 而li没有click事件, 所以事件冒泡传递给了ul,ul响应了事件
            既然事件是从li传递过来的,所以ul必然指定this是谁

7.补充：jQuery的其他事件

由于在mouseover/mouseout事件中, 子元素被移入移出也会触发父元素的事件。jQuery引入了其他函数

            $(".father").mouseover(function () {
                console.log("father被移入了");
            });
            $(".father").mouseout(function () {
                console.log("father被移出了");
            });

mouseenter/mouseleave事件, 子元素被移入移出不会触发父元素的事； 推荐大家使用：

            $(".father").mouseenter(function () {
                console.log("father被移入了");
            });
            $(".father").mouseleave(function () {
                console.log("father被移出了");
            });
            由此引申出hover事件
           $(".father").hover(function () {
               	 console.log("father被移入了");
            },function () {
                 console.log("father被移出了");
            });						//hover可以传入一个函数或者两个函数，一个的话当成两个一样的函数调用。