前端基础-jQuery的事件的用法

阅读目录

常用事件
事件绑定
移除事件
页面载入

一、常用事件

1、鼠标事件之click事件

用交互操作中，最简单直接的操作就是点击操作。jQuery提供了两个方法一个是click方法用于监听用户单击操作，另一个方法是dbclick方法用于监听用户双击操作。

这两个方法的用法是类似的，下面以click()事件为例

使用上非常简单：

方法一：$ele.click()

绑定$ele元素，不带任何参数一般是用来指定触发一个事件，用的比较少

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

$("ele").click(function(){

    alert('触发指定事件')

})

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

     $("ele").click()  //手动指定触发事件

});

方法二：$ele.click( handler(eventObject) )

绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数，这样可以针对事件的反馈做很多操作了，方法中的this是指向了绑定事件的元素

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

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

    //this指向 div元素

});

方法三：$ele.click( [eventData ], handler(eventObject) )

使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题

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

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

    //this指向 div元素

    //e.data  => 11111 传递数据

});

2、键盘事件之keydown()与keyup()事件

鼠标有mousedown,mouseup之类的事件，这是根据人的手势动作分解的2个触发行为。相对应的键盘也有这类事件，将用户行为分解成2个动作，

键盘按下与松手，针对这样的2种动作，jQuery分别提供了对应keydown与keyup方法来监听

keydown事件：

当用户在一个元素上第一次按下键盘上字母键的时候，就会触发它。使用上非常简单，与基本事件参数处理保持一致，这里使用不在重复了，列出使用的方法

//直接绑定事件

$elem.keydown( handler(eventObject) )

//传递参数

$elem.keydown( [eventData ], handler(eventObject) )

//手动触发已绑定的事件

$elem.keydown()

keyup事件：

当用户在一个元素上第一次松手键盘上的键的时候，就会触发它。使用方法与keydown是一致的只是触发的条件是方法的

注意：

keydown是在键盘按下就会触发
keyup是在键盘松手就会触发
理论上它可以绑定到任何元素，但keydown/keyup事件只是发送到具有焦点的元素上，不同的浏览器中，可获得焦点的元素略有不同，
但是表单元素总是能获取焦点，所以对于此事件类型表单元素是最合适的。

<h2>keydown()与keyup()事件</h2>

    <div class="left">

        <h4>测试一</h4>

        <div class="aaron">监听keydown输入:

            <input class="target1" type="text" value="" /><br />

            按下显示输入的值:<em></em>

        </div>

        <h4>测试二</h4>

        <div class="aaron">监听keyup输入:

            <input class="target2" type="text" value="" /><br />

            松手显示输入的值:<em></em>

        </div>

    </div>

    <script type="text/javascript">

    //监听键盘按键

    //获取输入的值

    $('.target1').keydown(function(e) {

        $("em:first").text(e.target.value)

    });

    //监听键盘按键

    //获取输入的值

    $('.target2').keyup(function(e) {

        $("em:last").text(e.target.value)

    });

    </script>

实例

3、鼠标事件之hover事件

jQuery直接提供了一个hover方法，可以便捷处理。只需要在hover方法中传递2个回调函数就可以了，不需要显示的绑定2个事件

$(selector).hover(handlerIn, handlerOut)

handlerIn(eventObject)：当鼠标指针进入元素时触发执行的事件函数
handlerOut(eventObject)：当鼠标指针离开元素时触发执行的事件函数

!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="x-ua-compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>hover示例</title>

  <style>

    * {

      margin: 0;

      padding: 0;

    }

    .nav {

      height: 40px;

      width: 100%;

      background-color: #3d3d3d;

      position: fixed;

      top: 0;

    }

    .nav ul {

      list-style-type: none;

      line-height: 40px;

    }

    .nav li {

      float: left;

      padding: 0 10px;

      color: #999999;

      position: relative;

    }

    .nav li:hover {

      background-color: #0f0f0f;

      color: white;

    }

    .clearfix:after {

      content: "";

      display: block;

      clear: both;

    }

    .son {

      position: absolute;

      top: 40px;

      right: 0;

      height: 50px;

      width: 100px;

      background-color: #00a9ff;

      display: none;

    }

    .hover .son {

      display: block;

    }

  </style>

