• jQuery学习笔记jQuery的事件


     一.事件绑定


    1.事件绑定函数

    事件的绑定函数为如下形式:
         .bind(type [,data],fn)
    type:类型 如click.....
    data:参数
    fn:事件执行的函数

    例子

    $(function(){

            $(#id1).click(function(){

            $(#id2).show();//id2显示

     }) ;

    });

    二.合成事件

    1.鼠标滑过事件

            .hover(enter,leave)

    enter:鼠标光标移动到对象时触发的函数

    leave:鼠标光标移出对象触发的函数


    例子:

    $(function(){

            $(#id1).hover(function(){

            $(#id2).show();//id2显示

     },function(){
     $(#id2).hide();//id2隐藏

     }) ;

    });

    2.连续单击事件

          .toggle(fn1,fn2.......,fnN)

    fn:单击第一次执行fn1,第二次fn2,以此类推

    三.事件冒泡

        事件总是由内层开始执行,一直到最外层,不单击了那个对象,所有包含了此对象的对象所绑定的事件都将执行一次,这是我们不愿意看

    到的,jQuery给我们定义了一些阻止事件执行的方法

    1.事件对象获取

    获取事件对象的方法就是为事件执行函数添加一个参数

    $(#id1).click(function(even){});//even就是获取到的事件对象

    2.阻止事件冒泡

    我们可以在事件执行函数中加入如此啊代码,阻止事件冒泡

    even.stopPropagation();

    3.阻止默认事件

    浏览器默认事件是指,按钮单击后提交,单击链接后打开链接等,jQuery也可以阻止这些默认事件的执行

    even.preventDefault();

    四.获取事件对象的属性

    even.type();//获取事件的类型,

    如:

    $(#id1).click(function(even){

    alert(even.type);

    return false;

    });//返回“click”

    even.target();//获取触发事件的对象

     

    even.while();获取鼠标单击的1=左,2=中,3=右键

    五.移除事件

        .unbind(type [,data]);

    例子:

    $(function(){

            $(#id1).bind("click",fn1=function(){alert(“事件1”);})


            .bind("click",fn2=function(){alert(“事件2”);});

            .bind("click",fn3=function(){alert(“事件3”);}); 
    });

    $("#id2").click(function(){

           $(#id1).unbind("click",fn2);//删除fn2的click事件
    });


    六.其他操作

     1.绑定多个事件

        .bind(type [,data],fn).bind(type [,data],fn)...... ;

        .bind(type type..... [,data],fn) ;

    2.添加事件命名空间

       .bind(type.namespace [,data],fn) ;
    使用时只需指定命名空间即可,如:$(#id1).unbind(".namespace")

  • 相关阅读:
    Web 性能优化
    js 校验身份证
    html5 输入框响应enter按键
    获取浏览器的可视窗口宽高
    js打开新标签
    Java数据脱敏框架
    Spring Boot中的事务管理
    运维监控知识体系
    git常用命令图解 & 常见错误
    安全团队不可错过的七个云安全开源工具(转载)
  • 原文地址:https://www.cnblogs.com/mane/p/1909812.html
Copyright © 2020-2023  润新知