首页 > 代码库 > JQuery 事件
JQuery 事件
JavaScript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的。当文档或者它的某些元素发生某些变化或操作时，浏览器会自动生成一个事件。
常见事件包括：当浏览器加载页面完成后，用户点击按钮，鼠标移动，键盘点击等。
jQuery增加并扩展了基本的事件处理机制。
事件绑定
方法结构：bind(type[,data],fn); 参数： type 事件类型名称，类型包括：blur，focus，load，resize，scroll，unload，click，dblclick,mousedown,mouseup,mousemove,mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,error等
[,data] 传递的参数（可选），作为event.data属性传递给事件的额外数据对象。
fn 处理事件的函数 例如：bind("click",function(){ });
注：jQuery事件相当于JavaScript中的事件少了on，例如JavaScript中的onclick，jQuery中就为click。
<script> $(function () {
//可以对一个事件进行多次绑定， $("#name").bind("click", function () { $(this).next().append("你好吗？<br />"); }).bind("click", function () { $(this).next().append("好！<br />"); }).bind("click", function () { $(this).unbind("click"); //解绑事件 });
//绑定不同的事件
$(".head").bind("mouseover", function () {
$(this).next().show();
}).bind("mouseout", function () {
$(this).next().hide();
});
}); </script>1.hover()方法
语法结构： hover(enter,leave);
hover()方法用于模拟光标悬停事件，当光标移动到元素上时，促发触发一个函数enter，当光标移出这个元素时，会触发第二个函数leave。
2.toggle()方法
语法结构： toggle（fn1,fn2,…fnN）; toggle()方法用于模拟鼠标连续单击事件，第一次触发第一个方法fn1，当下次继续点击同一元素，则触发制定的第2个方法fn2，如果有多个方法则依次触发，直到最后一个，然后在从头开始。
3.toggle()方法
toggle()方法在jQuery中还有另外一个作用切换元素可见性
事件冒泡
在页面上可以有多个事件，也可以多个元素响应一个事件，假设网页上有两个元素，其中一个元素嵌套在另一个元素里，并且都被绑定了click事件，同时body元素也绑定了click事件。
只单击内<span>元素，就会触发外部<div>元素和 <body>元素上的绑定的click事件。这是由事件 冒泡引起的。
停止事件冒泡
停止事件冒泡可以阻止事件中其他对象的事件处理函数执行。在jQuery中提供了
$(function () { // 为span元素绑定click事件 $(‘span‘).bind("click", function (e) { var txt = $(‘#msg‘).html() + "<p>内层span元素被点击.<p/>"; $(‘#msg‘).html(txt); //e.stopPropagation(); return false; //阻止事件冒泡 }); // 为div元素绑定click事件 $(‘#content‘).bind("click", function (e) { var txt = $(‘#msg‘).html() + "<p>外层div元素被点击.<p/>"; $(‘#msg‘).html(txt); e.stopPropagation(); //阻止事件冒泡 }); // 为body元素绑定click事件 $("body").bind("click", function () { //var txt = $(‘#msg‘).html() + "<p>body元素被点击.<p/>";
//$(‘#msg‘).html(txt);
$("#msg").append("<p>body元素被点击.<p/>");
});
})阻止默认行为
当点击超链接，或点击按钮时，都会触发对应元素的默认行为，这里可以通过event.preventDefault(); //阻止默认行为 ( 表单提交 )也可以使用return false;来阻止表单提交。
JQuery 事件