前端基础-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>

实例

posted @ 2018-06-10 14:42 天王盖地虎宝塔镇河妖阅读(565) 评论(0) 编辑收藏举报

刷新页面返回顶部

明天的希望，让我们忘了今天的痛苦。

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

一、常用事件

1、鼠标事件之click事件

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

3、鼠标事件之hover事件

4、鼠标事件之focusin事件

4、鼠标事件之focusout事件

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

6、表单事件之change事件

7、表单事件之select事件

8、表单事件之submit事件

二、事件绑定

1、on()的多事件绑定

2、on()的高级用法

三、移除事件

1、卸载事件off()方法

四、页面载入

公告