jQuery学习手记 事件篇

一、 鼠标事件

1. click事件与dblclick事件 单击与双击事件
   click方法用于监听用户单击操作，另一个方法是dblclick方法用于监听用户双击操作。这两个方法的用法是类似的

方法一：$ele.click() 不带参数
例子：
<div id="test">点击触发<div>
$("#test").click(function(){
alert('触发指定事件')
})

方法二：$ele.click( [eventData ], handler(eventObject) )
<div id="test">点击触发<div>
$("#test").click(11111,function(e) {
//this指向 div元素
//e.date => 11111 传递数据
}); // 点击触发事件，事件为function(e),11111为传递给e的参数

1. mousedown与mouseup事件 鼠标按下与松开
   mousedown的快捷方法可以监听用户鼠标按下的操作，与其对应的还有一个方法mouseup快捷方法可以监听用户鼠标弹起的操作。两种方法用法类似。
   使用方法和click()类似。

2. mousemove事件，mouseover与mouseout事件
   mousemove方法可以监听用户鼠标移动的的操作。
   mouseover()与mouseout()事件用来监听用户的移入移出操作。
   用法和click()类似。

3. mouseenter与mouseleave事件
   不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
   用mouseenter与mouseleave，可以避免冒泡问题

4. hover事件 鼠标移入移出事件
   $(selector).hover(handlerIn, handlerOut)
   handlerIn(eventObject)：当鼠标指针进入元素时触发执行的事件函数
   handlerOut(eventObject)：当鼠标指针离开元素时触发执行的事件函数
   例子：
   $("p").hover(
   function() {
   $(this).css("background", 'red');
   },
   function() {
   $(this).css("background", '#bbffaa');
   }
   ); // 鼠标移入移出改变背景颜色

5. focusin事件与focusout事件 获得焦点、失去焦点事件
   用户在点击聚焦的时候，如果开发者需要捕获这个动作的时候，可用focusin事件。失去焦点时，使用focusout事件。
   三种用法，与.click()类似。

二、 表单事件

1. blur与focus事件
   表单焦点处理事件，focus获取焦点事件，blur失去焦点事件。
   focus和blur 不支持事件冒泡， focusin和focuout 支持事件冒泡

2. change事件 改变表单事件
   <input>元素，<textarea>和<select>元素的值都是可以发生改变的，可以通过change事件去监听这些改变的动作
   input元素
   监听value值的变化，当有改变时，失去焦点后触发change事件。对于单选按钮和复选框，当用户用鼠标做出选择时，该事件立即触发。
   select元素
   对于下拉选择框，当用户用鼠标作出选择时，该事件立即触发
   textarea元素
   多行文本输入框，当有改变时，失去焦点后触发change事件

3. select事件 选中表单文本事件
   select事件只能用于<input>元素与<textarea>元素。
   当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
   三种触发事件方式用法，与.click()类似。

4. submit事件
   以通过submit事件，监听下提交表单的这个动作。
   用法语.click()类似。
   具体能触发submit事件的行为：
    <input type="submit">
    <input type="image">
    <button type="submit">
    当某些表单元素获取焦点时，敲击Enter（回车键）

三、 键盘事件

1. keydown()与keyup()事件
   监听键盘按下与松开的事件。与基本事件三种用法相同。

2. keypress()事件
   监听键盘按下的事件。
   keydown与keypress的区别：
   系统由KeyDown返回键盘的代码, 然后由TranslateMessage函数翻译成成字符, 由KeyPress返回字符值. 因此在KeyDown中返回的是键盘的代码, 而KeyPress返回的是ASCII字符. 所以根据你的目的, 如果只想读取字符, 用KeyPress, 如果想读各键的状态, 用KeyDown.

四、 时间的绑定和解绑

1. on()的多事件绑定
   所有的快捷事件在底层的处理都是通过一个"on"方法来实现的。jQuery on()方法是官方推荐的绑定事件的一个方法
   基本用法：.on( events ,[ selector ] ,[ data ] )
   最常见的给元素绑定一个点击事件，对比一下快捷方式与on方式的不同
   $("#elem").click(function(){}) //快捷方式
   $("#elem").on('click',function(){}) //on方式
   最大的不同点就是on是可以自定义事件名。
   多个事件绑定同一个函数
   $("#elem").on("mouseover mouseout",function(){ });
   通过空格分离，传递不同的事件名，可以同时绑定多个事件
   多个事件绑定不同函数
   $("#elem").on({
   mouseover:function(){},
   mouseout:function(){},
   });
   通过空格分离，传递不同的事件名，可以同时绑定多个事件，每一个事件执行自己的回调方法

2. 卸载事件off()方法
   通过off() 方法移除事件绑定。
   绑定2个事件
   $("elem").on("mousedown mouseup",fn)
   删除一个事件
   $("elem").off("mousedown")
   删除2个事件
   $("elem").off("mousedown mouseup")
   快捷方式删除所有事件。
   $("elem").off()

五、 事件对象的使用
事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁。
例子：
<div class="left">
<div class="aaron">
<ul>
<li>点击：触发一</li>
<li>点击：触发二</li>
<li>点击：触发三</li>
<li>点击：触发四</li>
</ul>
</div>
</div>

<script type="text/javascript">

    //多事件绑定一
    $("ul").on('click',function(e){
       alert('触发的元素是内容是: ' + e.target.textContent)
    })   // function(e),中的e即为点击的li对象

this和event.target的区别：
js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；
.this和event.target都是dom对象
如果要使用jquey中的方法可以将他们转换为jquery对象。比如this和$(this)的使用、event.target和$(event.target)的使用；
常用的事件对象的属性和方法：
event.type：获取事件的类型。
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.

六、 自定义事件

1. trigger事件
   调用事件，但可以传入新的参数。
   例子：
   $('#elem').on('click', function(event,arg1,arg2) {
   alert("自触自定义时间")
   });
   $('#elem').trigger('click',['参数1','参数2'])
   // trigger 同样调用function函数，但是传入新的参数

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