事件对象的属性和方法

.target     当前触发事件的元素

.type       获取事件的类型

.pageX  和 .pageY    获取鼠标相对于页面左上角的x和y轴位移，不随滚动条移动而变化

.which  获取鼠标操作的键，左键 1，中键2，右键 3

.currentTarget   冒泡过程中的当前DOM元素，相当于this

.preventDefault()   阻止默认行为，例如a自带的跳转页面行为

.isDefaultPrevented()  确定方法是否被调用过

.stopPropagation()  阻止事件冒泡

this和event.target的区别：

js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；

.this和event.target都是dom对象

如果要使用jquey中的方法可以将他们转换为jquery对象。比如this和$(this)的使用、event.target和$(event.target)的使用；

可以通过event.target和 this的比较，来判断事件是不是由冒泡而触发。 

event.target代表当前触发事件的元素

在这里keydown的行为是同步行为，事实上并非如此。在按下键盘按键后数值还没有到达文本框而keydown事件已经触发。故达到的值应是按键之前的属性值。

我们可以用生活中的委托概念来类比理解：

假设一个马云，委托你当淘宝的主管，马老板制定了一个规矩（绑定事件），如果你的部门员工有人学慕课网的课程（事件），上报到你这里，你就奖励个大饼（回调函数）。

现在实际执行一下：

你部门一个员工学了慕课网，这个消息逐级上报，报到你这里（参数匹配），你马上就发大饼（触发回调函数）。

但是如果这个员工不是你们部门的，逐级上报的时候不会报给你（参数不匹配），你也就不会发大饼（触发不了回调函数）

每次触发DOM事件时会产生一个事件对象（也称event对象），此处的参数e接收事件对象。而事件对象也有很多属性和方法，其中target属性是获取触发事件对象的目标，也就是绑定事件的元素，e.target表示该DOM元素，然后在获取其相应的属性值。

例如：

$('.target1').change(function(e) {

        $("#result").html(e.target.value)

    });

e.target就等价于$('target1')

故e.target.value就等价于$('target1').val()

事件对象是用来记录一些事件发生时的相关信息的对象。
事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，
在所有事件处理函数运行结束后，事件对象就被销毁

<script type="text/javascript">

    //点击更新次数
    $("button:first").click(function(event,bottonName) {   //给第一个按钮绑定一个click事件
        bottonName = bottonName || 'first';            //如果bottonName未定义就用参数first
        update($("span:first"),$("span:last"),bottonName);  //引用update函数
    });

    //通过自定义事件调用，更新次数
    $("button:last").click(function() {    //给第二个按钮绑定click事件
        $("button:first").trigger('click','last');   //触发第一个按钮所绑定的click事件,并传递参数last
    });

    function update(first,last,bottonName) {  //自定义函数update
        first.text(bottonName);        //输出文本bottonName参数的值(first或者last)
        var n = parseInt(last.text(), 10);    // 用n记录点击次数
        last.text(n + 1);    //输出点击次数
    }
    </script>

event.type：获取事件的类型

触发元素的事件类型

$("a").click(function(event) {
  alert(event.type); // "click"事件
});

event.pageX 和 event.pageY：获取鼠标当前相对于页面的坐标

通过这2个属性，可以确定元素在当前页面的坐标值，鼠标相对于文档的左边缘的位置（左边）与 （顶边）的距离，简单来说是从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化

event.preventDefault() 方法：阻止默认行为

这个用的特别多，在执行这个方法后，如果点击一个链接（a标签），浏览器不会跳转到新的 URL 去了。我们可以用 event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)被调用过了

event.stopPropagation() 方法：阻止事件冒泡

事件是可以冒泡的，为防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数

event.which：获取在鼠标单击时，单击的是鼠标的哪个键

event.which 将 event.keyCode 和 event.charCode 标准化了。event.which也将正常化的按钮按下(mousedown 和 mouseupevents)，左键报告1，中间键报告2，右键报告3

event.currentTarget : 在事件冒泡过程中的当前DOM元素

冒泡前的当前触发事件的DOM对象, 等同于this.

this和event.target的区别：

js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；

.this和event.target都是dom对象

如果要使用jquey中的方法可以将他们转换为jquery对象。比如this和$(this)的使用、event.target和$(event.target)的使用；

通过在<form>元素上绑定submit事件，开发者可以监听到用户的提交表单的的行为

具体能触发submit事件的行为：

• <input type="submit">

• <input type="image">

• <button type="submit">

• 当某些表单元素获取焦点时，敲击Enter（回车键）

上述这些操作下，都可以截获submit事件。

这里需要特别注意：

form元素是有默认提交表单的行为，如果通过submit处理的话，需要禁止浏览器的这个默认行为
传统的方式是调用事件对象  e.preventDefault() 来处理， jQuery中可以直接在函数中最后结尾return false即可

jQuery处理如下：

$("#target").submit(function(data) { 
   return false; //阻止默认行为，提交表单
});

select事件只能用于<input>元素与<textarea>元素

<div>
  <input type="text" />
</div>

其中input元素可以触发focus()事件

div是input的父元素，当它包含的元素input触发了focus事件时，它就产生了focusin()事件。

focus()在元素本身产生，focusin()在元素包含的元素中产生

blur与focusout也亦是如此

$("input:last").focusin('慕课网', function fn(e) {

             $(this).val(e.data)

            });

首先，因为$("ele").focusin('data','fn')，点击文本框触发焦点事件，'data'传入了数据：“慕课网”储存在focusin件事里面（也就是这里的e），后面的e.data就是读取你传入的数据：“慕课网”这3个中文。val()你应该理解吧，就是把data数据输入到input文本框里。也就是为什么你点击文本框的时候会出现“慕课网”的原因了。

$(selector).hover(handlerIn, handlerOut)

• handlerIn(eventObject)：当鼠标指针进入元素时触发执行的事件函数

• handlerOut(eventObject)：当鼠标指针离开元素时触发执行的事件函数

mouseover为例：

<div class="aaron2">
    <p>鼠标离开此区域触发mouseleave事件</p>
</div>

如果在p元素与div元素都绑定mouseover事件，鼠标在离开p元素，但是没有离开div元素的时候，触发的结果:

1. p元素响应事件

2. div元素响应事件

这里的问题是div为什么会被触发？ 原因就是事件冒泡的问题，p元素触发了mouseover，他会一直往上找父元素上的mouseover事件，如果父元素有mouseover事件就会被触发

所以在这种情况下面，jQuery推荐我们使用 mouseenter事件

mouseenter事件只会在绑定它的元素上被调用，而不会在后代节点上被触发