• 鼠标事件
  • jQuery鼠标事件之click与dblclick事件
  • jQuery鼠标事件之mousedown与mouseup事件
  • jQuery鼠标事件之mousemove事件
  • jQuery鼠标事件之mouseover与mouseout事件
  • jQuery鼠标事件之mouseenter与mouseleave事件
  • jQuery鼠标事件之hover事件
  • jQuery鼠标事件之focusin事件
  • jQuery鼠标事件之focusout事件
• 表单事件
  • jQuery表单事件之blur与focus事件
  • jQuery表单事件之change事件
  • jQuery表单事件之select事件
  • jQuery表单事件之submit事件
• 键盘事件
  • jQuery键盘事件之keydown()与keyup()事件
  • jQuery键盘事件之keypress()事件
• 事件的绑定和解绑
  • on()的多事件绑定
  • on()的高级用法
  • 卸载事件off()方法
• 事件对象的作用
  • jQuery事件对象的作用
  • jQuery事件对象的属性和方法
• 自定义事件
  • jQuery自定义事件之trigger事件
  • jQuery自定义事件之triggerHandler事件

鼠标事件

jQuery鼠标事件之click与dblclick事件

• $ele.click( handler(eventObject) ) ： 每次$ele元素触发点击操作会执行回调 handler函数，方法中的this是指向了绑定事件的元素

$("button:eq(0)").click(function() {
    alert(this);
})

• $ele.click( [eventData ], handler(eventObject) ) ： 可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题

$("button:eq(2)").click(1111, function (e) {
    alert(e.data)      //1111
})

jQuery鼠标事件之mousedown与mouseup事件

• $ele.mousedown( handler(eventObject) )

• $ele.mouseup( [eventData ], handler(eventObject) )

用event 对象的which区别按键，敲击鼠标左键which的值是1，敲击鼠标中键which的值是2，敲击鼠标右键which的值是3

$("button:eq(0)").mousedown(function(e) {
    alert('e.which: ' + e.which);
})

$("button:eq(2)").mousedown(1111, function (e) {
    alert(e.data);                //1111
}) 

jQuery鼠标事件之mousemove事件

• $ele.mousemove( handler(eventObject) )

$(".aaron1").mousemove(function(e) {
    $(this).find('p:last').html('移动的X位置：' + e.pageX);
})

 $(".right").mousemove(1111,function(e){
    $(this).find('p:last').html('数据:' + e.data);
})

如果处理器做任何重大的处理，或者如果该事件存在多个处理函数，这可能造成浏览器的严重的性能问题

jQuery鼠标事件之mouseover与mouseout事件

• $ele.mouseover( handler(eventObject) )

$(".right p:first").mouseover('data = 慕课网', function(e) {
    $(".right a").html('mouseover事件触发次数：' + (++n) + '<br/> 传入数据为 ：'+ e.data)
})

jQuery鼠标事件之mouseenter与mouseleave事件

mouseenter事件和mouseover的区别

关键点就是：冒泡的方式处理问题

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

只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。

只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。

jQuery鼠标事件之hover事件

• $(selector).hover(handlerIn, handlerOut)

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

$("p").hover(
    function() {
        $(this).css("background", 'red');
    },
    function() {
        $(this).css("background", '#bbffaa');
    }
)

jQuery鼠标事件之focusin事件

• $ele.focusin( [eventData ], handler ) : 当一个元素，或者其内部任何一个元素获得焦点的时候触发事件

$("input:first").focusin(function() {
     $(this).css('border','2px solid red');
})

$("input:last").focusin('慕课网', function(e) {
     $(this).val(e.data);
})

jQuery鼠标事件之focusout事件

• $ele.focusout( [eventData ], handler ) : 当一个元素，或者其内部任何一个元素失去焦点的时候触发事件

$("input:first").focusout(function() {
     $(this).css('border','2px solid red');
})

$("input:last").focusout('慕课网', function(e) {
     $(this).val(e.data);
})

表单事件

jQuery表单事件之blur与focus事件

focus和blur不支持冒泡，focusin和focusout支持冒泡

jQuery表单事件之change事件

可以通过change事件去监听这些改变的动作

input元素 ： 监听value值的变化，当有改变时，失去焦点后触发change事件。对于单选按钮和复选框，当用户用鼠标做出选择时，该事件立即触发。

select元素 ： 对于下拉选择框，当用户用鼠标作出选择时，该事件立即触发

textarea元素 ： 多行文本输入框，当有改变时，失去焦点后触发change事件

$(".target3").change(function(e) {
    $("#result").html(e.target.value)
})

jQuery表单事件之select事件

当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。

• $ele.select( [eventData ], handler(eventObject) )

$("input").select(function(e){
    alert(e.target.value)
})

jQuery表单事件之submit事件

• $ele.submit( [eventData ], handler(eventObject) )

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

• <input type="submit">
• <input type="image">
• <button type="submit">
• 当某些表单元素获取焦点时，敲击Enter（回车键）

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

