【总结】慕课网jQuery基础

jQuery基础——事件篇

1.鼠标事件

• click与doubleclick
  监听单机和双击操作。click事件其实是由mousedown与mouseup 2个动作构成，所以点击的动作只有在松手后才触发。

• mouseup与mousedown
  mousedown监听用户鼠标按下的操作，mouseup监听鼠标弹起的操作。

• mousemove
  监听鼠标移动的操作

• mouseover与mouseout
  监听鼠标移入移出操作

• mouseenter与mouseleave
  同样也是监听鼠标移入移出操作，然而mouseenter与mouseleave事件只会在绑定它的元素上被调用，而不会触发冒泡机制。

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

• focusin
  捕获鼠标点击聚焦的动作

• focusout
  当一个元素，或者其内部任何一个元素失去焦点的时候，比如input元素，用户在点击失去焦的时候，通过focusout捕获

2.表单事件

• blur与focus
  当一个元素，或者其内部任何一个元素失去焦点的时候，比如input元素，用户在点击失去焦的时候，如果开发者需要捕获这个动作，jQuery提供了一个focusout事件

• change
  元素，和元素的值都是可以发生改变的，开发者可以通过change事件去监听这些改变的动作

• select
  当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
  注:select事件只能用于元素与元素

• submit
  监听提交表单的操作

3.键盘事件

• keydown与keyup
  监听键盘按键按下和弹起的操作

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

4.事件的绑定与解绑

• on()的多事件绑定
  给元素绑定事件有两种方式：快捷方式与on方式

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

使用on方式可让事件绑定更加灵活
1⃣️多个事件绑定同一个函数

$("#elem").on("mouseover mouseout",function(){ });

2⃣️多个事件绑定不同函数

$("#elem").on({
    mouseover:function(){},  
    mouseout:function(){},
});

3⃣️将数据传递到处理程序

function greet( event ) {
  alert( "Hello " + event.data.name ); //Hello 慕课网
}
$( "button" ).on( "click", {
  name: "慕课网"
}, greet );

• on()的高级用法
  事件机制委托
  

<div class="left">
    <p class="aaron">
        <a>目标节点</a> //点击在这个元素上
    </p>
</div>

$("div").on("click","p",fn)
事件绑定在最上层div元素上，当用户触发在a元素上，事件将往上冒泡，一直会冒泡在div元素上。如果提供了第二参数，那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数

• 卸载事件off()方法
  传入事件名，即可卸载元素上原有的对应的事件。

5.事件对象的使用

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

• event.target代表当前触发事件的元素，可以通过当前元素对象的一系列属性来判断是不是我们想要的元素。

• “事件委托”

• jQuery事件对象的属性和方法
  event.type：获取事件的类型
  event.pageX 和 event.pageY：获取鼠标当前相对于页面的坐标
  event.preventDefault() 方法：阻止默认行为
  event.stopPropagation() 方法：阻止事件冒泡
  event.which：获取在鼠标单击时，单击的是鼠标的哪个键
  event.currentTarget : 在事件冒泡过程中的当前DOM元素

• this和event.target
  js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标。它们都是DOM对象，如果要使用jquey中的方法可以将他们转换为jquery对象。比如this和$(this)的使用、event.target和$(event.target)的使用。

6.自定义事件

• trigger就是根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为。
  trigger除了能够触发浏览器事件，同时还支持自定义事件，并且自定义时间还支持传递参数

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