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;来阻止表单提交。