$('#target2').submit(function() {
    alert('捕获提交表达动作,阻止页面跳转')
    return false;
})

键盘事件

jQuery键盘事件之keydown()与keyup()事件

keydown是在键盘按下就会触发

keyup是在键盘松手就会触发

理论上它可以绑定到任何元素，但keydown/keyup事件只是发送到具有焦点的元素上，不同的浏览器中，可获得焦点的元素略有不同，但是表单元素总是能获取焦点，所以对于此事件类型表单元素是最合适的。

$('.target1').keydown(function(e) {
    $("em:first").text(e.target.value);
})

keydown事件会少一个字符是因为事件触发在前,keydown事件触发在文字还没敲进文本框

jQuery键盘事件之keypress()事件

keypress事件与keydown和keyup的主要区别

• 只能捕获单个字符，不能捕获组合键
• 无法响应系统功能键（如delete，backspace）
• 不区分小键盘和主键盘的数字字符

KeyPress主要用来接收字母、数字等ANSI字符，而 KeyDown 和 KeyUP 事件过程可以处理任何不被 KeyPress 识别的击键。诸如：功能键（F1-F12）、编辑键、定位键以及任何这些键和键盘换档键的组合等。

$('.target1').keypress(function(e) {
    $("em").text(e.target.value)
});

事件的绑定和解绑

on()的多事件绑定

$("#elem").click(function(){})  //快捷方式
$("#elem").on('click',function(){}) //on方式

// 多个事件绑定同一个函数
$("#elem").on("mouseover mouseout",function(){ })

// 多个事件绑定不同函数
$("#elem").on({
    mouseover:function(){},  
    mouseout:function(){}
});

// 将数据传递到处理程序
$( "button" ).on( "click", {
  name: "慕课网"
}, function ( event ) {
  alert( "Hello " + event.data.name ); //Hello 慕课网
} )

on()的高级用法

委托机制

.on( events ,[ selector ] ,[ data ], handler(eventObject) )

//给body绑定一个click事件
//没有直接a元素绑定点击事件
//通过委托机制，点击a元素的时候，事件触发
$('body').on('click', '.aaron', function(e) {
   alert(e.target.textContent)
})

卸载事件off()方法

• 通过.on()绑定的事件处理程序
• 通过.off() 方法移除该绑定

// 绑定2个事件
$("elem").on("mousedown mouseup",fn)

// 删除一个事件
$("elem").off("mousedown")

// 删除所有事件
$("elem").off("mousedown mouseup")

// 快捷方式删除所有事件
$("elem").off()

事件对象的作用

jQuery事件对象的作用

//多事件绑定一个，不用每个li元素都绑定事件
$("ul").on('click',function(e){
   alert('触发的元素是内容是: ' + e.target.textContent)
})

jQuery事件对象的属性和方法

event.type：获取事件的类型

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

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

以页面为参考点,不随滑动条移动而变化

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

可以用 event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)被调用过了

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

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

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)的使用；

自定义事件

jQuery自定义事件之trigger事件

.trigger ：根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为

• 触发浏览器事件

$('#elem').trigger('click');

• trigger除了能够触发浏览器事件，同时还支持自定义事件，并且自定义事件还支持传递参数

$('#elem').on('Aaron', function(event,arg1,arg2) {
    alert("自触自定义时间")
 });
$('#elem').trigger('Aaron',['参数1','参数2'])

// 实例
$("button:first").click(function(event,bottonName) {
    bottonName = bottonName || 'first';
    update($("span:first"),$("span:last"),bottonName);
});

//通过自定义事件调用，更新次数
$("button:last").click(function() {
    $("button:first").trigger('click','last');
});

function update(first,last,bottonName) {
    first.text(bottonName);
    var n = parseInt(last.text(), 10);
    last.text(n + 1);
}

jQuery自定义事件之triggerHandler事件

triggerHandler与trigger的用法是一样的，重点看不同之处：

• triggerHandler不会触发浏览器的默认行为，.triggerHandler( “submit” )将不会调用表单上的.submit()
• .trigger() 会影响所有与 jQuery 对象相匹配的元素，而 .triggerHandler() 仅影响第一个匹配到的元素
• 使用 .triggerHandler() 触发的事件，并不会在 DOM 树中向上冒泡。 如果它们不是由目标元素直接触发的，那么它就不会进行任何处理
• 与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反，.triggerHandler() 返回最后一个处理的事件的返回值。如果没有触发任何事件，会返回 undefined

$("input").on("focus",function(event,title) {
    $(this).val(title)
});

$("#accident").on("click",function() {
    alert("trigger触发的事件会在 DOM 树中向上冒泡");
});
//trigger触发focus
$("button:first").click(function() {
    $("a").trigger("click");
    $("input").trigger("focus");
});

//triggerHandler触发focus
$("button:last").click(function() {
    $("a").triggerHandler("click");
    $("input").triggerHandler("focus","没有触发默认聚焦事件");
});