zoukankan      html  css  js  c++  java
  • 27、Jquery 事件

    Jquery 事件

    在javascript中事件调用方式为onclick、onmouseover等,在jquery中 使用事件无需写前面的on

    bind()方法

    为元素绑定事件

    $("#id").bind("click",function(){
        //为id绑定click事件
        alert("ok");
    }); 

    使用bind()方法绑定的事件,是多播事件委托,就是再次定义的事件不会覆盖前一个事件

    //可以按顺序执行两个事件
    $("#id").bind("click",function(){alert("1");});
    $("#id").bind("click",function(){alert("2")});

    one()方法

    绑定一次性事件

    //只执行一次单击操作 下次不会再执行
    $("#id").one("click",function(){
        alert("a");
        return false;
    });

    unbind()方法

    删除事件,取消绑定

    $("#id").unbind(); //删除id的所有事件
    $("#id").unbind("click"); //删除id的所有click事件

    快捷事件

    javascript事件去掉on基本都支持

    click()方法

    单击事件

    $("#id").click(); //如果不写函数体 表示立即触发事件
    $("#id").click(function(){
        //这是一个点击事件
    });

    dbclick()方法

    双击事件

    $("#id").dbclick(); //触发事件
    $("#id").dbclick(function(){
        //双击后执行
    });

    focus()方法

    获得焦点

    $("#id").focus(); //触发
    $("#id").focus(function(){
        //获得焦点后执行
    });

    blur()方法

    失去焦点

    $("#id").blur(); //触发失去焦点事件
    $("#id").blur(function(){
        //失去焦点后执行
    });

    change()方法

    改变时

    $("#id").change(); //触发改变事件
    $("#id").change(function(){
        //改变后执行
    });

    mouseover()方法

    鼠标移入

    $("#id").mouseover();
    $("#id").mouseover(function(){});

    mouseout()方法

    鼠标移出

    $("#id").mouseout();
    $("#id").mouseout(function(){});

    submit()方法

    提交表单

    $("#id").submit(); 
    $("#id").submit(function(){});

    hover()方法

    用于解决mouseover和mouseout存在的问题

    //两个function 分别对应移入和移出
    $("div").hover(function(){
        $("div").html("啊啊啊啊啊啊啊 快跑啊他来了");
    },function(){
        $("div").html("呼、吓死了 终于走了!")
    });

    toggle()方法

    依次执行每个函数,如果执行完毕重复执行

    $("#div").toggle(
        function(){
            $("#div").css({ "width": "100px" });
        },
        function(){
            $("#div").css({ "width": "200px" });
        },
        function(){
            $("#div").css({ "width": "300px" });
        }
    );

    Jquery 事件对象

    Jquery event将不同浏览器的差异进行了合并,比如可以在所有浏览器中都使用event.target来获取触发者而不用判断浏览器使用srcElement。

    $("#div").click(function(e){
        alert(e.type); //返回事件名 click
        alert(e.target); //返回事件源 谁触发的
        alert(e.altKey); //返回alt是否按下 
        alert(e.screenX);//...等等 js中的事件
    });
  • 相关阅读:
    Golang Json文件解析为结构体工具-json2go
    沉浸式状态栏的简易实现
    高级数据结构及应用 —— 使用 bitmap 进行字符串去重
    机器学习:Kullback-Leibler Divergence (KL 散度)
    机器学习: 共轭梯度算法(PCG)
    二进制比特位运算
    C 语言经典面试题 —— 宏
    python base64 编解码,转换成Opencv,PIL.Image图片格式
    Kaggle:House Prices: Advanced Regression Techniques 数据预处理
    maven 细节 —— scope、坐标
  • 原文地址:https://www.cnblogs.com/baidawei/p/4764010.html
Copyright © 2011-2022 走看看