07-jquery事件模型

Posted 2020-09-30

• jquery事件模型：

• • dom0级事件模型：
  • 阻止冒泡：event.stopPropagation();
  • 阻止冒泡：event.cancelBubble = true;
  • 只支持一个事件处理函数；
  • dom2级事件模型：
  • addEventListener(eventType)
  • addEventListener(listener)
  • addEventListener(useCapture)：如果为false，只冒泡不捕获，如果为true，只捕获，不冒泡。
  • attachEvent(eventName,handler)
  • jquery事件模型：
  • 提供了统一的时间处理方法
  • • 允许添加多个事件处理函数
    • 使用标准的时间名称（不带on）
    • 事件实例作为事件处理函数的的一个参数
    • 标准化事件实例最常用的属性
    • 提供了统一的时间取消和阻止默认行为的方法
  • 添加事件处理：
  • • on(eventType [,selector] [,data] handler)
  • 统一方法和属性：
  • • 阻止冒泡：stopPropagation();
    • 阻止默认行为：preventDefault();
    • 阻止冒泡和默认行为：return false
  • 所有支持的事件：
  • • blur
    • change
    • click
    • dblclick
    • error
    • focus
    • focusin
    • focusout
    • keydown
    • keyup
    • load
    • unload
    • mousedown
    • mouseenter
    • mouseleave
    • mouseout
    • mouseover
    • mouseup
    • ready
    • resize
    • scroll
    • select
    • submit
  • 一次性的事件处理只执行一次：
  • • one(eventType [,selector] [,data],handler)
  • 移除事件处理：
  • • off(eventType[,selector][,handler])如果什么都不传，会把所有事件处理掉
  • 事件实例对象的属性：
  • • altkey
    • bubbles
    • button
    • cancelable
    • charCode
    • clientX
    • clientY
    • ctrlKey
    • currentTarget
    • data
    • datail
    • delegateTarget
    • eventPhase
    • metaKey(有浏览器兼容问题)
    • namespace
    • offsetX
    • offsetY
    • originalTarget
    • originalEvent
    • pageY(有浏览器兼容问题)
    • pageX(有浏览器兼容问题)
    • prevValue
    • relatedTarget(有浏览器兼容问题)
    • result
    • screenX
    • screenY
    • shiftKey
    • target(有浏览器兼容问题)
    • timeStamp
    • type
    • view
    • which(有浏览器兼容问题)
  • 事件实例对象的方法：
  • • preventDefault()：阻止一些浏览器的默认事件
    • stopPropagetion()：阻止了冒泡行为
    • stopImmediatePropagation()：立刻阻止后续事件处理函数并防止事件冒泡
    • isDefaultPrevented()
    • isPropagetionStopped()
    • isImmediatePropagetionStoppend()
    • 后面三种是对前面方法是否调用进行检测的函数，如果已经调用会返回true
  • 触发事件：
  • • trigger(eventType[,data]) ：主动触发事件
    • triggerHandler(eventType[,data])
    • triggerHandler相比trigger：不会触发浏览器默认事件，不会产生事件冒泡，只触发jquery对象集合中第一个元素的时间处理函数，返回的是事件处理函数的返回值，而不是jquery对象
  • 快捷方法：
  • • 如果带有事件处理函数就是添加时间，如果不带的话就是触发：
    • blur
    • change
    • click
    • dblclick
    • focus
    • focusin
    • focusout
    • keydown
    • keypress
    • keyup
    • mousedown
    • mouseenter
    • mouseleave
    • mousemove
    • mouseout
    • mouseover
    • mouseup
    • ready
    • resize
    • scroll
    • select
    • submit
  • 快捷方法的使用：
  • • eventName([data,] handler)
    • eventName()：如果不添加时间函数就是触发
    • hover方法：弥补onmouseover()onmouseout()方法的不足
  • 自定义事件：
  • • on(customEvent)
    • trigger(customEvent)
  • 事件命名空间：
  • • eventName.namespace