例子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>

　　

jquery事件三 -- load(), ready(), resize()以及bind()事件的更多相关文章

  1. jQuery document window load ready 区别详解

    用过JavaScript的童鞋,应该知道window对象和document对象,也应该听说过load事件和ready事件,小菜当然也知道,而且自认为很了解,直到最近出了问题,才知道事情并不是那么简单. ...

  2. JQuery 在$(window).load() 事件中 不运行 $(window).resize()

    本文转载至: http://stackoverflow.com/questions/2597152/jquery-window-resize-doesnt-work-on-load 原文标题   :J ...

  3. jQuery的三种bind/One/Live/On事件绑定使用方法

    本篇文章介绍了,关于jQuery新的事件绑定机制on()的使用技巧.需要的朋友参考下   今天浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQ ...

  4. 原 jQuery中document的ready和load事件的区别？

    概述: 大家在工作中用jQuery的时候一定会在使用之前这样:   1 2 3 4 5 6 7 8 //document ready $(document).ready(function(){     ...

  5. jQuery中.bind() .live() .delegate() .on()的区别 和 三种方式写光棒事件 动画

    地狱的镰刀 bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数. $("a").bind("click",function(){ ...

  6. 【学习笔记】锋利的jQuery（三）事件和动画

    一.jQuery事件 1,加载事件 $(document).ready(function(){...}) //等同于$(function(){..}) $(window).load(function( ...

  7. JQuery 的Bind()事件

    刚开始我们先看一下它的定义: .bind( eventType [, eventData], handler(eventObject)) .Bind()方法的主要功能是在向它绑定的对象上面提供一些事件 ...

  8. Jquery的点击事件，三句代码完成全选事件

    先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  9. jQuery $(document).ready()和JavaScript onload事件

    jQuery $(document).ready()和JavaScript onload事件 Why we need a right time? 对元素的操作和事件的绑定需要等待一个合适的时机,可以看 ...

随机推荐

  1. CSS隐藏元素 display visibility opacity的区别

    { display: none; /* 不占据空间,无法点击 */ }  { visibility: hidden; /* 占据空间,无法点击 */ }  { position: absolute; ...

  2. iOS开发时间控件怎么强制24小时制(小技巧)

    1)当你的format格式是 NSDateFormatter* dateFormatter = [[[NSDateFormatter alloc] init] autorelease];[dateFo ...

  3. sqlserver三种数据集合运算

    2.1   并集运算(UNION) (1)UNION ALL(不删除重复行) Code: 1 SELECT empID,empName,position,degree 2 FROM Employees ...

  4. ChainOfResponsibilityPattern（23种设计模式之一）

    参考书籍:设计模式-可复用面向对象软件基础(黑皮书) 目的:使多个对象都有机会处理请求,从而避免请求的发送者和接受者之间的耦合关系.将这些对象连成一条链,并沿这条链传递该请求,直到有一个对象处理它为止 ...

  5. Openssl rand命令

    一.简介 rand命令用来产生伪随机字节,随机数字产生器需要一个seed,在没有/dev/srandom系统下的解决方法是自己做一个~/.rnd文件 二.语法 openssl rand [-out f ...

  6. 常用数据库连接池 (DBCP、c3p0、Druid) 配置说明.RP

    1. 引言 1.1 定义 数据库连接是一种关键的有限的昂贵的资源,这一点在多用户的网页应用程序中体现得尤为突出.对数据库连接的管理能显著影响到整个应用程序的伸缩性和健壮性,影响到程序的性能指标.数据库 ...

  7. [GO]方法集

    指针变量的方法集 package main import "fmt" type Person struct { name string sex byte age int } fun ...

  8. centos7部署JavaWeb项目

    centos7部署JavaWeb项目共有三步 1.配置java环境 2.配置tomcat环境. 3.部署JavaWeb项目 一.配置java环境 1.1安装java 参考我的另一篇博文:https:/ ...

  9. 【转载】Redis Sentinel服务配置

    转载地址:http://blog.csdn.net/vtopqx/article/details/49247285 redis官网文档:http://www.redis.cn/topics/senti ...

  10. Thrift辅助类，用于简化Thrift编程

    CThriftServerHelper用于服务端,CThriftClientHelper用于客户端. IDL定义: service PackageManagerService { } 服务端使用示例: ...