例子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. java动态规划取硬币问题

    最近一直在研究动态规划的问题.今天遇到了取硬币问题. 其实动态规划还是,我从底部向顶部,依次求出每个状态的最小值,然后就可以标记上. 这道题目就是,假如有1,5,7,10这四种币值的硬币,我取14元, ...

  2. faster-rcnn目录介绍

    data 用来存放pretrained模型,比如imagenet上的,以及读取文件的cache缓存 experiments 存放配置文件以及运行的log文件,另外这个目录下有scripts可以用end ...

  3. CS的项目管理是基于多租户理念设计

    1.创建项目 http://xxx.xxx.xx.xx:8080/client/api?command=createProject&response=json&sessionkey=8 ...

  4. shiro 权限集成Ehcache 配置 学习记录（二）

    1.加入依赖 <dependency> <groupId>org.apache.shiro</groupId> <artifactId>shiro-eh ...

  5. 无需写try/catch，也能正常处理异常

    对于企业应用的开发者来说,异常处理是一件既简单又复杂的事情.说其简单,是因为相关的编程无外乎try/catch/finally+throw而已:说其复杂,是因为我们往往很难按照我们真正需要的策略来处理 ...

  6. Openssl speed命令

    一.简介 speed命令用于测试库的性能 二.语法 openssl speed [md2] [mdc2] [md5] [hmac] [sha1] [sha256] [sha512] [whirlpoo ...

  7. [C++] Pure Virtual Function and Abstract Class

    Pure Virtual Function Abstract Class

  8. JavaScript排序，不只是冒泡

    做编程,排序是个必然的需求.前端也不例外,虽然不多,但是你肯定会遇到. 不过说到排序,最容易想到的就是冒泡排序,选择排序,插入排序了. 冒泡排序 依次比较相邻的两个元素,如果后一个小于前一个,则交换, ...

  9. oracle imp使用

    1. 获取帮助 imp help=y 2. 导入一个完整数据库 imp system/manager file=bible_db log=dible_db full=y ignore=y 3. 导入一 ...

  10. nignx ssl 配置

    1. 找一个目录,例如: usr/local/nginx/ssl ,进入该目录 2.  openssl genrsa -des3 -out server.key 1024  创建自身秘钥 3.  op ...