首页 > 代码库 > 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事件模型
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。