事件模型 & jQuery 基础(1)

lifecycle

http://iciba.com/lifecycle

compatibility 兼容性

http://www.iciba.com/compatibility

目录

1. 补讲
   1. node.style
   2. node.className
2. 事件模型
   1. 标准模型
   2. IE 模型
   3. 默认事件
   4. 阻止事件冒泡
3. jQuery
   1. 历史与文档
   2. 能做什么

设置 DOM 属性

<button class="button" disabled>

1. node.setAttribute('xxx','yyy')
2. node.xxx = 'yyy'
3. node.style.backgroundColor

区别

1. 名字不一样
2. 值的类型不一样

IE bug

事件模型

DOM Events

DOM Level 0

DOM Level 2

<a href="http://www.example.com" onclick="triggerAlert('Joe'); return false;">Joe</a>!

node.addEventListener('click',func,false)  // ieNode.attachEvent('click', func)
node.removeEventListener('click',func,false) // ieNode.detachEvent('click', func)

参考

事件阶段

捕获阶段 & 冒泡阶段

从文档的根节点流向目标对象（捕获阶段）

然后在目标对向上被触发（目标阶段）

之后再回溯到文档的根节点（冒泡阶段）

几个概念

• 处理函数 - handler
• 事件对象 - event
• target & currentTarget
• stopPropagation & stopImmediatePropagation
• preventDefault
• 事件代理

一些事件

1. image 的 load 和 error 
2. window.onbeforeunload 

jQuery

Write less, do more

前端不可能不知道jQuery

据统计，全世界排名前100万的网站，有46%使用jQuery

2006年8月26日 最初版本，只是提供了一个友好的 $('选择器')

参考

主要特点

1. 文档健全（第三方文档 http://devdocs.io/）
2. 链式操作
3. 一个 API 即可读有可写
4. 兼容性好

jQuery 做什么

1. 选择网页元素

2. 改变结果集

3. 元素的操作：取值和赋值

4. 元素的操作：移动

5. 元素的操作：复制、删除和创建

6. 工具方法

7. 事件操作

8. 特殊效果

9. AJAX

下节继续 jQuery 基础