jQuery基础(三)—事件篇笔记

jQuery

事件：

• 点击：
  • click方法用于监听用户单击操作，click事件其实是由mousedown与mouseup 2个动作构成，所以点击的动作只有在松手后才触发
    • $ele.click()
    • $ele.click( handler(eventObject) )
    • $ele.click( [eventData ], handler(eventObject) )
  • dbclick方法用于监听用户双击操作，dbclick又是由2个click叠加而来的
  • 在同一元素上同时绑定 click 和 dbclick 事件是不可取的。各个浏览器事件触发的顺序是不同的
• 鼠标：
  • mousedown的快捷方法可以监听用户鼠标按下的操作
    • $ele.mousedown()
    • $ele.mousedown( handler(eventObject) )
    • $ele.mousedown( [eventData ], handler(eventObject) )
    • 用event 对象的which区别按键，敲击鼠标左键which的值是1，敲击鼠标中键which的值是2，敲击鼠标右键which的值是3
  • mouseup快捷方法可以监听用户鼠标弹起的操作
  • mousemove的快捷方法可以监听用户移动的的操作
    • $ele.mousemove()
    • $ele.mousemove( handler(eventObject) )
    • $ele.mousemove( [eventData ], handler(eventObject) )
  • mouseover鼠标移入
    • $ele.mouseover()
    • $ele.mouseover( handler(eventObject) )
    • $ele.mouseover( [eventData ], handler(eventObject) )
  • mouseout鼠标移出
  • mouseenter与mouseleave用户操作鼠标是否有移到元素内部或是元素外部
    • 事件冒泡的问题，子元素触发了mouseover，他会一直往上找父元素上的mouseover事件，如果父元素有mouseover事件就会被触发
    • mouseenter事件只会在绑定它的元素上被调用，而不会在后代节点上被触发
  • hover用来给元素做一个简单的切换效果
    • $(selector).hover(handlerIn, handlerOut)
      • handlerIn(eventObject)：当鼠标指针进入元素时触发执行的事件函数
      • handlerOut(eventObject)：当鼠标指针离开元素时触发执行的事件函数
• 焦点：
  • focusin用户在点击聚焦的时候捕获
    • $ele.focusin()
    • $ele.focusin( handler )
    • $ele.focusin( [eventData ], handler )
  • focusout用户在点击失去焦的时候触发：
    • $ele.focusout()
    • $ele.focusout( handler )
    • $ele.focusout( [eventData ], handler )
  • 同样用于处理表单焦点的事件还有blur与focus事件：
    • 当它包含的元素input触发了focus事件时，它就产生了focusin()事件
    • focus()在元素本身产生，focusin()在元素包含的元素中产生
• 改变：
  • <input>元素，<textarea>和<select>元素的值都是可以发生改变的，开发者可以通过change事件去监听这些改变的动作
  • input元素监听value值的变化，当有改变时，失去焦点后触发change事件。对于单选按钮和复选框，当用户用鼠标做出选择时，该事件立即触发
  • select元素对于下拉选择框，当用户用鼠标作出选择时，该事件立即触发
  • textarea元素多行文本输入框，当有改变时，失去焦点后触发change事件
  • select事件只能用于<input>元素与<textarea>元素
    • .select()
    • $ele.select( handler(eventObject) )
    • $ele.select( [eventData ], handler(eventObject) )
• 提交表单
  • 通过在元素上绑定submit事件，开发者可以监听到用户的提交表单的的行为
  • form元素是有默认提交表单的行为，如果通过submit处理的话，需要禁止浏览器的这个默认行为，调用事件对象 e.preventDefault() 来处理， jQuery中用 return false
  • $ele.submit()
  • $ele.submit( handler(eventObject) )
  • $ele.submit( [eventData ], handler(eventObject) )
• 键盘：
  • keydown与keyup方法来监听键盘按下与松手
  • $elem.keydown( handler(eventObject) )
  • $elem.keydown( [eventData ], handler(eventObject) )
  • $elem.keydown()
  • keydown是在键盘按下就会触发，keyup是在键盘松手就会触发
  • keydown/keyup事件只是发送到具有焦点的元素上，不同的浏览器中，可获得焦点的元素略有不同，但是表单元素总是能获取焦点，所以对于此事件类型表单元素是最合适的
  • keydown每次获取的内容都是之前输入的，当前输入的获取不到
  • keypress事件只能捕获单个字符，不能捕获组合键，无法响应系统功能键（如delete，backspace），不区分小键盘和主键盘的数字字符

事件：

• on()的多事件绑定：
  • .on( events ,[ selector ] ,[ data ] )
  • .on( events ,[ selector ] ,[ data ], handler(eventObject) ) 利用了on的另一个事件机制委托的机制
• 卸载事件off()
  • $(“elem”).off()
  • $(“elem”).off(“mousedown”)
  • $(“elem”).off(“mousedown mouseup”)

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

$(elem).on("click",function(event){
   event //事件对象
})

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

事件对象的属性和方法：

• event.type：获取事件的类型
• event.pageX 和 event.pageY：获取鼠标当前相对于页面的坐标
• event.preventDefault() 方法：阻止默认行为，用 event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)被调用过了
• event.stopPropagation() 方法：阻止事件冒泡
• event.which：获取在鼠标单击时，单击的是鼠标的哪个键
• event.currentTarget : 在事件冒泡过程中的当前DOM元素

trigger事件：

• 根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为
• $(’#elem’).trigger(‘click’);
• trigger触发浏览器事件与自定义事件区别
  • 自定义事件对象，是jQuery模拟原生实现的；
  • 自定义事件可以传递参数
• trigger事件还有一个特性：会在DOM树上冒泡

triggerHandler事件:

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