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

  • 相关阅读:
    MCS锁——可伸缩的自旋锁
    The Art of Multiprocessor Programming读书笔记 (更新至第3章)
    在Visual Studio 2015的Cordova项目中使用Gulp
    SharePoint服务器端对象模型 之 使用LINQ进行数据访问操作(Part 1)
    SharePoint服务器端对象模型 之 使用CAML进行数据查询(Part 4)
    knockoutJs在移动设备上有时无法更新控件值
    SharePoint服务器端对象模型 之 使用CAML进行数据查询(Part 3)
    SharePoint服务器端对象模型 之 使用CAML进行数据查询(Part 2)
    SharePoint服务器端对象模型 之 使用CAML进行数据查询
    SharePoint服务器端对象模型 之 访问文件和文件夹(Part 4)
  • 原文地址:https://www.cnblogs.com/Sea1ee/p/5922308.html
Copyright © 2020-2023  润新知