文章目录

jQuery事件机制
- jQuery事件发展历程(了解)
- on注册事件(重点)
- - on事件注册的两种方式
- 事件的执行顺序
- 事件解绑
- - off方式（推荐）
- 触发事件
- jQuery事件对象
案例：钢琴版导航（加强）

jQuery事件机制

JavaScript中已经学习过了事件，但是jQuery对JavaScript事件进行了封装，增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件的处理能力。

jQuery事件发展历程(了解)

简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐)

简单事件注册

click(handler)           单击事件
mouseenter(handler)     鼠标进入事件
mouseleave(handler)     鼠标离开事件

缺点：不能同时注册多个事件

bind方式注册事件

//第一个参数：事件类型
//第二个参数：事件处理程序
$("p").bind("click mouseenter", function(){//事件响应方法
});

缺点：不支持动态事件绑定

delegate注册委托事件

// 第一个参数：selector，要绑定事件的元素
// 第二个参数：事件类型
// 第三个参数：事件处理函数
$(".parentBox").delegate("p", "click", function(){//为 .parentBox下面的所有的p标签绑定事件
});

缺点：只能注册委托事件，因此注册时间需要记得方法太多了

on注册事件

on注册事件(重点)

jQuery1.7之后，jQuery用on统一了所有事件的处理方法。

最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用。

on注册简单事件

// 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。
$(selector).on( "click", function() {});

on注册委托事件

// 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
$(selector).on( "click",“span”, function() {});

on注册事件的语法：

第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
第四个参数：handler，事件处理函数$(selector).on(events[,selector][,data],handler);

on事件注册的两种方式

// 这个是p自己注册的事件（简单事件）
$("p").on("click", function () {alert("呵呵");
});$("div").on("click", "p", function () {alert("呵呵")
});$("#btn").on("click", function () {$("<p>我是新建的p元素</p>").appendTo("div");
});

事件的执行顺序

顺序：

