jquery事件三 -- load(), ready(), resize()以及bind()事件

最新推荐文章于 2024-04-07 10:27:45 发布

weixin_30840253

最新推荐文章于 2024-04-07 10:27:45 发布

阅读量296

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/regit/p/9003744.html

本文详细介绍了jQuery中的事件处理机制，包括DOM加载完成事件ready()、元素加载完成事件load()、窗口尺寸变化事件resize()的使用方法。同时深入探讨了bind()方法绑定多个事件的功能，并给出了自定义事件的具体实现案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

例子1

ready() DOM加载完毕

load() 元素加载完毕

resize() 浏览器窗口的大小发生变化

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		/*原生写法
		window.onload = function(){

		}
		*/


		/*jquery写法
		上面等同于下面的写法
		$(window).load(function() {
			
		});

		*/


		/*
		ready的写法：
		$(document).ready(function(){

		})

		*/

		/* ready的简写：
		$(function(){

		})
 		*/

 		// 窗口改变尺寸的时候，会触发事件；比如多次手动拉动浏览器窗口大小，就会触发多次2
 		$(window).resize(function() {
 			
 			console.log('2');

 		});


	</script>
</head>
<body>
	<div id="div1"></div>
</body>
</html>

二，bind()

使用bind()可以绑定多个事件，比如bind('click' mouseover', function(){...}，其中有2个参数，第一个参数表示事件，多个事件用空格隔开，比如这里点击和鼠标经过都会触发事件；后面的参数是一个匿名函数，写入触发的事件。

绑定和解绑方法如下

$(function(){
    $('#div1').bind('mouseover click', function(event) {
        alert($(this).html());

        // $(this).unbind();
        $(this).unbind('mouseover');

    });
});

三. 自定义事件

主动触发：可使用jquery对象上的trigger方法来触发对象上绑定的事件。

自定义事件：除了系统事件外，可通过bind方法自定义事件，然后用trigger方法来触发这写事件

如下例子

再第一个按钮上绑定了2个事件，一个是自定义的hello事件，一个是系统事件click；在第二个按钮上点击后，分别触发这两个事件。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>自定义事件</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){

			

			$('#btn').bind('hello',function(){
				
				alert('hello!');

			});


			$('#btn').bind('click',function(){
				
				alert('click');

			});




			$('#btn2').click(function() {
				$('#btn').trigger('hello');
				$('#btn').trigger('click');
			});



		})



	</script>
</head>
<body>
	<input type="button" name="" value="按钮" id="btn">
	<input type="button" name="" value="按钮2" id="btn2">
</body>
</html>

转载于:https://www.cnblogs.com/regit/p/9003744.html