<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> jquery events </TITLE>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script language="javascript" >
function one(){
alert("one");
}
function two(){
alert("two");
}
window.onload=one;
//依次给onload赋值时，后面的会覆盖前面的,只能保存对一个函数的引用
window.onload=two;
//最终绑定一个匿名函数，调用两个函数
window.onload=function(){
alert("js");
one();
two();
}
//$(document).ready(function(){}),$().ready(function(){}),$(function(){})等价
//该方法内注册的函数，事件，只要dom加载完毕就可以操作，执行要早于window.onload
//多次调用该方法注册事件会在原来的基础上追加
$(document).ready(function(){
alert("jquery");
one();
two();
})
$(function(){
alert("three");
})
$().ready(function(){
alert("four");
})
/*
bind("",function(){})
参数1是需要绑定的事件，可以是js中已经存在的事件（onclick,onmouseover,change,blur...）
bind中作为参数时没有前面的on（"onclick"-->"click"）,也可以是
自定义事件，用trigger方法调用;
参数2是处理函数
*/
$(function(){
$("#bt1").bind("click",function(){
alert("正在计算");
}).bind("click",function(){//bind可以多次调用
var tm = new Date().toString();
$(this).next("span").html(tm).show();
}).bind("focus click",function(){
alert("focus or click");
})
})
//为元素绑定事件也可以这样简写
$(function(){
$("#bt2").click(function(){
alert("hello");
})
})
//hover(f1,f2)两个函数参数，当光标移动到元素上时，触发第一个函数，
//当光标移出这个元素时，会触发第二个函数
$(function(){
$("#bt3").hover(function(){
$(this).next("span").html("in");
},function(){
$(this).next("span").html("leave");
})
})
//toggle(f1,f2,f3...)，当点击绑定该事件的元素时，会循环重复调用传递的函数参数，
//如果调用到最后一个，下次点击又会从第一个开始
$().ready(function(){
$("#bt4").toggle(
function(){alert("1")},
function(){alert("2")},
function(){alert("3")}
)
})
$(document).ready(function(){
$("#bt5").toggle(function(){
$(this).next("span").hide();
},function(){
$(this).next("span").show();
})
})
</script>
</HEAD>
<BODY>
<hr/>
<button id="bt1">现在的时间？</button><span style="display:none"></span><br/>
<button id="bt2">click</button><br/>
<button id="bt3">test hover()</button><span></span><br/>
<button id="bt4">test toggle() 1</button><br/>
<button id="bt5">test toggle() 2</button><span>hello</span>
<hr/>
<div id="d1" style="background-color:red;width:100px;height:50px">
<span id="s1" style="background-color:green;width:60px;height:30px">hello</span>
</div>
<hr/>
<button id="bt6">点击看我有几个click函数</button><br/>
<button id="bt7">移除一个click事件</button>
<button id="bt8">移除所有click事件</button>
<button id="bt9">移除所有事件</button>
<hr/>
<div style="background-color:red;width:400px;height:50px">
<span>hello</span>
</div>
<button>触发div的自定义事件</button>
</BODY>
<script language="javascript">
/*
分别为选择的div和span注册click事件，上面可知该span是该div的child,
如果点击该span也相当与点击了该div，所以两个的click函数都会触发，如果当点击span时只想
触发span的click函数，可以在其注册函数传递event参数，用event.stopPropagation()来停止事件冒泡，相当于return false;
注册函数传递的event参数包含了一些事件信息
event.type() 事件类型
event.target() 触发事件的元素
event.pageX()，event.pageY() 光标相对于页面的x和y坐标
event.which() 鼠标单机事件中获取鼠标的左、中、右键//对应值分别是1、2、3
event.preventDefault() 阻止事件的默认行为，如submit
event.stopPropagation() 阻止事件冒泡
*/
$("div#d1").click(function(){alert("div click")});
$("span#s1").click(function(event){
alert("span click");
event.stopPropagation();//return false也可以
});
//为id是bt6的button注册事件
$("#bt6").bind("click",myFunc1=function(){
alert("click func1");
}).bind("click",myFunc2 = function(){
alert("click func2")
}).bind("click",myFunc3=function(){
alert("click func3");
}).bind("mouseover",function(){
$(this).css("backgroundColor","green");
}).bind("mouseout",function(){
$(this).css("backgroundColor","");
})
/*
unbind()函数，用来移除注册事件
(1) 没有参数，则删除所有绑定事件
(2)如果提供事件类型作为参数，只删除该类型的绑定事件
(3)在（2）的基础上，传递绑定的处理函数作为第二个参数，
则只有这个特定的事件处理函数会被删除
*/
//点击id为bt7的button移除bt6的第一个click函数
$("#bt7").bind("click",function(){
$("#bt6").unbind("click",myFunc1);
})
//bt8用来移除bt6所有的click函数
$("#bt8").bind("click",function(){
$("#bt6").unbind("click");
})
//bt9用来移除bt6所有的注册事件
$("#bt9").bind("click",function(){
$("#bt6").unbind();
})
/*
对于只需要触发一次的事件可以用one()方法处理，
用法类似bind()方法
*/
//模拟操作，触发事件 trigger();可以是js事件也可以是自定义事件
//选取body下的最后一个button和div元素
var $lsBt = $("body > button:last");
var $lsDv = $("body > div:last");
//为最后一个div绑定一个自定义事件hello
$lsDv.bind("hello",function(){
$(this).append("<span>自定义绑定事件hello被调用<span>")
})
//当点击最后一个button，触发div的hello事件
$lsBt.click(function(){
$lsDv.trigger("hello");
})
</script>
</HTML>
分享到：
相关推荐
jquery事件处理。
jQuery事件处理具有几个核心特征，尤其值得深入了解的是其事件命名机制和处理方式。 首先，我们来谈谈事件命名机制。在jQuery中，事件名称遵循特定的命名规则，通常与原生JavaScript事件类似，但也有自己的特色。...
**jQuery事件** ...通过理解并熟练运用这些jQuery事件处理机制，开发者可以构建出更加响应用户交互、高效且易于维护的网页应用。无论是简单的按钮点击还是复杂的用户界面交互，jQuery都能提供强大的支持。
本篇文章将深入探讨jQuery事件处理及其相关示例，帮助你更好地理解和运用jQuery在实际项目中的功能。 ### 一、jQuery事件绑定 1. **`$(selector).on(events, handler)`**: 这是jQuery中用于绑定事件的主要方法。`...
jQuery事件处理方法是jQuery的核心函数。 常用事件方法（教材P263表A-4）： 分类 事件方法 描述 鼠标 click() 单机鼠标左键时触发 dbclick() 双击鼠标左键时触发 键盘 keypress() 键盘按键(Shift、CapsLock等非字符...
《jQuery事件函数共4页.pdf》是一份详细探讨jQuery事件处理的资料，它涵盖了JavaScript库jQuery中的关键事件处理概念和函数。jQuery简化了DOM（文档对象模型）事件处理，使得在网页交互中添加、移除和触发事件变得...
在JavaScript的世界里，jQuery是一个非常流行的库，它简化了DOM操作、事件处理和Ajax交互等任务。本案例聚焦于jQuery中的事件处理，特别是事件的订购...通过不断的实践和探索，你将在jQuery事件处理方面变得更加熟练。
默认情况下，引发未捕获异常的jQuery事件处理程序可以阻止执行同一事件的其他事件处理程序。 触发事件后立即运行的任何代码也可以由单个失败的事件处理程序暂停。 此插件创建jQuery事件处理方法的“安全”版本（如....
通过以上对jQuery事件处理和动画效果的讲解，相信你已经对这两个主题有了全面的理解。结合实际的HTML文档，不断练习和探索，你将能熟练运用jQuery，提升网页交互体验。在实践中，不断学习，持续进步，是成为优秀的...
jQuery选择器 jQuery操作DOM jQuery事件处理 jQuery动画基础
总的来说，jQuery事件处理是Web开发中增强用户体验的关键工具，通过合理利用这些功能，开发者可以创建出响应迅速、交互丰富的网站和应用程序。了解并熟练掌握jQuery的事件处理机制，对于提升Web开发效率和代码质量...
jQuery事件处理程序 与其创建大量难以跟踪的jquery.on函数，我们创建了一个简单的包装器来帮助我们跟踪触发和侦听的事件。 触发事件 DO.Fire(eventName, data); 收听事件： DO.Subscribe(eventName, function...
这时，"jq-events-debuger"工具就显得尤为重要，它可以帮助开发者查看并分析jQuery事件处理程序的源代码，从而实现更高效的代码优化和问题定位。 "jq-events-debuger"是一款开源系统，其主要功能是为开发者提供一个...
jQuery 改进了JavaScript的事件处理方式，如 `.on()` 方法用于绑定事件监听器，`.off()` 移除事件监听器，`.trigger()` 触发事件。`.delegate()` 和 `.live()`（在jQuery 1.7后被 `.on()` 替代）则支持事件代理，...
jQuery事件处理 jQuery页面导航（这部分内容较少，增加了几个纯CSS实现） jQuery视觉特效（这部分内容最丰富）。 每个实例都有简洁的注释，基本上原书的精髓都汇聚于此。另外附带jQuery可视化API一份。 希望大家...
一、jQuery事件处理 1. 事件绑定：jQuery提供`.on()`方法来绑定事件，如`$("#element").on("click", function() {...})`，点击元素时执行回调函数。 2. 事件冒泡与阻止：使用`.stopPropagation()`可以阻止事件向上...
jQuery事件处理如`$(element).on('event', handler)`，允许在指定元素上绑定事件处理器。`off()`用来取消事件绑定。 **jQuery工具方法** jQuery还提供了一系列工具方法，如`$.each()`, `$.trim()`, `$.grep()`, `$...