jQuery文档之事件

Posted 2021-04-08 小伍前端

在开发过程中，事件是常用到的；利用原生javascript来写事件比较麻烦，jQuery将原生JavaScript进行了封装，极大的简化了代码，提高了开发的效率。本次继续分享jQuery文档API，以下是对事件API的总结：

一、页面载入

1、ready(fn)：当DOM加载完成时绑定一个要执行的函数。

$(document).ready(function(){
  //在这里写你的代码。
});

二、事件处理

1、on(eve,[sel],[data],fn)：在选择元素上绑定一个或多个事件的事件处理函数。自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。

$("p").on("click",function(){
    alert($(this).text());
});

2、off(eve,[sel],[fn])：移除通过on()方法添加的事件处理程序。自 jQuery 版本 1.7 起，off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品

$("button").click(function(){
    $("p").off("click");
});

3、one(type,[data],fn)：为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。

$("p").one("click",function(){
    $(this).animate({fontSize:"+=6px"});
});

4、trigger(type,data)：触发被选元素上指定的事件以及事件的默认行为(比如表单提交)。与trigglerHandler()方法类似，但trigglerHandler()不触发事件的默认行为。

html:

<button id="old">.trigger( "focus" )</button>
<button id="new">.triggerHandler( "focus" )</button><br><br>
<p>执行 .trigger 后 input 输入框自动获取焦点，触发事件的默认行为，
而 .triggerHandler 仅仅执行了指定的事件浏览器并未执行动作，输入框也没有获取焦点。</p>
<input type="text" value="将获取焦点">

js:

$( "#old" ).click(function() {
    $( "input" ).trigger( "focus" );
});
$( "#new" ).click(function() {
    $( "input" ).triggerHandler( "focus" );
});
$( "input" ).focus(function() {
    $( "<span>获取焦点!</span>" ).appendTo( "body" ).fadeOut( 1000 );
});

三、事件切换

1、hover()：当鼠标指针悬停在被选元素上时要运行的两个函数。该方法触发mouseenter和mouseleave事件

$("td").hover(
    function () {
        $(this).addClass("hover");
    },
    function () {
        $(this).removeClass("hover");
    }
);

四、事件

1、blur()：添加/触发失去焦点事件

html:

输入你的名字: <input type="text">
<p>在输入框写些东西，然后点击输入框外，让其失去焦点。</p>

js:

$(document).ready(function(){
    $("input").blur(function(){
        alert("输入框失去了焦点");
    });
});

2、change()：当元素的值改变时发生change事件(该事件仅适用于文本域（text field），以及 textarea 和 select 元素。当用于 select 元素时，change 事件会在选择某个选项时发生)

$("input[type='text']").change( function() {
    // 这里可以写些验证代码
});

3、click()：单击绑定元素时，发生click事件

$("p").click(function(){
    alert("段落被点击了");
});

4、dbclick()：双击绑定元素时，触发dbclick事件

$("p").click(function(){
    alert("这个段落被双击");
});

5、focus()：当元素获得焦点时(当通过鼠标点击选中元素或通过tab键定位到元素时)，发生focus事件

html:

<input>
<span>请输入你的电话号码?</span>
<p>点击输入框获取焦点。</p>

css:

span{display:none;}

js:

$(document).ready(function(){
    $("input").focus(function(){
        $("span").css("display","inline").fadeOut(2000);
    });
});

6、focusin()：当元素获得焦点时，触发focusin事件。与focus事件区别在与：它可以在父元素上检测子元素获取焦点的情况。

html:

<p><input type="text" /> <span>focusout fire</span></p>
<p><input type="password" /> <span>focusout fire</span></p>     

js:

$("p").focusin(function() {
    $(this).find("span").css('display','inline').fadeOut(1000);
});

7、focusout()：当元素失去焦点时触发focusout事件。focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。

html:

<p><input type="text" /> <span>focusout fire</span></p>
<p><input type="password" /> <span>focusout fire</span></p>

js:

$("p").focusin(function() {
    $(this).find("span").css('display','inline').fadeOut(1000);
});

8、keydown()-键按下的过程。当键盘或按钮被按下时，发生keydown事件

keypress()-键被按下
         keypress事件与keydown事件类似，当按钮被按下时发生该事件
         ALT、CTRL、SHIFT、ESC这些键不会触发keypress事件
keyup()-键被松开
         当键盘键被松开时发生keyup事件
html:

输入你的名字: <input type="text">
<p>在以上输入框中输入你的名字。在按键按下后输入框背景颜色会改变。</p>

