例子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. 理解python中的元类

    一,理解类也是对象 在python中类同样也是一种对象,只要使用关键字class,Python解释器在执行的时候就会创建一个对象,这个对象(类)自身拥有创建对象(类实例)的能力,这就是为什么他是一个类 ...

  2. PHPexcle案例

    下面是总结的几个使用方法 include 'PHPExcel.php'; include 'PHPExcel/Writer/Excel2007.php'; //或者include 'PHPExcel/ ...

  3. react-native init安装指定版本的react-native

    C:\Users\ZHONGZHENHUA\imooc_gp\index.js index.js /** @format */ import React,{ Component } from 'rea ...

  4. Python_12-线程编程

    1.1    Python中的线程使用1.1.1 函数式1.2    创建threading.Thread的子类来包装一个线程对象1.2.1 threading.Thread类的使用1.3    线程 ...

  5. 671. Second Minimum Node In a Binary Tree 非递减二叉树中第二小的元素

    ［抄题］: Given a non-empty special binary tree consisting of nodes with the non-negative value, where e ...

  6. Paradox

    克己博伦 当一个无法阻挡的力量,碰到了一个无法移动的物体?如果这个力量移动了物体,那么这个物体就不是无法移动的.如果这个力量没有移动物体,那么这个无法阻挡的力量就被挡了下来. 上帝能造出一个重到他自己 ...

  7. CentOS JAVA安装及查看路径方法

    一.安装: 方法一:手动解压JDK的压缩包,然后设置环境变量 1.在/usr/目录下创建java目录 [root@localhost ~]# mkdir/usr/java[root@localhost ...

  8. Nginx 事件基本处理流程分析

    说明:本文章重点关注事件处理模型.有兴趣的同学可以去http://tengine.taobao.org/book/查找更多资料.Tengine应该是淘宝基于Nginx自己做的修改.这个地址的文档还在不 ...

  9. 常用的 Python 调试工具，Python开发必读-乾颐堂

    以下是我做调试或分析时用过的工具的一个概览.如果你知道有更好的工具,请在评论中留言,可以不用很完整的介绍. 日志 没错,就是日志.再多强调在你的应用里保留足量的日志的重要性也不为过.你应当对重要的内容 ...

  10. Cw210开发板

    达内培训嵌入式开发板 qt + kernel uboot toolchain