jQuery学习5jQuery事件模型
2023-06-13 09:14:16 时间
jQuery事件模型的功能有:
提供建立事件处理程序的统一方法;
允许在每个元素上为每个时间类型建立多个处理程序;
采用标准的事件类型名称,例如click或mouseover;
使用Event实例可用作处理程序的参数;
对Event实例的最常用的属性进行规范化;
为取消事件和阻塞默认操作提供统一方法。
jQuery绑定事件处理程序:
bind()命令
$("img").bind("click",funciton(event){alert("Hithere");});该语句为页面上的图片绑定已提供的内联函数,作为点击事件处理程序。
建立事件处理程序,无需浏览器特定代码
复制代码代码如下:
提供建立事件处理程序的统一方法;
允许在每个元素上为每个时间类型建立多个处理程序;
采用标准的事件类型名称,例如click或mouseover;
使用Event实例可用作处理程序的参数;
对Event实例的最常用的属性进行规范化;
为取消事件和阻塞默认操作提供统一方法。
jQuery绑定事件处理程序:
bind()命令
$("img").bind("click",funciton(event){alert("Hithere");});该语句为页面上的图片绑定已提供的内联函数,作为点击事件处理程序。
建立事件处理程序,无需浏览器特定代码
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>jQueryEventsExample</title>
<scripttype="text/javascript"src="../scripts/jquery-1.2.1.js">
</script>
<scripttype="text/javascript">
$(function(){
$("#vstar")
.bind("click",function(event){
say("Wheeonce!");
})
.bind("click",function(event){
say("Wheetwice!");
})
.bind("click",function(event){
say("Wheethreetimes!");
});
});
functionsay(text){
$("#console").append("<div>"+text+"</div>");
}
</script>
</head>
<body>
<imgid="vstar"src="vstar.jpg"/>
<divid="console"></div>
</body>
</html>
删除事件处理程序unbind(event,listener),unbind(event)
从包装集的所有元素中删除可选的已传递参数所指定的事件处理程序。如果不提供参数,则从元素中删除所有的监听器(即事件处理程序)
起切换作用的监听器toggle()
toggle(listenerOdd,listenerEven)把已传递函数建立为包装集所有元素的一对click事件处理程序,每当触发click事件就相互切换。
每当点击事件发生时,调用互补的监听器
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>jQueryToggleCommandExample</title>
<scripttype="text/javascript"src="../scripts/jquery-1.2.1.js">
</script>
<scripttype="text/javascript">
$(function(){
$("#vstar").toggle(
function(event){
$(event.target).css("opacity",0.4);
},
function(event){
$(event.target).css("opacity",1.0);
}
);
});
</script>
</head>
<body>
<imgid="vstar"src="vstar.jpg"/>
</body>
</html>
在元素上方悬停鼠标指针hover(overListener,outListener)建立已匹配元素的mouseover和mouseout事件处理程序。这些处理程序当儿仅当元素所覆盖区域被进入和退出时触发,忽视鼠标指针从父元素到子元素上的迁移
鼠标停留事件
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Hoverexample</title>
<linkrel="stylesheet"type="text/css"href="hover.css">
<scripttype="text/javascript"
src="../scripts/jquery-1.2.1.js"></script>
<scripttype="text/javascript">
functionreport(event){
$("#console").append("<div>"+event.type+"</div>");
}
$(function(){
$("#outer1")
.bind("mouseover",report)
.bind("mouseout",report);
$("#outer2").hover(report,report);
});
</script>
</head>
<body>
<divclass="outer"id="outer1">
Outer1
<divclass="inner"id="inner1">Inner1</div>
</div>
<divclass="outer"id="outer2">
Outer2
<divclass="inner"id="inner2">Inner2</div>
</div>
<divid="console"></div>
</body>
</html>
相关文章
- jquery监听浏览器刷新_jQuery刷新浏览器页面大小
- 利用Jquery Lazyload JS插件实现网页图片延迟加载
- jQuery事件详解编程语言
- Jquery 给Js动态新添加的元素 绑定的点击事件详解编程语言
- jQuery width()和height()方法的用法
- jQuery off()方法解除绑定事件
- jQuery this事件
- jquery常用操作整理基础入门篇
- jQuery技巧大放送学习jquery的朋友可以看下
- checkbox全选/取消全选以及checkbox遍历jQuery实现代码
- 锋利的jQuery要点归纳(三)jQuery中的事件和动画(上:事件篇)
- js和jquery批量绑定事件传参数一(新猪猪原创)
- jquery回车事件实现代码
- jquery中dom操作和事件的实例学习-表单验证
- jquery中dom操作和事件的实例学习仿yahoo邮箱登录框的提示效果
- jquery中dom操作和事件的实例学习下拉框应用
- 推荐40个简单的jQuery导航插件和教程(下篇)
- jquery实现div拖拽宽度示例代码
- JQuery触发事件例如click
- ff下JQuery无法监听input的keyup事件的解决方法
- Jquery下EasyUI组件中的DataGrid结果集清空方法
- 不要使用jQuery触发原生事件的方法
- jquery移除、绑定、触发元素事件使用示例详解
- JQuery给元素绑定click事件多次执行的解决方法
- php+jQuery.uploadify实现文件上传教程
- 使用JQuery库提供的扩展功能实现自定义方法
- jQuery对val和atrr("value")赋值的区别介绍