</head>

<body>

<div class="nav">

  <ul class="clearfix">

    <li>登录</li>

    <li>注册</li>

    <li>购物车

      <p class="son hide">

        空空如也...

      </p>

    </li>

  </ul>

</div>

<script src="jquery-3.3.1.min.js"></script>

<script>

$(".nav li").hover(

  function () {

    $(this).addClass("hover");

  },

  function () {

    $(this).removeClass("hover");

  }

);

</script>

</body>

</html>

实例

4、鼠标事件之focusin事件

当一个元素，或者其内部任何一个元素获得焦点的时候，例如：input元素，用户在点击聚焦的时候，

如果开发者需要捕获这个动作的时候，jQuery提供了一个focusin事件

使用上非常简单：

方法一：$ele.focusin()

绑定$ele元素，不带任何参数一般是用来指定触发一个事件，一般用的比较少

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

$("ele").focusin(function(){

    alert('触发指定事件')

});

方法二：$ele.focusin( handler )

绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数

这样可以针对事件的反馈做很多操作了

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

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

    //this指向 div元素

});

方法三：$ele.focusin( [eventData ], handler )

使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题

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

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

    //this指向 div元素

    //e.data  => 11111 传递数据

});

 <h2>.focusin()方法</h2>

    <div class="left">

        <div class="aaron">

            点击聚焦：<input type="text" />

        </div>

    </div>

    <div class="right">

        <div class="aaron1">

            点击聚焦并传递参数：<input type="text" />

        </div>

    </div>

    <script type="text/javascript">

        //input聚焦

        //给input元素增加一个边框

        $("input:first").focusin(function() {

             $(this).css('border','2px solid red')

        })

    </script>

    <script type="text/javascript">

        //不同函数传递数据

        function fn(e) {

             $(this).val(e.data)

        }

        function a() {

            $("input:last").focusin('网', fn)

        }

        a();

    </script>

实例

4、鼠标事件之focusout事件

当一个元素，或者其内部任何一个元素失去焦点的时候，比如input元素，用户在点击失去焦的时候，如果开发者需要捕获这个动作，

jQuery提供了一个focusout事件

使用上非常简单：

方法一：$ele.focusout()

绑定$ele元素，不带任何参数一般是用来指定触发一个事件，可能一般用的比较少

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

$("ele").focusout(function(){

    alert('触发指定事件')

});

方法二：$ele.focusout( handler )

绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数

这样可以针对事件的反馈做很多操作了

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

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

    //this指向 div元素

});

方法三：$ele.focusout( [eventData ], handler )

使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题

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

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

    //this指向 div元素

    //e.data  => 11111 传递数据

});

 <h2>.focusout()方法</h2>

    <div class="left">

        <div class="aaron">

            点击触发失去焦点：<input type="text" />

        </div>

    </div>

    <div class="right">

        <div class="aaron1">

            点击触发失去焦点并传递参数：<input type="text" />

        </div>

    </div>

    <script type="text/javascript">

        //input失去焦点

        //给input元素增加一个边框

        $("input:first").focusout(function() {

             $(this).css('border','2px solid red')

        })

    </script>

    <script type="text/javascript">

        //不同函数传递数据

        function fn(e) {

             $(this).val(e.data)

        }

        function a() {

            $("input:last").focusout('网', fn)

        }

        a();

    </script>

实例

5、表单事件之blur与focus事件

我们学过了表单处理事件focusin事件与focusout事件，同样用于处理表单焦点的事件还有blur与focus事件

6、表单事件之change事件

<input>元素，<textarea>和<select>元素的值都是可以发生改变的，开发者可以通过change事件去监听这些改变的动作

input元素

监听value值的变化，当有改变时，失去焦点后触发change事件。对于单选按钮和复选框，当用户用鼠标做出选择时，该事件立即触发。

select元素

对于下拉选择框，当用户用鼠标作出选择时，该事件立即触发

