jQuery的事件模式(翻译jQuery in action第四章)

最新推荐文章于 2018-04-28 20:47:55 发布

it_1234

最新推荐文章于 2018-04-28 20:47:55 发布

阅读量653

点赞数

分类专栏： jQuery 文章标签： jquery action function 浏览器前端开发 scroll

jQuery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

这章前边基本上都不用翻译，刚开始讲了事件驱动模式，没有意义在重复，该章的第一节讲的是2种不同的驱动模式和IE的事件驱动模式，我们要学会用jQuery的事件，实际上这些都可以忽略，用时髦的话说，对我们透明。下边就开始进入主题。

4．2JQuery的事件模式

大家都很清楚，建立丰富的互联网应用，需要大幅依赖于事件处理，在写事件处理代码的时候，最令人头疼的就是处理不同浏览器之间的兼容。

我们前端开发工程师一直希望有一个统一的接口，而隐藏浏览器判断的代码分支，jQuery的事件模式已经帮我们到了，先简单介绍一下jQuery的事件模式特性：

■提供了一个统一的方法，建立事件处理程序

■在同一个元素上每个事件允许多次处理（意思就是事件处理代码可以叠加）

■使用标准的事件类型名称：例如，click和mouseouver

■支持事件当初参数来处理：例如：$(‘#id’).bind(‘click’,function(){})

■标准化活动，例如为最常用的属性

■提供统一的方法和取消事件

jQuery事件模式类似DOM leve2事件模式，在事件触发的时候做了异常捕获，兼容多个浏览器版本，所以我们在使用的时候并不需要考虑要触发的事件是不是支持该浏览器，jQuery已经帮我们做了。

是不是真就这么简单？继续看下边的。

4．2．1用jQuery绑定事件

使用jQuery，可以用bind（）函数给DOM对象绑定一个事件，例如：$('img').bind('click',function(event){alert('Hi there!');});这句意思就是给页面内所有图片上的click事件绑定一个alert('Hi there!');，这样你点击任何图片的时候都会执行alert('Hi there!');

bind函数的完整语法如下：

bind(eventType,[data],listener)

参数：

eventType (String)：指定的名称，该事件类型

data (Object)：可选，是传递到listenter的参数，是key/value的数据对象。

listener (Function)：处理的程序（函数）；

下边是具体的例子：

<html>

<head>

<title>DOM Level 2 Events Example</title>

src="../scripts/jquery-1.2.1.js">

</script>

$(function(){

$('#vstar')

.bind('click',function(event) {

say('Whee once!');

})

.bind('click',function(event) {

say('Whee twice!');

})

.bind('click',function(event) {

say('Whee three times!');

});

function say(text) {

$('#console').append('<div>'+text+'</div>');

}

</script>

</head>

<body>

</body>

</html>

下边是运行的结果截图（由于这里的是以前的章节有关系，就不翻译了）：

bind函数还提供一些很有意思的处理，我们还可以指定到特殊命名空间上，之间用.隔开，下边举个例子：

一个网页，有两种模式： 1显示模式和2编辑模式。当编辑模式中，会在很多元素上监听事件，但是这些监听事件并不想在显示模式的时候发生，或者说是退出编辑模式的时候删除这些事件，我们就可以这样定义jQuery代码：

$('#thing1').bind('click.editMode',someListener);

$('#thing2').bind('click.editMode',someOtherListener);

...

$('#thingN').bind('click.editMode',stillAnotherListener);

这些代码的意思就是指定元素只有再编辑模式下，click的时候才会触发listener，后边我们再进行测试。这样应用很方便，比如网页退出编辑模式的时候，想撤销所有的绑定事件，定义就很简单了。

$('*').unbind('click.editMode');

这将撤销该页面所有元素，在编辑模式定义的click事件，这样是不是很简单了，一般应用中很少这样应用，在做编辑器的时候就非常的有用，其实这里还没有说完整，这个bind函数还可以一次定义多个事件，事件名之间用空格分开，例如：$('#thing1').bind('click mouseover',someListener);估计写这边书的作者也没有仔细研究过jQuery的代码。

除了bind()函数之外，jQuery基于bind又封装了一套完善事件命令，这些函数除了名字不一样之外，语法都是一样的，所以就不一一说明，下边是具体的语法描述：

语法：具体事件的绑定

eventTagName（listner）

eventTagName就是具体事件的命名空间，比如click、mouseouve，下边是jQuery具体提供的函数列表：

■ blur■ change■ click■ dblclick■ error■ focus■ keydown■ keypress■ keyup

■ load■ mousedown■ mousemove■ mouseout■ mouseover■ mouseup■ resize

■ scroll■ select■ submit■ unload

参数：listner（Function）触发该事件的时候执行的函数。

返回值：被包裹的jQuery数组对象。

jQuery还提供了一个特殊的绑定函数，one()，这个函数意义是被绑定的函数只执行一次，执行完之后这个绑定的事件就会被删除，他的语法和bind()基本上一样，如果要在该元素上阻止事件冒泡就返回false就可以了。下边是语法：

one（eventTagName,[data],listner）参数的意义和bind一样，就不再重复写了。

it_1234

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery的事件模式(翻译jQuery in action第四章)

这章前边基本上都不用翻译，刚开始讲了事件驱动模式，没有意义在重复，该章的第一节讲的是2种不同的驱动模式和IE的事件驱动模式，我们要学会用jQuery的事件，实际上这些都可以忽略，用时髦的话说，对我们透明。下边就开始进入主题。4．2JQuery的事件模式大家都很清楚，建立丰富的互联网应用，需要大幅依赖于事件处理，在写事件处理代码的时候，最令人头疼的就是处理不同浏览器之间的兼容。我们前端开
复制链接

扫一扫