jQuery常见事件的监听方式
在 Web 页面经常会有各种事件发生，事件发生后需要进行一些特定处理，即执行特定的函数或者语句。这就需要对事件进行监听，监听事件的常见方式有以下三种，本人将通过实例来具体介绍。
实例1：单击页面 \”Hello\” 按钮，弹出提示框显示 Hello world！
注：在实例1中，事件的监听代码是放在 HTML 标签中，这种方式看起来比较直观，但是这是一种不大提倡的事件监听方式。首先，将视图代码（HTML）与交互代码（Javascript）相结合，意味着每当需要更新功能时，都必须编辑 HTML，这将给代码后期的维护带来很烦。其次，它不具备可扩展性。如果我们要将这个单击功能附加到许多按钮上，那么不仅要用一堆重复的代码来增加页面量，而且还会破坏可维护性。
实例2：单击页面\”Hello\”按钮，弹出提示框显示Hello world！
使用jQuery监听事件有很多种方法，如实例3所示。
实例3：单击页面 \”Hello\” 按钮，弹出提示框显示 Hello world！
注：下面具体分析实例3中用到的 jQuery 事件监听方法。（1）第一种事件监听方法click()，是一种比较常见的、便捷的事件监听方法。（2）第二种事件监听方法bind()，已被jQuery 3.0弃用。自jQuery 1.7以来被 on() 方法（即第三种事件监听方法）所取代，虽然在这里也能使用且不报错，而且此方法之前比较常见，但是不鼓励使用它。（3）第三种事件监听方法on()，从jQuery 1.7开始，所有的事件绑定方法最后都是调用on() 方法来实现的，使用on() 方法实现事件监听会更快、更具一致性。（4）第四种和第五种方法，监听的是 body 上所有 button 元素的 click 事件。DOM 树里更高层的一个元素监听发生在它的 children 元素上的事件，这个过程叫作事件委托（event delegation）。感兴趣的读者可以查看官方帮助文档。
jQuery事件绑定的最佳实践
如果你经常使用jQuery，那么你也许很熟悉事件绑定。这是很基本的东西，但是深入一点，你就能够找到机会让你事件驱动的代码变得不太零碎，并且更容易管理。
更好的选择器策略
让我们从基础的例子开始。下面的HTML代码表示的是可以开合的导航菜单。
<button class=\”nav-menu-toggle\”>Toggle Nav Menu</button>
<nav>
<ul>
<li><a href=\”/\”>West Philadelphia</a></li>
<li><a href=\”/cab\”>Cab Whistling</a></li>
<li><a href=\”/throne\”>Throne Sitting</a></li>
</ul>
</nav>
下面这个是点击按钮之后控制导航菜单开合的javascript代码
$(\’.nav-menu-toggle\’).on(\’click\’,function(){
$(\’nav\’).toggle();
});
这可能是最常用的实现方式。它能够使用，但是比较脆。javascript代码依赖了按钮的类名nav-menu-toggle。很可能在未来其他开发者或者健忘的你在重构代码的时候会删除或者重命名这个类名。
问题的核心是我们同时在表现和交互中使用了CSS的类名。这违反了关注点分离的原则，让维护更容易出错。
让我们用一个不同的方法来实现
<button data-hook=\”nav-menu-toggle\”>Toggle Nav Menu</button>
<nav data-hook=\”nav-menu\”>
<ul>
<li><a href=\”/\”>West Philadelphia</a></li>
<li><a href=\”/cab\”>Cab Whistling</a></li>
<li><a href=\”/throne\”>Throne Sitting</a></li>
</ul>
</nav>
这次我们使用这个data属性（data-hook）来选择元素。任何对CSS类的改变将不会影响到javascript，让我们能够实现关注点分离以及更加稳定的代码。
下面我们用data-hook属性来选择对应的元素：
$(\'[data-hook=\”nav-menu-toggle\”]\’).on(\’click\’,function(){
$(\'[data-hook=\”nav-menu\”]\’).toggle();
});
需要注意的是，我也使用data-hook作为nav元素的选择器。你不一定需要，但是我喜欢这里面包含的思想：任何使用你看到data-hook，你会知道这个元素在javascript中引用到啦。
一些语法
我必须承认data-hook选择器并不是很漂亮。让我们通过扩展jQuery实现一个自定义的函数：
$.extend({
hook:function(hookName){
var selector;
if(!hookName || hookName === \’*\’){
// select all data-hooks
selector=\'[data-hook]\’
}else{
// select specific data-hook
selector=\'[data-hook*=\”\’+hookName+\’\”]\’;
}
return $(selector);
}
});
上面准备完毕，我们来重写一下javascript。
$.hook(\’nav-menu-toggle\’).on(\’\’,function(){
$.hook(\’nav-menu\’).toggle();
});
更好的是，我们甚至可以把一系列以空格分开的hook名字放在一个元素上。
<button data-hook=\”nav-menu-toggle video-pause click-track\”>Toggle Nav Menu</button>
我们可以找到里面的任意个hook名字：
$.hook(\’click-track\’); // returns the button as expected
我们也能够找到页面上所有的hook元素
// both are equivalent
$.hook();
$.hook(\’*\’);
防止函数表达式
到目前为止，我们在事件处理中使用的都是匿名函数。让我们重写一下，使用声明的函数来代替它。
function toggleNavMenu(){
$.hook(\’nav-menu\’).toggle();
}
$.hook(\’nav-menu-toggle\’).on(\’click\’,toggleNavMenu);
这让事件绑定的代码更加易读。这个toggleNavMenu函数名表达了意图，是代码自我注释的好例子。
我们同时也获得了可复用的能力，因为其他地方可能需要使用toggleNavMenu函数。
最后，这对于自动化测试来说是意见大喜事，因为声明的函数的单元测试要比匿名函数单元测试容易的多。
同时使用多个事件
jQuery提供了一个简单方便的语法来处理多事件的问题。比如，你可以为一系列空格隔开的事件列表绑定同一个事件处理函数。
$.hook(\’nav-menu-toggle\’).on(\’click keydown mouseenter\’,trackAction);
如果你需要为不同的事件绑定不同的处理函数，你可以使用对象表达方式：
$.hook(\’nav-menu-toggle\’).on({
\’click\’:trackClick,
\’keydown\’:tranckKeyDown,
\’mouseenter\’:trackMouseEnter
});
反过来，你可以同时取消多个事件的绑定：
// unbinds keydown and mouseenter
$.hook(\’nav-menu-toggle\’).off(\’keydown mouseenter\’);
// nuclear options:unbinds everything
$.hook(\’nav-menu-toggle\’).off();
你可以想象到的是，不小心的取消事件绑定可能会导致严重的我们不想要的副作用。继续看我们可以通过哪些技巧来减轻这个问题。
小心的取消事件绑定
一般情况下我们不会在一个元素的同一事件类型绑定多个事件处理函数。让我们再看一下之前的那个按钮：
<button data-hook=\”nav-menu-toggle video-pause click-track\”>Toggle Nav Menu</button>
不同的代码区域可能会在同一个元素的同一事件绑定不同的事件处理函数：
// somewhere in the nav code
$.hook(\’nav-menu-toggle\’).on(\’click\’,toggleNavMenu);
// somewhere in the video playback code
$.hook(\’video-pause\’).on(\’click\’,pauseCarltonDanceVideo);
// somewhere in the analytics code
$.hook(\’click-track\’).on(\’click\’,trackClick);
尽管我们使用了不同的选择器，但是这个元素现在有三个事件处理函数啦。假如我们的分析代码不在关心这个按钮：
// no good
$.hook(\’click-track\’).off(\’click\’);
糟糕的是，上面的代码实际上回删除所有的点击事件处理函数，不仅仅是trackClick。我们应该实用更加有辨别力的方式来指定我们需要删除的事件处理函数：
$.hook(\’click-track\’).off(\’click\’,trackClick);
另一种方式是使用命名空间。任何事件都有资格使用一个命名空间来实现绑定和取消绑定，这样你就可以更好的控制事件绑定和取消绑定。
// binds a click event in the \”analytics\” namespace
$.hook(\’click-track\’).on(\’click.analytics\’, trackClick);
// unbinds only click events in the \”analytics\” namespace
$.hook(\’click-track\’).off(\’click.analytics\’);
你也可以使用多个命名空间：
// binds a click event in both the \”analytics\” and \”usability\” namespaces
$.hook(\’click-track\’).on(\’click.analytics.usability\’,trackClick);
// unbinds any events in either the \”analytics\” OR \”usability\” namespaces
$.hook(\’click-track\’).off(\’.usability .analytics\’);
// unbinds any events in both the \”analytics\” AND \”usability\” namespaces
$.hook(\’click-track\’).off(\’.usability.analytics\’);
需要注意的是，命名空间的顺序是没有关系的，因为命名空间不是层级式的。
如果你有一个复杂的功能需要多个元素绑定多个事件，那么使用命名空间是一种简单的把一种简单的把他们组织起来然后快速清除的方式：
// free all elements on the page of any \”analytics\” event handling
$(\’*\’).off(\’.analytics\’);
命名空间在写插件的时候尤其有用，因为这样你就能保证只会取消自己命名空间范围内的事件处理函数的绑定。
jQuery
jQuery是对JavaScript的封装，它是免费、开源的JavaScript函数库，jQuery 极大地简化了 JavaScript 编程
jQuery和JavaScript它们的作用一样，都是负责网页行为操作，增加网页和用户的交互效果的，只不过jQuery简化了JavaScript编程，jQuery实现交互效果更简单
jQuery的下载地址:
https://code.jquery.com
jQuery引入
jQuery的入口函数:
我们知道使用js获取标签元素，需要页面加载完成以后再获取，我们通过使用onload事件来获取标签元素
而jQuery提供了ready函数来解决这个问题，保证获取标签元素没有问题，它的速度比原生的 window.onload 更快
jquery选择器就是快速选择标签元素，获取标签的，选择规则和css选择器一样
jQuery选择器的种类:
- 标签选择器是根据标签名来选择标签
- 类选择器是根据类名来选择标签
- id选择器是根据id来选择标签
- 层级选择器是根据层级关系来选择标签
- 属性选择器是根据属性名来选择标签
判断标签是否选择成功:
可以使用length属性来判断标签是否选择成功, 如果length大于0表示选择成功，否则选择失败
选择集过滤就是在选择标签的集合里面过滤自己需要的标签
①has(选择器名称)方法，表示选取包含指定选择器的标签
②eq(索引)方法，表示选取指定索引的标签
选择集转移就是以选择的标签为参照，然后获取转移后的标签
$(\’#box\’).prev(); 表示选择id是box元素的上一个的同级元素
$(\’#box\’).prevAll(); 表示选择id是box元素的上面所有的同级元素
$(\’#box\’).next(); 表示选择id是box元素的下一个的同级元素
$(\’#box\’).nextAll(); 表示选择id是box元素的下面所有的同级元素
$(\’#box\’).parent(); 表示选择id是box元素的父元素
$(\’#box\’).children(); 表示选择id是box元素的所有子元素
$(\’#box\’).siblings(); 表示选择id是box元素的其它同级元素
$(\’#box\’).find(\’.myClass\’); 表示选择id是box元素的class等于myClass的元素
获取和设置元素的内容使用: html方法
给指定元素追加html内容使用: append方法
获取和修改标签样式:
使用css方法可以给标签设置样式属性
获取和设置标签属性:
通过prop方法来完成
获取和设置元素的value属性:
通过val方法来完成，更加简单和方便
常用事件:
click() 鼠标单击
blur() 元素失去焦点
focus() 元素获得焦点
mouseover() 鼠标进入（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发）
ready() DOM加载完成
事件代理:
事件代理就是使用父元素来代理子元素的事件，好处是减少事件的绑定次数，提高性能
事件代理使用场景:
使用场景当多个相同的子元素绑定同一个事件，可以使用事件代理
事件代理方法:
事件代理是使用delegate方法来完成
JavaScript 中的所有事物都是对象：字符串、数值、数组、函数等都可以认为是对象，此外，JavaScript 允许自定义对象，对象可以拥有属性和方法
创建自定义javascript对象有两种方式:
①通过顶级Object类型来实例化一个对象
②通过对象字面量创建一个对象
(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式
采用完全独立于编程语言的文本格式来存储和表示数据,简洁和清晰的层次结构使
得 JSON 成为理想的数据交换语言
JSON的优点:
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率
JSON的格式：
①对象格式
②数组格式
对象格式:
对象格式的JSON数据，使用一对大括号({})，大括号里面放入key:value形式的键值对，多个键值对使用逗号分隔
数组格式:
数组格式的JSON数据，使用一对中括号([])，中括号里面的数据使用逗号分隔
JSON本质上是字符串，如果在js中操作JSON数据，可以将JSON字符串转化为JavaScript对象
一次完整的请求后,浏览器会接受到html,css,js,图片等大量的数据
ajax的介绍
ajax 是 Asynchronous JavaScript and XML的简写，ajax一个前后台配合的技术，它可以让 javascript 发送异步的 http 请求，与后台通信进行数据的获取，ajax 最大的优点是实现局部刷新，ajax可以发送http请求，当获取到后台数据的时候更新页面显示数据实现局部刷新，在这里大家只需要记住，当前端页面想和后台服务器进行数据交互就可以使用ajax了
ajax的实现
jquery将它封装成了一个方法$.ajax()
我们可以直接用这个方法来执行ajax请求
ajax方法的参数说明:
url 请求地址
type 请求方式，默认是\’GET\’，常用的还有\’POST\’
dataType 设置返回的数据格式，常用的是\’json\’格式
data 设置发送给服务器的数据，没有参数不需要设置
success 设置请求成功后的回调函数
error 设置请求失败后的回调函数
async 设置是否异步，默认值是\’true\’，表示异步，一般不用写
ajax的简写方式:
$.ajax按照请求方式可以简写成
$.get或者$.post方式
$.get和$.post方法的参数说明:
$.get(url,data,success(data, status, xhr),dataType).error(func)$.post(url,data,success(data, status, xhr),dataType).error(func)
url 请求地址
data 设置发送给服务器的数据，没有参数不需要设置
success 设置请求成功后的回调函数
data 请求的结果数据
status 请求的状态信息, 比如: \”success\”
xhr 底层发送http请求XMLHttpRequest对象
dataType 设置返回的数据格式
\”xml\”
\”html\”
\”text\”
\”json\”
error 表示错误异常处理
func 错误异常回调函数
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
