为了账号安全,请及时绑定邮箱和手机立即绑定

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

2019.12.29 16:00 6413浏览

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
点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消