js:

$(document).ready(function(){
     $("input").keydown(function(){
        $("input").css("background-color","yellow");
     });
     $("input").keyup(function(){
        $("input").css("background-color","pink");
     });
});

再举一个例子：
html:

输入你的名字: <input type="text">
<p>按键的次数: <span>0</span></p>

js:

var i=0;
$(document).ready(function(){
    $("input").keypress(function(){
        $("span").text(i+=1);
    });
});

9、mousedown()：当鼠标指针移动到元素上方，并按下鼠标左键时，会发生mousedown事件。常与mouseup()事件一起使用。

mouseup()：当鼠标指针移动到元素上方，并松开鼠标左键时，会发生mouseup事件
html:

<div>在这个 div 元素中按下和释放鼠标按钮。</div>

js:

$(document).ready(function(){
    $("div").mouseup(function(){
        $(this).after("<p style='color:green;'>释放鼠标按钮。</p>");
    });
    $("div").mousedown(function(){
        $(this).after("<p style='color:purple;'>按下鼠标按钮。</p>");
    });
});

10、mouseenter()：当鼠标指针穿过(进入)被选元素时，会发生mouseenter事件，常与mouseleave事件一起使用

mouseleave()：当鼠标指针离开被选元素时，会发生mouseleave事件
html：

<p>鼠标移动到该段落。</p>

js:

$(document).ready(function(){
    $("p").mouseenter(function(){
         $("p").css("background-color","yellow");
    });
    $("p").mouseleave(function(){
         $("p").css("background-color","lightgray");
    });
});

11、mouseover()：当鼠标指针位于元素上方时，会发生mouseover事件

mouseout()：当鼠标指针离开被选元素时，会发生mouseout事件
html:

<p>鼠标移动到该段落。</p>

js:

$(document).ready(function(){
    $("p").mouseover(function(){
        $("p").css("background-color","yellow");
    });
    $("p").mouseout(function(){
        $("p").css("background-color","lightgray");
    });
});

注：与mouseover事件不同，mouseenter事件只有在鼠标指针进入被选元素时被触发，mouseover事件在鼠标指针进入任意子元素时也会被触发
html:

<p>mouseover 事件在鼠标移动到选取的元素及其子元素上时触发 。</p>
<p>mouseenter 事件只在鼠标移动到选取的元素上时触发。 </p>
<div class="over" style="background-color:lightgray;padding:20px;width:250px;float:left">
    <h3 style="background-color:white;">Mouseover 事件触发: <span></span></h3>
</div>
<div class="enter" style="background-color:lightgray;padding:20px;width:250px;float:right">
    <h3 style="background-color:white;">Mouseenter 事件触发: <span></span></h3>
</div>

js:

var x=0;
var y=0;
$(document).ready(function(){
    $("div.over").mouseover(function(){
        $(".over span").text(x+=1);
    });
    $("div.enter").mouseenter(function(){
        $(".enter span").text(y+=1);
    });
});

12、mousemove()：当鼠标指针在指定的元素中移动时，就会发生mousemove事件（鼠标每移动一个像素，就会发生一次mousemove事件。处理所有mousemove事件会耗费系统资源，谨慎使用）

html:

<span></span>

js:

$(document).mousemove(function(e){
    $("span").text(e.pageX + ", " + e.pageY);
});

13、resize()：当调整浏览器窗口的大小时，发生resize事件

html：

<p>窗口重置了 <span>0</span> 次大小。</p>
<p>尝试重置窗口大小。</p>

js:

$(document).ready(function(){
    $(window).resize(function(){
        $("span").text(x+=1);
    });
});

14、scroll()：当用户滚动指定的元素时，会发生scroll事件（适用于所有可滚动元素和window对象（浏览器窗口））

$(window).scroll( function() { /* ...do something... */ } );
$("div").scroll(function() {
    $("span").text(x+=1);
});

15、select()：当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件（这个函数会调用执行绑定到select事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。）。

html:

<input type="text" value="www.webqixige.com">
<p>在输入框中选取文本</p>

js:

$(document).ready(function(){
    $("input").select(function(){
        alert("文本已选中!");
    });
});

16、submit()：当提交表单时，会发生submit事件（只适用于表单元素）

$("form:first"),submit();
//阻止表单提交
$("form").submit(function(){
    return false;
});

以上是对jQuery事件API的知识总结，欢迎关注小伍前端！每周两篇，我会分享更多、更有深度的文章。如果你喜欢我写的文章，请给我点个赞吧！小编会更有信心、更有动力去分享。