4.1JQuery中的事件

4.1.1 简写方式

三种方式等效：

$(document).ready(function(){})         $(function(){})        $().ready(function(){})

4.1.2事件的绑定

在文档装载完成时，如果打算为元素绑定事件来完成某些操作，则可以使用bind（）方法来匹配元素进行特定事件的绑定

bind( type [ ，data]，fn)；

第一个参数是事件类型：blur、focus、load、resize、scroll；或者是自定义的名称

第二个参数是可选参数，作为event.data 属性值传递给事件对象的额外数据对象

第三个参数则是用来绑定处理函数。

    <style type="text/css">
        .content{
            display: none;
        }
    </style>
</head>
<body>
    <div id="panel">
        <h5 class="head">什么是Jquery</h5>
        <div class="content">Jquery是
        </div>
    </div>
    <script>
        $(function () {
            $(".head").bind("click",function (){
                $(this).next("div.content").show();
            })
        })
    </script>
</body>
加强效果：如果内容是显示的点击就隐藏，否则反之
<body>
    <div id="panel">
        <h5 class="head">什么是Jquery</h5>
        <div class="content">Jquery是</div>
    </div>
    <script>
        $(function () {
            $("#panel h5.head").bind("click",function () {

                /*避免.next()被多次使用，则需要定义一个局部变量*/
                var $content=$(this).next("div.content");

                if ($content.is(":visible")){
                    $content.hide();
                }else {
                    $content.show();
                }
            })
        })
    </script>
</body>
3改变绑定事件的类型
可以将click进行替换  比如mouseover
4简写绑定事件
<script>
    $(function () {
        $(".head").mouseover(function () {
            $(this).next("div.content").show();
        });
        $(".head").mouseout(function () {
            $(this).next("div.content").hide();
        });
    })
</script>
4.1.3合成事件    hover（）方法   和   toggle（）方法
1.hover（）方法    语法结构：hover（enter，leave）;   
hover用来模拟光标悬停事件，当光标移动到元素上时，会触发指定的第一个函数（enter）；当光标移出这个元素是，会触发指定的第二个函数（leave）；
与mouseover和mouseout一样
<script>
    $(function () {
       $(".head").hover(function () {
           $(this).next("div.content").show();
       },function () {
           $(this).next("div.content ").hide();
       });
    })
</script>
2toggle（）方法   语法结构：toggle（fn1，fn2，。。。。fnN）     
toggle（）方法用于模拟鼠标连续单击事件，第一个单击触发指定的第一个函数（fn1）；当再次单击同一个元素时，则触发指定的第二个元素
4.1.4事件冒泡
1什么是冒泡
在页面上可以有很多事件，也可以多个元素响应同一个事件。
假设网页上有两个元素，其中一个元素嵌入在另一个元素里，并且都绑定了click事件，同时<body>元素上也绑定了click事件
<body>
    <div id="content">
        外层div元素
        <span>内层span元素</span>
        外层div元素
    </div>
    <div id="msg"></div>
    <script>
        $(function () {
            /*为span元素绑定click事件*/
            $("span").bind("click",function () {
                var txt=$('#content').html()+"<p>外层span被单击。</p>";
                $('#msg').html(txt);
            });
            /*为div元素绑定click事件*/
            $("#content").bind("click",function () {
                var txt=$('#msg').html()+"<p>外层div被单击。</p>";
                $('#msg').html(txt);
            })
            /*为body元素绑定click事件*/
            $('body').bind('click',function () {
                var txt=$('#msg').html()+"<p>body被单击。</p>";
                $('#msg').html(txt);
            })

        })
    </script>
</body>
外层div元素 内层span元素 外层div元素
外层div元素 内层span元素 外层div元素

外层span被单击。

外层div被单击。

body被单击。

绑定事件    之所以成为冒泡，是因为事件会按照DOM的层次结构像水泡一样不断向上直至顶端；

2事件冒泡引发的问题

有必要对事件的作用范围进行限制；为了解决冒泡问题，引出了下面内容

　　　　事件对象

jquery为了在任何浏览器中都能轻松地获取事件对象以及事件对象的一些属性。jquery进行了必要的封装和扩展

