事件模型 & 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 基础

Made with Slides.com