订阅博客
收藏博客
微博分享
QQ空间分享

jQuery事件

频道:前端 标签:jQuery 时间:2019年07月29日 浏览:41次 评论:1条
作者: 三只松果

一、鼠标事件

1、click与dblclick事件

    click事件为鼠标单击事件,dblclick为鼠标双击事件

1.1、用法一:

    <div id="test">点击触发<div>

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

    //this指向 div元素

    alert(this) });

        用法二:

    <div id="test">点击触发<div> 

    $("#test").click(11111,function(e) {

    //this指向 div元素
    //e.data => 11111 传递数据 alert(e.data)

    });


2、mousedown与mouseup事件

    分别为鼠标按下和松开事件

2.1、用法一:

    <div id="test">点击触发<div> 

    $("#test").mousedown(function() {

         //this指向 div元素
        alert(this)

        });

        用法二:

    <div id="test">点击触发<div>

     $("#test").mousedown(11111,function(e) {

    //this指向 div元素
    //e.data => 11111 传递数据 

    alert(e.data)

    });



3、mousemove事件

    是鼠标在一个元素上移动时触发的事件

3.1、用法一:

    <div id=“test”> 

    <p>鼠标在绿色区域移动触发mousemove</p> 

    <p>移动的X位置:</p>

    <div> 

    $("#test").mousemove(function() {

    //this指向 div元素

    $(this).find('p:last').html('移动的X位置:' + e.pageX) });


        用法二:

    <div id="test"><div>

     $("#test").mousemove(11111,function(e) {

    //this指向 div元素

    //e.data => 11111 传递数据 alert(e.data)

    });



4、mouseover与mouseout事件

    为鼠标移入和移出事件

4.1、用法一:

    <div class="test"> 

    <p>鼠标移进此区域触发mouseover事件</p> <a>进入元素内部,mouseover事件触发次数:</a>

    </div> var n = 0;

    //绑定一个mouseover事件 $(".test p").mouseover(function(e) {

    $(".test a").html('进入元素内部,mouseover事件触发次数:' + (++n)) })

        用法二:

        <div id="test">点击触发<div> 

        $("#test").mouseover(11111,function(e) {

        //this指向 div元素
            //e.data => 11111 传递数据 alert(e.data)

        });


5、mouseenter与mouseleave事件

        和上面一个基本相同,不同点在于这两个事件不会有冒泡问题,而是只针对个体触发,他的子元素和父元素不会间接触发他

5.1、用法和上面的事件一样


6、focusin和focusout与focus和blur

6.1、他们的区别在于前者会受到冒泡影响,后者不会


二、键盘事件

1、keydown()与keyup()事件

1.1、keydown()事件在键盘按下时触发:一个字符输入完成后按下下一个字符时触发上次的输入

1.2、keyup()事件在松开键盘时触发:一个字符输入后松开就马上触发,所以要比keydown()快一拍


2、keypress()事件

    keypress事件与keydown和keyup的主要区别:    

    1. 只能捕获单个字符,不能捕获组合键
    2. 无法响应系统功能键(如delete,backspace)
    3. 不区分小键盘和主键盘的数字字符

     总而言之,KeyPress主要用来接收字母、数字等ANSI字符,而KeyDown 和 KeyUP 事件过程可以处理任何不被 KeyPress 识别的击键。诸 如:功能键(F1-F12)、编辑键、定位键以及任何这些键和键盘换档键的 组合等。


三、事件的绑定与解绑

1、on()的多事件绑定

1.1、多事件绑定同一个函数

    $("#elem").on("mouseover mouseout”,function(e){ 

        $(this).text('触发事件:' + e.type)


    });

1.2、多事件绑定不同函数

    $("#elem").on({ 

        mouseover:function(e){


        $(this).text('触发事件:' + e.type) },

        mouseout:function(e){ 

        $(this).text('触发事件:' + e.type)


    } });

 1.3、参数传递的用法

      function greet( event ) {
        alert( "Hello " + event.data.name );

        }
    $( "button" ).on( "click", {

        name: "HelloWorld" }, greet );


2、on()的高级用法

    <div class="left">
    <p class="test">

    <a>目标节点</a> //点击在这个元素上 </p>

    </div>

    $("div").on("click","a",function(e) { 

            alert(e.target.textContent)

    })

    选择div标签中的a标签触发事件


3、卸载事件off()方法

    绑定两个事件

    $("elem").on("mousedown mouseup",fn)

    删除一个事件

    $("elem").off("mousedown")

    删除所有事件

    $("elem").off("mousedown mouseup")






文章评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。