02-jQuery的事件、动画、Ajax和插件.pptx

jQuery事件/动画/Ajax;;Web页面经常需要和用户之间进行交互，而交互的过程中我们可能想要捕捉这个交互的过程：

比如用户点击了某个按钮、用户在输入框里面输入了某个文本、用户鼠标经过了某个位置；

浏览器需要搭建一条JavaScript代码和事件之间的桥梁；

当某个事件发生时，让JavaScript可以相应（执行某个函数），所以我们需要针对事件编写处理程序（handler）；

原生事件监听方法：

事件监听方式一：在script中直接监听（很少使用）。

事件监听方式二：DOM属性，通过元素的on来监听事件。

事件监听方式三：通过EventTarget中的addEventListener来监听。

jQuery事件监听方法：

事件监听方式一：直接调用jQuery对象中的事件处理函数来监听，例如：click，mouseenter。

事件监听方式二：调用jQuery对象中的on函数来监听，使用off函数来取消监听。

;click和on的区别：

click是on的简写。它们重复监听，不会出现覆盖情况，都支持事件委托，底层用的是addEventListener。

如果on没有使用selector的话，那么和使用click是一样的。

on函数可以接受一个selector参数，用于过滤触发事件的后代元素。

on函数支持给事件添加命名空间。;click和on的this指向：

this都是指向原生的DOMElement

;我们会发现默认情况下事件是从最内层的span向外依次传递的顺序，这个顺序我们称之为事件冒泡（EventBubble）;

事实上，还有另外一种监听事件流的方式就是从外层到内层（body-span），这种称之为事件捕获（EventCapture）；

为什么会产生两种不同的处理流呢？

这是因为早期浏览器开发时，不管是IE还是Netscape公司都发现了这个问题;

但是他们采用了完全相反的事件流来对事件进行了传递；

IE9仅采用了事件冒泡的方式，Netscape采用了事件捕获的方式；

IE9+和现在所有主流浏览器都已支持这两种方式。

jQuery为了更好的兼容IE浏览器，底层并没有实现事件捕获。

;jQuery事件系统的规范是根据W3C的标准来制定jQuery事件对象。原始事件对象的大多数属性都被复制到新的jQuery事件对象上。如，以下原生的事件属性被复制到jQuery事件对象中：

altKey,clientX,clientY,currentTarget,data,detail,key,keyCode,offsetX,offsetY,originalTarget,pageX,pageY,relatedTarget,screenX,screenY,target,

jQuery事件对象通用的属性（以下属性已实现跨浏览器的兼容）：

target、relatedTarget、pageX、pageY、which、metaKey

jQuery事件对象常用的方法：

preventDefault():取消事件的默认行为（例如，a标签、表单事件等）。

stopPropagation():阻止事件的进一步传递（例如，事件冒泡）。

要访问其它事件的属性，可以使用event.originalEvent获取原生对象。;事件冒泡在某种情况下可以帮助我们实现强大的事件处理模式–事件委托模式（也是一种设计模式）

那么这个模式是怎么样的呢？

因为当子元素被点击时，父元素可以通过冒泡可以监听到子元素的点击；

并且可以通过event.target获取到当前监听的元素；

案例：一个ul中存放多个li，使用事件委托的模式来监听li中子元素的点击事件。

;鼠标事件（MouseEvents）

.click()、.dblclick()、.hover()、.mousedown()、.mouseup()

.mouseenter()、.mouseleave()、.mousemove()

.mouseover()、.mouseout()、.contextmenu()、.toggle()

键盘事件（KeyboardEvents）

.keydown()、.keypress()、.keyup()

文档事件（DocumentLoadingEvents）

load、ready()、.unload

表单事件（FormEvents）

.blur()、.focus()、.change()、.submit()、.select()

浏览器事件（BrowserEvents）

.resize()、.scroll()

;mouseenter()和mouseleave()

不支持冒泡

进入子元素依然属于在该元