$("element").bind("click",function(event){   //event:事件对象})；

当单击“element”元素时，事件对象就被创建了，这个事件对象只有处理函数才能访问到。事件处理函数执行完毕后，事件对象就被销毁了。

　　　　停止事件冒泡

停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行。在jquery中提供了stopPropagation（）方法来停止事件冒泡；

/*为span元素绑定click事件*/
$("span").bind("click",function () {
    var txt=$('#content').html()+"<p>外层span被单击。</p>";
    $('#msg').html(txt);
    event.stopPropagation();
});
/*为div元素绑定click事件*/
$("#content").bind("click",function () {
    var txt=$('#msg').html()+"<p>外层div被单击。</p>";
    $('#msg').html(txt);
    event.stopPropagation();
})
阻止默认行为
网页中的元素自己默认的行为，在JQuery 中提供了preventDefault（）方法来阻止元素的默认行为。
<body>
    <form action="test.html">
        用户名：<input type="text" id="username">
        <br>
        <input type="submit" value="提交" id="sub">
    </form>
    <div id="msg"></div>
    <script>
        $(function () {
            $('#sub').bind('click',function (event) {
                var username=$("#username").val();
                if (username==""){
                    $("#msg").html("<p>文本框的值不能为空</p>");
                    event.preventDefault();
                }

            });
        })
    </script>
</body>
event.preventDefault会阻止默认值    或者改写为return false；    event.stopPropagation()//停止事件冒泡 
　　　　事件捕获
事件捕获和事件冒泡是刚好相反的两过程，事件捕获是从最顶端往下开始触发。  从最外层元素开始，然后到最里层元素。
jquery不支持事件捕获，如果需要使用事件捕获请直接使用原生的js
4.1.5事件对象属性
event.type()方法 该方法的作用是可以获取到事件的类型
event.preventDefault()方法    该方法作用是阻止默认的事件行为。
event.stopPropagation（）方法   阻止事件冒泡
event.target（）方法  获取到触发事件的元素。
event.relatedTarget（）方法  触发事件的相关元素
event.pageX()方法/event.pageY()方法  获取到光标相对于页面的x坐标和y坐标。
event.which()方法   在鼠标单击实践中获取到鼠标的左中右键；在键盘事件中获取键盘的按键 1=鼠标left   2=鼠标中键   3=鼠标右键
<body>
    <p class="ha">sdfsfsdf</p>
    <script>
        $(function () {
            $(".ha").mousedown(function (e) {
                alert(e.pageX+"+"+e.pageY);
            })

        })
    </script>
</body>

event.metaKey()方法
获取键盘中的<ctrl>按键
event.originalEvent()方法
作用是指向原始的事件对象

4.1.6移除事件    语法结构unbind（【type】【，data】）；
第一个参数是事件类型  第二个参数是将要移除的函数
（1）如果没有参数，则删除所有绑定的事件
（2）如果提供了事件类型作为参数，则只删除该类型的绑定事件
（3）如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。
2移除其中一个事件
unbind("click",fn)

对于只需要触发一次的方法one（）方法，当处理函数触发一次之后，立即被删除。在每个对象上，事件处理函数只会被执行
one（type ，【data】，fn）；

4.1.7模拟操作
1.常用模拟
当页面装载完毕之后，就会立刻输出想要的效果，trigger（）方法。
2触发自定义事件
trigger()方法不仅能触发浏览器支持的具有相同名称的事件，也可以触发自定义名称的事件。
3传递数据
trigger（type，【，data】）方法有两个参数，第一个参数是要触发的事件类型，第二个承诺书是传递时间处理函数的附加数据，以数组的形式
传递。通常可以通过传递一个参数给回调函数来区别这次事件是代码触发的还是用户触发的。
4执行默认操作
trigger（）方法触发事件之后，会执行浏览器默认的操作
如果不想执行浏览器的默认操作，不得到焦点，则可以使用另外一种方法triggerHandler（）方法。
4.1.8其他方法
1绑定多个事件类型
bind（“mouseover mouseout”，function（）{}）
2添加时间命名空间，便于管理
在所绑定的事件类型后面添加命名空间，这样在删除事件时只要指定命名空间即可。
3相同的事件名称，不同的命名空间执行方法
trigger（“click！”）后面的感叹号的作用是匹配所有不包含在命名空间中的click方法
如果需要将带有命名控价的元素也执行则需要将其中的感叹号去除。