textarea元素

多行文本输入框，当有改变时，失去焦点后触发change事件

change事件很简单，无非就是注意下触发的先后行为

<h2>input、textarea与select</h2>

    <div class="left">

        <div class="aaron">input：

            <input class="target1" type="text" value="监听input的改变" />

        </div>

        <div class="aaron1">select：

            <select class="target2">

                <option value="option1" selected="selected">Option 1</option>

                <option value="option2">Option 2</option>

            </select>

        </div>

        <div class="aaron3">textarea：

            <textarea class="target2" rows="3" cols="20">多行的文本输入控件</textarea>

        </div>

    </div>

    输出结果：

    <div id="result"></div>

    <script type="text/javascript">

    //监听input值的改变

    $('.target1').change(function(e) {

        $("#result").html(e.target.value)

    });

    //监听select：

    $(".target2").change(function(e) {

        $("#result").html(e.target.value)

    })

     //监听textarea：

    $(".target3").change(function(e) {

        $("#result").html(e.target.value)

    })

    </script>

实例

7、表单事件之select事件

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

select事件只能用于<input>元素与<textarea>元素

使用上非常简单：

方法一：.select()

触发元素的select事件:

$("input").select();

方法二：$ele.select( handler(eventObject) )

绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数

这样可以针对事件的反馈做很多操作了

<input id="test" value="文字选中"></input>

$("#test").select(function() { //响应文字选中回调

    //this指向 input元素

});

方法三：$ele.select( [eventData ], handler(eventObject) )

使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题

<input id="test" value="文字选中"></input>

$("#test").select(11111,function(e) {//响应文字选中回调

    //this指向 div元素

   //e.data  => 11111 传递数据

});

<h2>input与textarea</h2>

    <div class="left">

        <h4>测试一</h4>

        <div class="aaron">

            选中文字：input

            <input type="text" value="多多帅" />

        </div>

        <button id="bt1">触发input元素的select事件</button>

        <h4>测试二</h4>

        <div class="aaron">

            textarea：

            <textarea rows="3" cols="20">用鼠标选中文字</textarea>

        </div>

    </div>

    <script type="text/javascript">

    //监听input元素中value的选中

    //触发元素的select事件

    $("input").select(function(e){

        alert(e.target.value)

    })

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

        $("input").select();

    })

    //监听textarea元素中value的选中

    $('textarea').select(function(e) {

        alert(e.target.value);

    });

    </script>

实例

8、表单事件之submit事件

提交表单是一个最常见的业务需求，比如用户注册，一些信息的输入都是需要表单的提交。同样的有时候开发者需要在表单提交的时候过滤一些的数据、

做一些必要的操作（例如：验证表单输入的正确性，如果错误就阻止提交，从新输入）此时可以通过submit事件，监听下提交表单的这个动作

使用上非常简单，与基本事件参数处理保持一致

方法一：$ele.submit()

绑定$ele元素，不带任何参数一般是用来指定触发一个事件，用的比较少

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

$("ele").submit(function(){

    alert('触发指定事件')

})

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

     $("ele").submit()  //指定触发事件

});

方法二：$ele.submit( handler(eventObject) )

绑定$ele元素，每次$ele元素触发点击操作会执行回调 handler函数

这样可以针对事件的反馈做很多操作了

<form id="target" action="destination.html">

  <input type="submit" value="Go" />

</form>

$("#target").submit(function() { //绑定提交表单触发

    //this指向 from元素

});

方法三：$ele.submit( [eventData ], handler(eventObject) )

使用与方法二一致，不过可以接受一个数据参数，这样的处理是为了解决不同作用域下数据传递的问题

<form id="target" action="destination.html">

  <input type="submit" value="Go" />

</form>

$("#target").submit(11111,function(data) { //绑定提交表单触发

    //data => 1111 //传递的data数据

});

通过在<form>元素上绑定submit事件，开发者可以监听到用户的提交表单的的行为

具体能触发submit事件的行为：

<input type="submit">
<input type="image">
<button type="submit">
当某些表单元素获取焦点时，敲击Enter（回车键）