标签自己注册的事件（简单事件）
给父标签里面的当前标签执行的事件 (委托事件)
给父标签自己执行的事件

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Title</title><style>div {height: 500px;width: 500px;background-color: pink;}</style>
</head>
<body>
<div><p>111111</p><p>111111</p><p>111111</p><p>111111</p>
</div><script src="jquery-1.12.4.js"></script>
<script>$(function () {   // 这个是p自己注册的事件（简单事件）  $("p").on("click", function () {alert("呵呵哒");   // 1 显示});//给div自己执行的$("div").on("click", function () {alert("呜呜呜");   // 3 显示});//给div里面的p执行 委托事件$("div").on("click", "p", function () {alert("嘿嘿嘿")    // 2 显示});});
</script></body>
</html>

事件解绑

unbind方式（不用）

$(selector).unbind(); //解绑所有的事件
$(selector).unbind("click"); //解绑指定的事件

undelegate方式（不用）

$( selector).undelegate(); //解绑所有的delegate事件
$( selector).undelegate( “click” ); //解绑所有的click事件

off方式（推荐）

// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off("click");

触发事件

$(selector).click(); //触发 click事件
$(selector).trigger("click");

jQuery事件对象

jQuery事件对象其实就是js事件对象的一个封装，处理了兼容性。

//screenX和screenY    对应屏幕最左上角的值
//clientX和clientY   距离页面左上角的位置（忽视滚动条）
//pageX和pageY   距离页面最顶部的左上角的位置（会计算滚动条的距离）//event.keyCode  按下的键盘代码
//event.data    存储绑定事件时传递的附加数据//event.stopPropagation() 阻止事件冒泡行为
//event.preventDefault()    阻止浏览器默认行为
//return false:既能阻止事件冒泡，又能阻止浏览器默认行为。

案例：钢琴版导航（加强）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;list-style: none;}.nav {width: 900px;height: 60px;background-color: black;margin: 0 auto;}.nav li {width: 100px;height: 60px;/*border: 1px solid yellow;*/float: left;position: relative;overflow: hidden;}.nav a {position: absolute;width: 100%;height: 100%;font-size: 24px;color: blue;text-align: center;line-height: 60px;text-decoration: none;z-index: 2;}.nav span {position: absolute;width: 100%;height: 100%;background-color: yellow;top: 60px;}</style><script src="../jquery-1.12.4.js"></script><script>$(function () {//给li注册鼠标进入事件,让li下面的span top：0  播放音乐$(".nav li").mouseenter(function () {$(this).children("span").stop().animate({top: 0});//播放音乐var idx = $(this).index();$(".nav audio").get(idx).load();$(".nav audio").get(idx).play();}).mouseleave(function () {$(this).children("span").stop().animate({top: 60});});//节流阀  ：按下的时候，触发，如果没弹起，不让触发下一次//1. 定义一个flagvar flag = true;//按下1-9这几个数字键，能触发对应的mouseenter事件$(document).on("keydown", function (e) {if(flag) {flag = false;//获取到按下的键var code = e.keyCode;if(code >= 49 && code <= 57){//触发对应的li的mouseenter事件$(".nav li").eq(code - 49).mouseenter();}}});$(document).on("keyup", function (e) {flag = true;//获取到按下的键var code = e.keyCode;if(code >= 49 && code <= 57){//触发对应的li的mouseenter事件$(".nav li").eq(code - 49).mouseleave();}});//弹起的时候，触发mouseleave事件});</script>
</head>
<body>
<div class="nav"><ul><li><a href="javascript:void(0);">导航1</a><span></span></li><li><a href="javascript:void(0);">导航2</a><span></span></li><li><a href="javascript:void(0);">导航3</a><span></span></li><li><a href="javascript:void(0);">导航4</a><span></span></li><li><a href="javascript:void(0);">导航5</a><span></span></li><li><a href="javascript:void(0);">导航6</a><span></span></li><li><a href="javascript:void(0);">导航7</a><span></span></li><li><a href="javascript:void(0);">导航8</a><span></span></li><li><a href="javascript:void(0);">导航9</a><span></span></li></ul><div><audio src="mp3/1.ogg"></audio><audio src="mp3/2.ogg"></audio><audio src="mp3/3.ogg"></audio><audio src="mp3/4.ogg"></audio><audio src="mp3/5.ogg"></audio><audio src="mp3/6.ogg"></audio><audio src="mp3/7.ogg"></audio><audio src="mp3/8.ogg"></audio><audio src="mp3/9.ogg"></audio></div>
</div>
</body>
</html>

jQuery事件机制相关推荐

jQuery操作Dom、jQuery事件机制、jQuery补充部分
jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要 ...
jQuery中的事件机制与DOM操作
jQuery事件机制 jQuery的事件机制,指的是jQuery对JavaScript操作DOM事件的封装,包括了:事件绑定.事件解绑.事件触发. 下面我们先来回顾一下事件的几种类型. 事件描述 c ...
什么是 jQuery 事件
jQuery事件是DOM事件的封装,同时支持自定义的扩展.在程序设计中,事件和代理有着相似的作用: 它们提供了一种机制,使得行为的实现方式和调用时机可以分离. 不谈jQuery,DOM本身就提供了一系 ...
javascript事件机制
javascript事件机制 ① javascript绑定事件的方式 http://blog.iderzheng.com/dom-javascript-event-binding-comparison ...
jQuery中的事件机制深入浅出
昨天呢,我们大家一起分享了jQuery中的样式选择器,那么今天我们就来看一下jQuery中的事件机制,其实,jQuery中的事件机制与JavaScript中的事件机制区别是不大的,只是,JavaScr ...
javascript事件机制与jQuery.bind的补充说明
在之前的文章javascript 事件机制与 jQuery.Bind中,为了说明冒泡阶段中Event Handler Function的表现,我使用了event.data来记录触发function的 ...
「前端面试题系列7」Javascript 中的事件机制（从原生到框架）
前言这是前端面试题系列的第 7 篇,你可能错过了前面的篇章,可以在这里找到: 理解函数的柯里化 ES6 中箭头函数的用法 this 的原理以及用法伪类与伪元素的区别及实战如何实现一个圣杯布局? ...
我也来说说js的事件机制
原文链接:http://www.w3cfuns.com/notes/17398/8062de2558ef495ce6cb7679f940ae5c.html 学js,不懂事件机制,基本可以说学了js,就 ...
jQuery 事件用法详解
目录简介实现原理事件操作绑定事件解除事件触发事件事件委托事件操作进阶阻止默认事件阻止事件传播阻止事件向后执行命名空间自定义事件事件队列 jquery中文文档简介 jque ...

jQuery事件机制

文章目录

jQuery事件机制

jQuery事件发展历程(了解)

on注册事件(重点)

on事件注册的两种方式

事件的执行顺序

事件解绑

off方式（推荐）

触发事件

jQuery事件对象

案例：钢琴版导航（加强）

jQuery事件机制相关推荐

最新文章

热门文章