jQuery学习5 jQuery事件模型
作者:bea
jQuery事件模型的功能有: 提供建立事件处理程序的统一方法; 允许在每个元素上为每个时间类型建立多个处理程序; 采用标准的事件类型名称,例如click或mouseover; 使用Event实例可用作处理程序的参数; 对Event实例的最常用的属性进行规范化; 为取消事件和阻塞默认操作提供统一方法。 jQuery绑定事件处理程序: bind()命令 $('img').bind('click',funciton(event){alert('Hi there');}); 该语句
jQuery事件模型的功能有:
提供建立事件处理程序的统一方法;
允许在每个元素上为每个时间类型建立多个处理程序;
采用标准的事件类型名称,例如click或mouseover;
使用Event实例可用作处理程序的参数;
对Event实例的最常用的属性进行规范化;
为取消事件和阻塞默认操作提供统一方法。
jQuery绑定事件处理程序:
bind()命令
$('img').bind('click',funciton(event){alert('Hi there');}); 该语句为页面上的图片绑定已提供的内联函数,作为点击事件处理程序。
建立事件处理程序,无需浏览器特定代码
代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>jQuery Events Example</title>
<script type="text/javascript" src="../scripts/jquery-1.2.1.js">
</script>
<script type="text/javascript">
$(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>
<img id="vstar" src="vstar.jpg"/>
<div id="console"></div>
</body>
</html>
删除事件处理程序unbind(event,listener),unbind(event)
从包装集的所有元素中删除可选的已传递参数所指定的事件处理程序。如果不提供参数,则从元素中删除所有的监听器(即事件处理程序)
起切换作用的监听器toggle()
toggle(listenerOdd,listenerEven)把已传递函数建立为包装集所有元素的一对click事件处理程序,每当触发click事件就相互切换。
每当点击事件发生时,调用互补的监听器
代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>jQuery Toggle Command Example</title>
<script type="text/javascript" src="../scripts/jquery-1.2.1.js">
</script>
<script type="text/javascript">
$(function(){
$('#vstar').toggle(
function(event) {
$(event.target).css('opacity',0.4);
},
function(event) {
$(event.target).css('opacity',1.0);
}
);
});
</script>
</head>
<body>
<img id="vstar" src="vstar.jpg"/>
</body>
</html>
在元素上方悬停鼠标指针hover(overListener,outListener)建立已匹配元素的mouseover和mouseout事件处理程序。这些处理程序当儿仅当元素所覆盖区域被进入和退出时触发,忽视鼠标指针从父元素到子元素上的迁移
鼠标停留事件
代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Hover example</title>
<link rel="stylesheet" type="text/css" href="hover.css">
<script type="text/javascript"
src="../scripts/jquery-1.2.1.js"></script>
<script type="text/javascript">
function report(event) {
$('#console').append('<div>'+event.type+'</div>');
}
$(function(){
$('#outer1')
.bind('mouseover',report)
.bind('mouseout',report);
$('#outer2').hover(report,report);
});
</script>
</head>
<body>
<div class="outer" id="outer1">
Outer 1
<div class="inner" id="inner1">Inner 1</div>
</div>
<div class="outer" id="outer2">
Outer 2
<div class="inner" id="inner2">Inner 2</div>
</div>
<div id="console"></div>
</body>
</html>
有用 | 无用
提供建立事件处理程序的统一方法;
允许在每个元素上为每个时间类型建立多个处理程序;
采用标准的事件类型名称,例如click或mouseover;
使用Event实例可用作处理程序的参数;
对Event实例的最常用的属性进行规范化;
为取消事件和阻塞默认操作提供统一方法。
jQuery绑定事件处理程序:
bind()命令
$('img').bind('click',funciton(event){alert('Hi there');}); 该语句为页面上的图片绑定已提供的内联函数,作为点击事件处理程序。
建立事件处理程序,无需浏览器特定代码
代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>jQuery Events Example</title>
<script type="text/javascript" src="../scripts/jquery-1.2.1.js">
</script>
<script type="text/javascript">
$(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>
<img id="vstar" src="vstar.jpg"/>
<div id="console"></div>
</body>
</html>
删除事件处理程序unbind(event,listener),unbind(event)
从包装集的所有元素中删除可选的已传递参数所指定的事件处理程序。如果不提供参数,则从元素中删除所有的监听器(即事件处理程序)
起切换作用的监听器toggle()
toggle(listenerOdd,listenerEven)把已传递函数建立为包装集所有元素的一对click事件处理程序,每当触发click事件就相互切换。
每当点击事件发生时,调用互补的监听器
代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>jQuery Toggle Command Example</title>
<script type="text/javascript" src="../scripts/jquery-1.2.1.js">
</script>
<script type="text/javascript">
$(function(){
$('#vstar').toggle(
function(event) {
$(event.target).css('opacity',0.4);
},
function(event) {
$(event.target).css('opacity',1.0);
}
);
});
</script>
</head>
<body>
<img id="vstar" src="vstar.jpg"/>
</body>
</html>
在元素上方悬停鼠标指针hover(overListener,outListener)建立已匹配元素的mouseover和mouseout事件处理程序。这些处理程序当儿仅当元素所覆盖区域被进入和退出时触发,忽视鼠标指针从父元素到子元素上的迁移
鼠标停留事件
代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Hover example</title>
<link rel="stylesheet" type="text/css" href="hover.css">
<script type="text/javascript"
src="../scripts/jquery-1.2.1.js"></script>
<script type="text/javascript">
function report(event) {
$('#console').append('<div>'+event.type+'</div>');
}
$(function(){
$('#outer1')
.bind('mouseover',report)
.bind('mouseout',report);
$('#outer2').hover(report,report);
});
</script>
</head>
<body>
<div class="outer" id="outer1">
Outer 1
<div class="inner" id="inner1">Inner 1</div>
</div>
<div class="outer" id="outer2">
Outer 2
<div class="inner" id="inner2">Inner 2</div>
</div>
<div id="console"></div>
</body>
</html>
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- js 自定义的联动下拉框
- 比较搞笑的js陷阱题
- javascript 鼠标拖动图标技术
- 数组Array进行原型prototype扩展后带来的for in遍历问题
- CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
- JavaScript 精粹读书笔记(1,2)
- 一些mootools的学习资源
- Js 中debug方式
- 为调试JavaScript添加输出窗口的代码
- 基于mootools的圆角边框扩展代码
- JavaScript 读取元素的CSS信息的代码
- JavaScript Event学习第八章 事件的顺序
- JavaScript Event学习第七章 事件属性
- JavaScript Event学习第六章 事件的访问
- JavaScript Event学习第五章 高级事件注册模型
- JavaScript Event学习第四章 传统的事件注册模型
- jQuery库与其他JS库冲突的解决办法
- jQuery学习7 操作JavaScript对象和集合的函数
- jQuery 学习6 操纵元素显示效果的函数