上述这些操作下，都可以截获submit事件。

这里需要特别注意：

form元素是有默认提交表单的行为，如果通过submit处理的话，需要禁止浏览器的这个默认行为

传统的方式是调用事件对象  e.preventDefault() 来处理， jQuery中可以直接在函数中最后结尾return false即可

jQuery处理如下：

$("#target").submit(function(data) {

   return false; //阻止默认行为，提交表单

});

  <h2>submit</h2>

    <div class="left">

        <div class="aaron">

            <form id="target1" action="test.html">

                回车键或者点击提交表单：

                <input type="text" value="输入新的值" />

                <input type="submit" value="Go" />

            </form>

        </div>

        <div class="aaron">

            <form id="target2" action="destination.html">

                回车键或者点击提交表单,禁止浏览器默认跳转：

                <input type="text" value="输入新的值" />

                <input type="submit" value="Go" />

            </form>

        </div>

    </div>

    <script type="text/javascript">

    //回车键或者点击提交表单

    $('#target1').submit(function(e) {

        alert('捕获提交表达动作,不阻止页面跳转')

    });

    //回车键或者点击提交表单,禁止浏览器默认跳转：

    $('#target2').submit(function() {

        alert('捕获提交表达动作,阻止页面跳转')

        return false;

    });

    </script>

实例

二、事件绑定

1、on()的多事件绑定

之前学的鼠标事件，表单事件与键盘事件都有个特点，就是直接给元素绑定一个处理函数，所有这类事件都是属于快捷处理。

翻开源码其实可以看到，所有的快捷事件在底层的处理都是通过一个"on"方法来实现的。jQuery on()方法是官方推荐的绑定事件的一个方法。

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

events：事件
selector: 选择器（可选的）
function: 事件处理函数

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

$("#elem").click(function(){})  //快捷方式

$("#elem").on('click',function(){}) //on方式

最大的不同点就是on是可以自定义事件名，当然不仅仅只是如何，继续往下看

多个事件绑定同一个函数

 $("#elem").on("mouseover mouseout",function(){ });

通过空格分离，传递不同的事件名，可以同时绑定多个事件

多个事件绑定不同函数

$("#elem").on({

    mouseover:function(){},

    mouseout:function(){}

});

通过空格分离，传递不同的事件名，可以同时绑定多个事件，每一个事件执行自己的回调方法

将数据传递到处理程序

function greet( event ) {

  alert( "Hello " + event.data.name ); //Hello 天王盖地虎

}

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

  name: "天王盖地虎"

}, greet );

可以通过第二参数（对象），当一个事件被触发时，要传递给事件处理函数的

  <h2>on绑定多事件</h2>

    <h4>测试一</h4>

    <div class="left">

        点击触发：on('click',fn)

        <div id="test1"></div>

    </div>

    <script type="text/javascript">

    //事件绑定一

    $("#test1").on('click', function(e) {

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

    })

    </script>

    <h4>测试二</h4>

    <div class="left">

        点击触发：on('mousedown mouseup')

        <div id="test2"></div>

    </div>

    <script type="text/javascript">

    //多事件绑定一

    $("#test2").on('mousedown mouseup', function(e) {

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

    })

    </script>

    <h4>测试三</h4>

    <div class="right">

        点击触发：on(mousedown:fn1,mouseup:fn2)

        <div id="test3"></div>

    </div>

    <script type="text/javascript">

    //多事件绑定二

    $("#test3").on({

        mousedown: function(e) {

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

        },

        mouseup: function(e) {

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

        }

    })

    </script>

实例

2、on()的高级用法

针对自己处理机制中，不仅有on方法，还有根据on演变出来的live方法(1.7后去掉了)，delegate方法等等。

这些方法的底层实现部分还是on方法，这是利用了on的另一个事件机制委托的机制衍变而来的

委托机制

.on( events ,[ selector ] ,[ data ], handler(eventObject) )

在on的第二参数中提供了一个selector选择器，简单的来描述下

//参考下面3层结构

<div class="left">

    <p class="aaron">

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

    </p>

