jQuery--事件处理及常用案例 jQuery--事件处理及常用案例

jQuery--事件处理一、事件模型 1.浏览器事件模型
①DOM0级事件模型：只支持一个DOM事件处理函数
?
? input.onclick = function() { ... }
? event = event || window.event;
? var target = event.target || event.srcElement;
? …
代码示例：

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis praesentium, sapiente? Earum, molestiae rem. Enim, perspiciatis quisquam! A consequatur culpa error et, natus nobis placeat qui rem, suscipit tempora tenetur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet architecto beatae delectus enim ipsum iusto laborum, libero minus perspiciatis quae quidem rem sed soluta velit veniam voluptatem voluptates voluptatibus. Repudiandae.

②DOM2级事件模型：事件不会覆盖

addEventListener(eventType, listener, useCapture)
useCapture为false时跟DOM0级事件类似，只冒泡不捕获
为true时：只捕获，不冒泡
attachEvent(eventName, handler)

文章图片
DOM事件模型.jpg 代码示例：

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis praesentium, sapiente? Earum, molestiae rem. Enim, perspiciatis quisquam! A consequatur culpa error et, natus nobis placeat qui rem, suscipit tempora tenetur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet architecto beatae delectus enim ipsum iusto laborum, libero minus perspiciatis quae quidem rem sed soluta velit veniam voluptatem voluptates voluptatibus. Repudiandae.

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

on(eventType[, selector][, data], handler)：在选择的元素上绑定一个或多个事件
eventType：事件的名称（多个名称用空格分隔）
[, selector]：选择器（事件委托时用到）
[, data]：数据（传递一些数据给事件处理函数，从事件event的data属性中获取）
handler：事件处理函数
bind()、delegate() 、live()：过时

②统一方法和属性
? 阻止冒泡： stopPropagation()
? 阻止默认行为： preventDefault()
? 阻止冒泡和默认行为：return false
③所有支持的事件
? blur
? change
? click
? dblclick
? error
? focus
? focusin
? focusout
? keydown
? keypress
? keyup
? load
? unload
? mousedown
? mouseenter
? mouseleave
? mousemove
? mouseout
? mouseover
? mouseup
? ready
? resize
? scroll
? select
? submit
【jQuery--事件处理及常用案例】④一次性的事件处理：只执行一次
? one(eventType[, selector][, data], handler)
代码示例：

titleLorem ipsum dolor sit amet. 新闻标题-1 新闻标题-2 新闻标题-3 新闻标题-4 新闻标题-5 新闻标题-6 新闻标题-7 新闻标题-8 新闻标题-9 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet architecto beatae delectus enim ipsum iusto laborum, libero minus perspiciatis quae quidem rem sed soluta velit veniam voluptatem voluptates voluptatibus. Repudiandae.

⑤移除事件处理
? off(eventType[, selector][, handler])
? off()

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur assumenda debitis fugiat laboriosam magni modi sequi, sint ullam! Ad consequatur cum excepturi modi nam quos. Dolor est laudantium minima ratione.

二、事件实例对象 1.事件实例对象的属性
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
2.事件实例对象的方法
? preventDefault()：阻止浏览器默认事件
? stopPropagation()：阻止冒泡
? stopImmediatePropagation()：立刻阻止事件处理函数并防止事件冒泡（阻止冒泡还阻止后续绑定的）
? isDefaultPrevented():对以上三个方法是否调用的一个检测，调用了就返回true
? isPropagationStopped()
? isImmediatePropagationStopped()
代码示例：

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet architecto beatae delectus enim ipsum iusto laborum, libero minus perspiciatis quae quidem rem sed soluta velit veniam voluptatem voluptates voluptatibus. Repudiandae.

3.触发事件
? trigger(eventType[, data])：主动触发事件
? triggerHandler(eventType[, data])
区别
triggerHandler 相比 trigger：
? 不会触发浏览器默认事件；
? 不会产生事件冒泡；
? 只触发jQuery对象集合中第一个元素的事件处理函数；
? 返回的是事件处理函数的返回值，而不是jQuery对象。（所以不能使用链式语法）
代码示例：

新闻标题-1 新闻标题-2 新闻标题-3 新闻标题-4 新闻标题-5 新闻标题-6 新闻标题-7 新闻标题-8 新闻标题-9

4.快捷方法
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()
代码示例：

新闻标题-1 新闻标题-2 新闻标题-3 新闻标题-4 新闻标题-5 新闻标题-6 新闻标题-7 新闻标题-8 新闻标题-9

5.hover方法
? hover(enterHandler, leaveHandler)
? hover(handler)
代码示例：

demo - 锐客网.outer { width: 200px; height: 200px; padding: 20px; color: #fff; background-color: green; }.inner { width: 100px; height: 100px; margin: 30px auto; padding: 20px; color: #fff; background-color: orange; }#outer2 { margin-top: 50px; }Outer 1 Inner 1Outer 2 Inner 2

6.自定义事件
? on(customEvent)
? trigger(customEvent)

新闻标题-1 新闻标题-2 新闻标题-3 新闻标题-4 新闻标题-5 新闻标题-6 新闻标题-7 新闻标题-8 新闻标题-9

7.事件命名空间
? eventName.namespace

新闻标题-1 新闻标题-2 新闻标题-3 新闻标题-4 新闻标题-5 新闻标题-6 新闻标题-7 新闻标题-8 新闻标题-9

三、常用案例 1.隔行换色

- 锐客网分类ID 分类名称分类描述操作 0 手机数码手机数码类商品修改|删除 1 电脑办公电脑办公类商品修改|删除 2 鞋靴箱包鞋靴箱包类商品修改|删除 3 家居饰品家居饰品类商品修改|删除


分类ID	分类名称	分类描述	操作
0	手机数码	手机数码类商品	修改\|删除
1	电脑办公	电脑办公类商品	修改\|删除
2	鞋靴箱包	鞋靴箱包类商品	修改\|删除
3	家居饰品	家居饰品类商品	修改\|删除

文章图片
image.png 2.全选全不选

- 锐客网分类ID 分类名称分类描述操作 1 手机数码手机数码类商品修改|删除 2 电脑办公电脑办公类商品修改|删除 3 鞋靴箱包鞋靴箱包类商品修改|删除 4 家居饰品家居饰品类商品修改|删除


分类ID	分类名称	分类描述	操作
1	手机数码	手机数码类商品	修改\|删除
2	电脑办公	电脑办公类商品	修改\|删除
3	鞋靴箱包	鞋靴箱包类商品	修改\|删除
4	家居饰品	家居饰品类商品	修改\|删除

文章图片
image.png 3.qq表情选择

QQ表情选择 - 锐客网*{margin: 0; padding: 0; list-style: none; }.emoji{margin:50px; } ul{overflow: hidden; } li{float: left; width: 48px; height: 48px; cursor: pointer; } .emoji img{ cursor: pointer; } 文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片请发言：文章图片

文章图片
image.png 4.下拉列表选中条

- 锐客网#leftName , #btn,#rightName{ float: left; width: 100px; height: 300px; } #toRight,#toLeft{ margin-top:100px ; margin-left:30px; width: 50px; }.border{ height: 500px; padding: 100px; }