• 技术文章 >web前端 >前端问答

    jquery有哪些基础事件方法

    青灯夜游青灯夜游2022-05-25 16:53:21原创330

    基础事件方法:1、click(),设置鼠标单击事件;2、dblclick(),设置鼠标双击事件;3、change(),设置内容改变事件;4、focus(),设置触发焦点事件;5、blur(),设置失去焦点事件;6、mousedown()等。

    本教程操作环境:windows7系统、jquery1.10.2版本、Dell G3电脑。

    事件方法触发器或添加一个函数到被选元素的事件处理程序。

    下面的表格列出了一些用于处理事件的 jQuery 方法。

    方法描述
    bind()向元素添加事件处理程序
    blur()添加/触发失去焦点事件
    change()添加/触发 change 事件
    click()添加/触发 click 事件
    dblclick()添加/触发 double click 事件
    die()在版本 1.9 中被移除。移除所有通过 live() 方法添加的事件处理程序
    focus()添加/触发 focus 事件
    focusin()添加事件处理程序到 focusin 事件
    focusout()添加事件处理程序到 focusout 事件
    hover()添加两个事件处理程序到 hover 事件
    keydown()添加/触发 keydown 事件
    keypress()添加/触发 keypress 事件
    keyup()添加/触发 keyup 事件
    live()在版本 1.9 中被移除。添加一个或多个事件处理程序到当前或未来的被选元素
    mousedown()添加/触发 mousedown 事件
    mouseenter()添加/触发 mouseenter 事件
    mouseleave()添加/触发 mouseleave 事件
    mousemove()添加/触发 mousemove 事件
    mouseout()添加/触发 mouseout 事件
    mouseover()添加/触发 mouseover 事件
    mouseup()添加/触发 mouseup 事件
    off()移除通过 on() 方法添加的事件处理程序
    on()向元素添加事件处理程序
    one()向被选元素添加一个或多个事件处理程序。该处理程序只能被每个元素触发一次
    ready()规定当 DOM 完全加载时要执行的函数
    toggle()在版本 1.9 中被移除。添加 click 事件之间要切换的两个或多个函数
    trigger()触发绑定到被选元素的所有事件
    triggerHandler()触发绑定到被选元素的指定事件上的所有函数
    unbind()从被选元素上移除添加的事件处理程序
    undelegate()从现在或未来的被选元素上移除事件处理程序

    说明:

    1、以上事件函数有三种用法:

    //直接绑定事件到元素上
    $('.target1').keydown(function(e) {
        $("em:first").text(e.target.value)    //通过对象e获取输入的值
    });
     
    //传递参数调用函数处理
    $("#test").click(11111,function(e) {
        //this指向 div元素
        //e.data  => 11111 通过e传递参数数据
    });
     
    //手动触发已绑定的点击事件
    $elem.click()

    2、mouseover与mouseenter区别:不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件,称作支持冒泡处理,冒泡处理指子元素与父元素共同定义的事件,在触发子元素时,或者没有定义子元素,事件就会向父级传播,引发父级事件触发。只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。

    3、form元素是有默认提交表单的行为,如果通过submit处理的话,需要禁止浏览器的这个默认行为。传统的方式是调用事件对象 e.preventDefault() 来处理, jQuery中可以直接在函数中最后结尾return false即可。

        //回车键或者点击提交表单后禁止浏览器默认跳转:
        $('#target2').submit(function() {
            alert('捕获提交表达动作,阻止页面跳转')
            return false;
        });

    4、on()使用

    基本用法:.on( events ,[ selector ] ,[ data ] )

    最常见的给元素绑定一个点击事件,对比一下快捷方式与on方式的不同

    $("#elem").click(function(){})  //快捷方式
    $("#elem").on('click',function(){}) //on方式
    
    //多个事件绑定同一个函数,通过空格分离,传递不同的事件名,可以同时绑定多个事件
    $("#elem").on("mouseover mouseout",function(){ });
    
    //多个事件绑定不同函数
    $("#elem").on({
        mouseover:function(){}, 
        mouseout:function(){}
    });
    
    //将数据传递到处理程序
    $( "button" ).on( "click", {    //第二个参数传递数据给函数调用
      name: "Mr.Tory"
    }, greet );
    function greet( event ) {
      alert( "Hello " + event.data.name ); //输出Hello Mr.Tory
    }

    事件对象的属性与方法

    .type

    事件类型.如果使用一个事件处理函数来处理多个事件, 可以使用此属性获得事件类型,比如click

    .data

    事件调用时传入额外参数

    .target

    触发该事件的 DOM 元素

    .which

    指示按了哪个键或按钮

    .timeStamp

    该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数

    .pageX/Y

    相对于文档左/上边缘的鼠标位置

    .result

    上一个相同事件处理器函数返回的值

    .preventDefalut()

    阻止事件的默认动作

    .stopPropagation()

    取消事件冒泡

    $("#content").click(function(event) {
       $("#msg").html("<p>外层div元素被单击</p>");
       event.stopPropagation();                         //通过event方法阻止事件冒泡  
    });

    【推荐学习:jQuery视频教程web前端视频

    以上就是jquery有哪些基础事件方法的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:jQuery
    上一篇:jquery移动端库有哪些 下一篇:jquery语法结构由哪几部分组成
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• jquery怎么求输入框的值• jquery模板引擎有哪些• jquery怎么判断元素是否有子节点• jquery怎么根据id判断元素是否存在• jquery怎么删除所有li元素
    1/1

    PHP中文网