JavaScript+jQuery前端开发基础教程（第2版）（微课版）第10章

JavaScript+jQuery前端开发基础教程微课版第10章

jQuery事件处理本章主要内容：jQuery事件对象附加和解除事件处理函数事件快捷方法10.1jQuery事件对象jQuery事件对象封装了浏览器差异，并按照W3C标准进行了规范和统一，确保在所有浏览器中采用统一的处理方法。10.1.1事件对象构造函数jQuery的Event()构造函数用事件名称作为参数来创建事件对象。使用构造函数创建事件对象时，可不使用new关键字。var

e1

=

$.Event('click')

//创建事件对象var

e2

=

new

$.Event('click')

//创建事件对象事件对象可作为trigger()方法的参数来触发事件。$('body').trigger(e1)

//触发事件10.1.2事件对象属性event.currentTarget：事件冒泡过程中的当前DOM元素。event.data：事件对象存储的附加数据。event.pageX、event.pageY：鼠标事件发生时，鼠标指针在浏览器窗口中的坐标。event.relatedTarget：和事件有关的其他DOM元素，如鼠标指针离开的对象。event.result：事件处理函数的最新返回值。event.target：最初发生事件的DOM元素。event.timeStamp：事件发生的时间戳，单位为毫秒。event.type：事件类型。event.which：在发生键盘事件时，属性返回按键的ASCII值。发生鼠标事件时，属性返回所按下的鼠标按键。10.1.3事件对象方法事件对象的常用方法如下。event.preventDefault()：阻止事件默认行为。event.stopImmediatePropagation()：停止执行元素的所有事件处理函数，同时阻止事件冒泡。event.stopPropagation()：阻止事件冒泡。10.2附加和解除事件处理函数附加事件处理函数指将函数和事件关联起来，在发生事件时执行该函数来处理事件。解除事件处理函数则是解除函数和事件的关联关系。10.2.1附加事件处理函数on()方法为事件关联处理函数，早期的bind()方法已被弃用。on()方法的基本语法格式如下。$('selector').on('eventname',func)$('selector')为要附加事件处理函数的目标对象。eventname为事件名称，如click。func可以是函数名或者匿名函数，可以为元素的同一个事件附加多个处理函数。10.2.2解除事件处理函数off()方法用于解除附加到元素的事件处理函数，其基本语法格式如下。$('selector').off('eventname',func)$('selector')为要解除事件处理函数的目标对象，为其解除eventname事件附加的func()函数。不带参数的off()方法解除匹配元素所有的事件处理函数。10.3事件快捷方法jQuery提供了一系列事件快捷方法来处理事件处理函数。例如，click()方法可以为对象附加click事件处理函数，不带参数时则可触发click事件。10.3.1浏览器事件快捷方法resize()：带参数时，为对象附加resize事件处理函数。scroll()：带参数时，为对象附加scroll事件处理函数。10.3.2表单事件快捷方法blur()：带参数时为对象附加blur事件处理函数。change()：带参数时为对象附加change事件处理函数。focus()：带参数时为对象附加focus事件处理函数。focusin()：带参数时为对象附加focusin事件处理函数。focusout()：带参数时为对象附加focusout事件处理函数。select()：带参数时为对象附加select事件处理函数。submit()：带参数时为对象附加submit事件处理函数。10.3.3键盘事件快捷方法keydown()：带参数时附加keydown事件处理函数。keypress()：带参数时附加keypress事件处理函数。keyup()：带参数时附加keyup事件处理函数。另外，无参数的方法触发对象的对应事件。10.3.4鼠标事件快捷方法click()：带参数时附加click事件处理函数。contextmenu()：带参数时附加contextmenu事件处理函数。dblclick()：带参数时附加dblclick事件处理函数。hover()：只带一个参数时附加mouseleave事件处理函数；带两个参数时，第1个为mouseenter事件处理函数，第2个为mouseleave事件处理函数。mousedown()：带参数时附加mousedown事件处理函数。10.3.4鼠标事件快捷方法mouseenter()：带参数时附加mouseenter事件处理函数。mouseleave()：带参数时附加mouseleave事件处理函数。mousemove()：带参数时附加mousemove事件处理函数。mouseout()：带参数时附加mouseout事件处理函数。mouseover()：带参数时附加mous