</div>

//给出如下代码：

$("div").on("click","p",fn)

事件绑定在最上层div元素上，当用户触发在a元素上，事件将往上冒泡，一直会冒泡在div元素上。如果提供了第二参数，

那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数

<h2>on事件委托</h2>

    <div class="left">

        <a>钱多多</a>

        <div class="aaron">

            <a>111</a>

            <a>点击这里</a>

        </div>

    </div>

    <script type="text/javascript">

    //给body绑定一个click事件

    //没有直接a元素绑定点击事件

    //通过委托机制，点击a元素的时候，事件触发

    $('body').on('click', 'a', function(e) {

       alert(e.target.textContent)

    })

    </script>

实例

三、移除事件

1、卸载事件off()方法

通过.on()绑定的事件处理程序
通过off() 方法移除该绑定

根据on绑定事件的一些特性，off方法也可以通过相应的传递组合的事件名，名字空间，选择器或处理函数来移除绑定在元素上指定的事件处理函数。

当有多个过滤参数时，只有与这些参数完全匹配的事件处理函数才会被移除

绑定2个事件

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

删除一个事件

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

删除所有事件

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

快捷方式删除所有事件，这里不需要传递事件名了，节点上绑定的所有事件讲全部销毁

<h2>删除事件</h2>

    <h4>测试一</h4>

    <div class="left">

        on('mousedown mouseup')

        <div class="aaron">点击触发</div>

    </div>

    <button>点击删除mousedown事件</button>

    <script type="text/javascript">

    var n  = 0;

    //绑定事件

    $(".aaron:first").on('mousedown mouseup', function(e) {

        $(this).text( '触发类型:' +  (e.type) + ",次数" + ++n)

        ++n;

    })

    //删除事件

    $("button:first").click(function() {

        $(".aaron:first").off('mousedown')

    })

    </script>

    <h4>测试一</h4>

    <div class="left">

        on('mousedown mouseup')

        <div class="aaron">点击触发</div>

    </div>

    <button>点击销毁所有事件off</button>

    <script type="text/javascript">

    var n  = 0;

    //绑定事件

    $(".aaron:last").on('mousedown mouseup', function(e) {

        $(this).text( '触发类型:' +  (e.type) + ",次数" + ++n)

        ++n;

    })

    //删除事件

    $("button:last").click(function() {

        $(".aaron:last").off()

    })

    </script>

实例

四、页面载入

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

两种写法：

$(document).ready(function(){

// 在这里写你的JS代码...

})

简写：

$(function(){

// 你在这里写你的代码

})

文档加载完绑定事件，并且阻止默认事件发生：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="x-ua-compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>登录注册示例</title>

  <style>

    .error {

      color: red;

    }

  </style>

</head>

<body>

<form id="myForm">

  <label for="name">姓名</label>

  <input type="text" id="name">

  <span class="error"></span>

  <label for="passwd">密码</label>

  <input type="password" id="passwd">

  <span class="error"></span>

  <input type="submit" id="modal-submit" value="登录">

</form>

<script src="jquery-3.2.1.min.js"></script>

<script src="s7validate.js"></script>

<script>

  function myValidation() {

    // 多次用到的jQuery对象存储到一个变量，避免重复查询文档树

    var $myForm = $("#myForm");

    $myForm.find(":submit").on("click", function () {

      // 定义一个标志位，记录表单填写是否正常

      var flag = true;

      $myForm.find(":text, :password").each(function () {

        var val = $(this).val();

        if (val.length <= 0 ){

          var labelName = $(this).prev("label").text();

          $(this).next("span").text(labelName + "不能为空");

          flag = false;

        }

      });

      // 表单填写有误就会返回false，阻止submit按钮默认的提交表单事件

      return flag;

    });

    // input输入框获取焦点后移除之前的错误提示信息

    $myForm.find("input[type!='submit']").on("focus", function () {

      $(this).next(".error").text("");

    })

  }

  // 文档树就绪后执行

  $(document).ready(function () {

    myValidation();

  });

</script>

</body>

</html>

实例