jQuery复习总结（三）事件处理详细实例代码+截图调试

最新推荐文章于 2022-02-17 17:12:53 发布

Haris Ha

最新推荐文章于 2022-02-17 17:12:53 发布

阅读量282

点赞数

分类专栏： jQuery 文章标签： jQuery jQuery整理 jQuery全套前端jQuery框架

本文链接：https://blog.csdn.net/weixin_42507756/article/details/84995415

版权

jQuery 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

总概

我们常说响应一词，与事件息息相关

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用

鬼知道这一句话想表达什么，更通俗一点的是“鼠标移到这个段子上了”、“鼠标点了这个按钮”、“键盘按下了组合键”等等触发事件，也就开始调用函数和进行操作了…

在这里插入图片描述
以上是jQuery中常用的事件处理

$(document).ready(function)

$(document).ready() 方法允许我们在文档完全加载完后执行函数，这样确保jQuery将整个Dom树渲染完成，来进行接下来的一系列操作，我们之前的一些例子都是以这样的格式开始的

 <script type="text/javascript">
    $(document).ready(function(){
		//举例
		$('button').on('click',function(){
			});
    })	
 </script>

click() and dblclick()

这是两个很常见常用的方法，俗称“单击”和“双击”
我们在这两个方法里写接下来的逻辑，就等于是当我们单击或双击前面绑定的被选元素后开始触发后面的逻辑发生

<html>
    <head>
        <title>JQuery Event Handlers</title>
    </head>
    <body>
		<div><h1>JQuery Event Handlers</h1></div>
		<div><h3>Click</h3></div>
	    <button id="btn1">Single Click</button>
	    <button id="btn2">Double Click</button>
    </body>
    <script src="../../js/jquery-3.2.1.min.js"></script>

    <script type="text/javascript">
    $("document").ready(function() {
        $('#btn1').on('click', function(event){
            alert('click');
			debugger;
        });
    
        $('#btn2').on('dblclick', function(){
            alert('dblclick');
        });
		});
    
    </script>
    <!-- <script src="/js/jquery-latest.js"></script> -->
</html>

在这里插入图片描述

当单击的时候用了debugger然后我们可以看到它是MouseEvent

mouseover()、mouseout()、mousedown() and mouseup()

我们直接拿一个例子来看，鼠标悬在按钮和移出按钮会将上方的div中的文本分别改为mouseover和mousedown，而当我们按下按钮不松开会在下方显示mousedown，松开的一瞬间分别显示mouseup和click
敲重点 mouseup总发生在click之前，它相当于释放鼠标，它相当于少了按下的过程，而click是一整个过程，通常mouseup和click绑定的事件效果相同，mouseup相当于鼠标点击，它们的差别在这里

<html>
    <head>
        <title>JQuery Event Handlers</title>
    </head>
    <body>
		<div><h3>Mouse</h3></div>
		<div id="result2">waiting for event</div>
		<button id="btn3">Mouse</button>
		<div id="result3">waiting another event</div>
    </body>
    <script src="../../js/jquery-3.2.1.min.js"></script>

    <script type="text/javascript">
    $("document").ready(function() {
        $('#btn3').on('mousedown', function(){
               $('#result3').append('<br/>mousedown');
           });
       
           $('#btn3').on('mouseup', function(){
               $('#result3').append('<br/>mouseup');
           });
       
           $('#btn3').on('click', function(){
               $('#result3').append('<br/>click');
           });
       
           $('#btn3').on('mouseover', function(){
               $('#result2').html('mouseover');
           });
       
           $('#btn3').on('mouseout', function(){
               $('#result2').html('mouseout');
           });
		});
    
    </script>
    <!-- <script src="/js/jquery-latest.js"></script> -->
</html>

在这里插入图片描述

keydown()、keypress() and keyup()

按键按下会触发keydown事件，没插入一个字符便会产生一个keypress，注意和mouseup与click的区别，松开按键keyup

<html>
    <head>
        <title>JQuery Event Handlers</title>
    </head>
    <body>
		
        <div><h3>Key</h3></div>
        <div id="result3">waiting for event</div>
        <input type="text" id="ip2"/>
    </body>
    <script src="../../js/jquery-3.2.1.min.js"></script>

    <script type="text/javascript">
    $("document").ready(function() {
        $('#ip2').on('keydown', function(){
                $('#result3').append('<br/>keydown');
            });
        
            $('#ip2').on('keyup', function(){
                $('#result3').append('<br/>keyup');
            });
        
            $('#ip2').on('keypress', function(){
                $('#result3').append('<br/>keypress');
            });
		});
    
    </script>
    <!-- <script src="/js/jquery-latest.js"></script> -->
</html>

在这里插入图片描述

change() and submit()

当元素的值发生改变时，会发生 change 事件
该事件仅适用于文本域（text field），以及 textarea 和 select 元素
当文本域失去焦点时，即系统认为改写完成后会触发change事件

当提交表单时，会发生 submit 事件，该事件只适用于表单元素

<html>
    <head>
        <title>JQuery Event Handlers</title>
    </head>
    <body>
        <div><h3>Change</h3></div>
        <div id="result4">waiting for event</div>
        <input type="text" id="ip3" value="test"/>
        <div><h3>Submit</h3></div>
        <form id="form1">
			<input type="submit"/>
        </form>
       
    </body>
    <script src="../../js/jquery-3.2.1.min.js"></script>

    <script type="text/javascript">
    $("document").ready(function() {
       $('#ip3').on('change', function(){
               $('#result4').html('changed');
           });
       
           $('#form1').on('submit', function(){
               alert('submit!');
           });
		});
    
    </script>
    <!-- <script src="/js/jquery-latest.js"></script> -->
</html>

在这里插入图片描述

blur() and focus()

当元素获得焦点时，发生 focus 事件
当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点

当元素失去焦点时发生 blur 事件
blur() 函数触发 blur 事件，或者如果设置了 function 参数，该函数也可规定当发生 blur 事件时执行的代码

<html>
    <head>
        <title>JQuery Event Handlers</title>
    </head>
    <body>
        <div><h3>Focus/Blur</h3></div>
        <div id="result1">waiting for event</div>
        <input type="text" id="ip1"/>
    </body>
    <script src="../../js/jquery-3.2.1.min.js"></script>

    <script type="text/javascript">
    $("document").ready(function() {
       $('#ip1').on('focus', function(){
               $('#result1').html('focused');
           });
       
           $('#ip1').on('blur', function(){
               $('#result1').html('blured');
           });
		});
    
    </script>
    <!-- <script src="/js/jquery-latest.js"></script> -->
</html>

在这里插入图片描述

还有一些事件处理用时自查，文档是个好东西

jQuery 参考手册 - 事件

Haris Ha

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery复习总结（三）事件处理详细实例代码+截图调试

总概我们常说响应一词，与事件息息相关事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用鬼知道这一句话想表达什么，更通俗一点的是“鼠标移到这个段子上了”、“鼠标点了这个按钮”、“键盘按下了组合键”等等触发事件，也就开始调用函数和进行操作了…以上是jQuery中常用的事件处理$(document).ready(function)$(...
复制链接

扫一扫