详述jQuery事件

最新推荐文章于 2021-04-28 18:59:03 发布

肥胖的企鹅

最新推荐文章于 2021-04-28 18:59:03 发布

阅读量127

点赞数

分类专栏： JavaScript 文章标签： JavaScript jQuery

本文链接：https://blog.csdn.net/weixin_43457668/article/details/103001639

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一、使用bind()方法绑定事件

作用：为每个匹配元素的特定事件绑定对应的事件处理函数

格式：bind(type,[data],fn)

其中type表示事件类型，data表示传递给绑定函数的额外数据对象，fn表示绑定的函数

例子：

<!DOCTYPE html>
<html>
    <head>
	<meta charset="utf-8" />
	<title>bind(type,[data],fn)</title>
	<script src="js/jquery-3.3.1.js"></script>
	<script>
	    $(function() {
	        $(window).bind('keydown', function(event) {
	            var key = event.which;
	            if(key == 13) {
		        console.log("Enter键");//按enter键输出“Enter键”
	            }
	        });
	    });
	</script>
    </head>
    <body>
    </body>
</html>

*使用unbind()方法解除绑定

<!DOCTYPE html>
<html>
    <head>
	<meta charset="utf-8" />
	<title>bind(type,[data],fn)</title>
	<script src="js/jquery-3.3.1.js"></script>
    </head>
    <body>
        <input type="button" value="按钮" />
	<script>
	    $("[type='button']").bind("click",function(){
	        console.log("点击了按钮")
	    })
	    $("[type='button']").unbind("click");//解除了绑定，不会在控制台输出文本内容
	</script>
    </body>
</html>

二、使用one()方法绑定只能触发一次的事件

作用：one()方法可以为元素绑定处理函数，当处理函数触发一次后, 立即被删除，即在每个对象上, 事件处理函数只会被执行一次。

格式：one(type,[data],fn)

例子：

<!DOCTYPE html>
<html>
    <head>
	<meta charset="utf-8" />
	<title></title>
	<script src="js/jquery-3.3.1.js"></script>
    </head>
    <body>
        <input type="button" value="注册" />
	<script>
	    $("[type='button']").one("click",function(){
	        console.log("数据已提交")
	    })
	</script>
    </body>
</html>

使用one()方法绑定事件，则只能触发一次，防止某些情景下用户重复提交数据或表单，常用于注册。

三、使用trigger()/submit()方法实现提交表单

1、trigger()方法

作用：自动触发每一个匹配元素上某类事件，type表示一个或多个事件类型， data表示传入函数的数据。

格式：trigger(type,[data])

例子：

<!DOCTYPE html>
<html>
    <head>
	<meta charset="utf-8" />
	<title></title>
	<script src="js/jquery-3.3.1.js"></script>
    </head>
    <body>
        <form id="search" >
	    <input />
	</form>
	<script>
	    $("#search").trigger("submit");
	</script>
    </body>
</html>

2、submit()方法

例子：

<!DOCTYPE html>
<html>
    <head>
	<meta charset="utf-8" />
	<title></title>
	<script src="js/jquery-3.3.1.js"></script>
    </head>
    <body>
        <form id="search" >
	    <input />
	</form>
	<script>
	    $("#search").submit();
	</script>
    </body>
</html>

四、总结四种常用事件

1、change()

作用：文本框、密码框和文本域的值发生改变时或下拉列表选项发生变化时触发change 事件。

<!DOCTYPE html>
<html>
    <head>
	<meta charset="utf-8" />
	<title></title>
	<script src="js/jquery-3.3.1.js"></script>
    </head>
    <body>
        <form id="search" >
	    <input type="text" />
	</form>
	<script>
	    $("#search").onchange(function(){
                console.log("检测到文本输入！");
            });
	</script>
    </body>
</html>

2、click()

作用：鼠标点击匹配元素时触发click事件。

<!DOCTYPE html>
<html>
    <head>
	<meta charset="utf-8" />
	<title></title>
	<script src="js/jquery-3.3.1.js"></script>
    </head>
    <body>
        <form id="search" >
	    <input id="search_btn" type="button" value="搜索一下" />
	</form>
	<script>
	    $("#search").click(function(){
                $("#search").submit();
            });
	</script>
    </body>
</html>

3、keydown()

作用：当键盘或按钮被按下时触发keydown事件。

<!DOCTYPE html>
<html>
    <head>
	<meta charset="utf-8" />
	<title></title>
	<script src="js/jquery-3.3.1.js"></script>
    </head>
    <body>
        <form id="search" action="http://www.baidu.com/s" >
	    <input type="hidden" name="wd" value="天气" />
	</form>
	<script>
	    $(window).keydown(function(){//检测到enter键就提交表单
		if(event.keyCode==13){
		    $("#search").trigger("submit");//触发器
		}
	    });
	</script>
    </body>
</html>

4、submit()

在上面“三、使用trigger()/submit()方法实现提交表单”已经介绍过，此处不再赘述。

五、事件冒泡

介绍：事件会按照 DOM 层次结构像水泡一样不断向上直至顶端；事件处理函数中返回 false, 会对事件停止冒泡，还可以停止元素的默认行为。

用法举例：

<!DOCTYPE html>
<html>
    <head>
	<meta charset="utf-8" />
	<title></title>
	<script src="js/jquery-3.3.1.js"></script>
    </head>
    <body>
	<!--超链接失效，点击无法跳转-->
	<a href="http://www.baidu.com" onclick="return test();">百度</a>
	<script>
	    function test(){
		console.log("点击了...");
		return false;
	    }
	</script>
    </body>
</html>

在上面这个例子中，通过向onclick事件返回“false”值可以实现“停止冒泡”，停止元素默认行为（a标签跳转页面）。

这个例子证明了DOM结构是像水泡一样逐个执行。

肥胖的企鹅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
详述jQuery事件

一、使用bind()方法绑定事件作用：为每个匹配元素的特定事件绑定对应的事件处理函数格式：bind(type,[data],fn)其中type表示事件类型，data表示传递给绑定函数的额外数据对象，fn表示绑定的函数例子：<!DOCTYPE html><html> <head> <meta charset="utf-8"...
复制链接

扫一扫

专栏目录