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

posted @ 2016-09-29 23:05  Sealee  阅读(293)  评论(0编辑  收藏  举报