jQuery学习5 jQuery事件模型

品味苦辣

品味苦辣

2016-02-19 14:12

图老师小编精心整理的jQuery学习5 jQuery事件模型希望大家喜欢,觉得好的亲们记得收藏起来哦!您的支持就是小编更新的动力~
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
titlejQuery 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
titlejQuery 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
titleHover 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
展开更多 50%)
分享

猜你喜欢

jQuery学习5 jQuery事件模型

Web开发
jQuery学习5 jQuery事件模型

jQuery学习4 浏览器的事件模型

Web开发
jQuery学习4 浏览器的事件模型

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

JQuery 初体验(建议学习jquery)

Web开发
JQuery 初体验(建议学习jquery)

jQuery入门[3]-事件

Web开发
jQuery入门[3]-事件

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

JQuery 学习笔记01 JQuery初接触

Web开发
JQuery 学习笔记01 JQuery初接触

学习jQuery之旅--jQuery的经典实例应用

Web开发
学习jQuery之旅--jQuery的经典实例应用

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

jQuery ctrl+Enter shift+Enter实现代码

jQuery ctrl+Enter shift+Enter实现代码

Java Applet 入门 第一天

Java Applet 入门 第一天
下拉加载更多内容 ↓