jQuery复习二

撰写于 2017-07-20 修改于 2017-07-23

浏览器事件模型

DOM 0级事件模型

浏览器都支持但是有兼容性差异 onclick例如

input.onclick = function() { … }
从子元素到父元素一一向上处理时间——————事件冒泡

阻止事件冒泡

event.stopPropagation();
或者
event.cancelBubble = true;

只能支持一个事件处理函数

DOM 2级事件模型
addEventListener(eventType, listener, useCapture)
useCapture默认是fasle只执行冒泡不执行事件捕获，执行顺序从子元素到祖先元素
如果是true则只捕获不冒泡，执行顺序从祖先元素开始向子元素
不会互相覆盖
attachEvent(eventName, handler) （IE9以前浏览器）

jQuery 事件模型
提供了统一的事件处理方法
允许添加多个事件处理函数
使用标准的事件名称（不带on）
事件实例做为事件处理函数的第一个参数
标准化事件实例最常用的属性
提供了统一的事件取消和阻止默认行为的方法

添加事件处理
on(eventType[, selector][, data], handler)
绑定事件事件名称选择器(事件委托) 数据事件处理函数事件需要触发的事件处理函数 selector和data可以不写

%o在控制台显示出来
$(function() {
```
$('p')

    .on('click', { foo: 'bar' }, function (e) {
        console.log('p clicked3 %o', e.data);
    })
```

});

统一方法和属性

阻止冒泡： stopPropagation()
阻止默认行为： preventDefault()
阻止冒泡和默认行为：return false

所有支持的事件
mousedown
mouseenter
mouseleave
mousemove
mouseout
mouseover
mouseup
eady
esize
scroll
select
submit
一次性的事件处理
one(eventType[, selector][, data], handler)
事件处理函数执行一次就被销毁了用于避免on多次执行

移除事件处理

off(eventType[, selector][, handler])
off()

$(‘p’).off(‘click mouseover’)中间空格隔开移除多个事件类型
什么参数都不传所有参数都被干掉

事件实例对象

事件实例对象的属性

altKey
bubbles
button
cancelable
charCode
clientX
clientY
ctrlKey
currentTarget
data
detail
delegateTarget
eventPhase
metaKey
namespace
offsetX
offsetY
originalTarget
originalEvent
pageX
pageY
prevValue
relatedTarget
result
screenX
screenY
shiftKey
target
timeStamp
type
view
which

事件实例对象的方法

preventDefault() 阻止默认事件
stopPropagation() 阻止冒泡
stopImmediatePropagation() 阻止冒泡和后续绑定的事件函数
isDefaultPrevented()前面三个方法是否调用的检测
isPropagationStopped()
isImmediatePropagationStopped()

触发事件

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 方法
hover(enterHandler, leaveHandler)
hover(handler)

自定义事件

on(customEvent)
trigger(customEvent)

odd 奇数从1开始计数
even 偶数从0开始计数

事件命名空间

eventName.namespace
如”click.a”，其中”a”就是click当前事件类型的别名，即事件命名空间
若在所有绑定的事件类型后面附加命名空间，这样在删除事件时，就可以直接指定命名空间。如$(“div”).unbind(“.a”);

jQuery 插件

jQuery 插件机制

扩展 jQuery 对象上的方法：jQuery.fn.extend()
扩展 jQuery 工具方法： jQuery.extend()

jQuery复习二

浏览器事件模型

DOM 0级 事件模型

DOM 2级 事件模型

jQuery 事件模型

添加事件处理

统一方法和属性

所有支持的事件

一次性的事件处理