首页 > 代码库 > 07-jquery事件模型

07-jquery事件模型

  • 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 

07-jquery事件模型