jQuery事件学习

$(document).ready()方法 (亦可这样写$(function(){}))和window.onload方法有相似的功能，但在执行时间方面不同

window.onload()实在网页中所有的元素（包括元素所有的关联元素，如图片链接等）完全加载后才执行，而$(document).ready()方法注册的事件处理程序，在DOM完全就绪(并不意味着元素关联文件下载完毕)就可以被调用，提高了Web应用程序的响应速度。

hover(enter,leave)方法：用于模拟光标悬停事件,当光标移动到元素上时会触发第1个函数，当光标移除这个元素时，会触发第二个函数

toggle(fn1,fn2,……)方法用于模拟鼠标连续单击事件，第一次单击触发第一个事件，第二次点击触发第二个事件……

triggerHandler()方法触发被选元素的指定的事件类型。但不会执行浏览器默认动作，也不会产生事件冒泡。

$("form #name").triggerhandler("blur");

事件问题

事件对象：当触发某一事件时，事件对象就被创建

例如：$("p").on("click",function(e){

         e.preventDefault();

         console.log("事件对象产生");

           })

当点击p的时候，事件对象就产生了，这个对象只能事件处理函数才能访问.

停止事件冒泡：事件冒泡就是，当子元素和父元素绑定了同一事件之后，在触发子元素的事件之后，还会触发父元素上相同的事件，就像水下的泡泡一直向上传递。

 

例如：<div class="parent">

           <div class="child_level01">

              <span class="child_level02"></span>

          </div>

        </div>

js代码：$(function(){

            $(".parent").on("click",function(e){

                   console.log("parent");

               });

            $(".child_level01").on("click",function(e){

                   console.log("child_level01");

               });

           $(".child_level02").on("click",function(e){

                   console.log("child_level02");

               })

             })

当点击span标签时，会发现控制台输出：parent，child_level01，child_level02.

停止冒泡的方法，是在方法中加  e.stopPropagation();

阻止默认行为： 网页元素有自己的默认的行为，例如，单击超链接后会跳转、单击提交按钮后表单会提交

preventDefault()方法可以阻止元素的默认行为。

事件捕获：事件捕获和事件冒泡正好是两个相反的过程，事件捕获是从最顶端往下开始触发。

事件对象的属性

event.type :可以获取事件的类型

event.preventdefault():阻止默认行为

event.stopPropagation():阻止事件冒泡

event.target:获取到触发事件的元素

event.relatedTarget:获取到触发事件的相关元素

event.pageX和event.pageY：获取到光标相对于页面的x和y坐标。

event.which:在鼠标单击事件中获取到鼠标的左、中、右键，在键盘事件中获取键盘的按键。

event.metaKey:键盘事件中获取<ctrl>按键