例子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. 自定义信息丰富的Android Log

    [问题背景] 最近在项目上需要用LOG来查看和定位一些信息,但是系统原生的LOG实在太乱,信息也不太多,比如调用行数,所在方法,所在类名,线程名称都没有. [初步想法] 本着开源的精神,首先去GitH ...

  2. Anaconda3 ubuntu18.04

    luo@luo-All-Series:~/MyFile/Anaconda3$ luo@luo-All-Series:~/MyFile/Anaconda3$ luo@luo-All-Series:~/M ...

  3. linux系统中的单引号和双引号

    一.为什么用quoting 前面说到,命令行在内容上主要由literal(一般文字)和meta(元字符)组成,而meta又由IFS.CR和其他字符组成(如=,$, > 等),通常这些原元字符都有 ...

  4. C++细节理解

    1.为什么static类外初始化不需要static关键字 答:因为类外static变量或函数表示限定在此源文件中才能使用,而类中的static变量或函数表示由本类及其所有对象共享,如果在类外初始化或定 ...

  5. C语言cJSON库的使用，解析json数据格式

    C语言cJSON库的使用,解析json数据格式 摘自:https://www.cnblogs.com/piaoyang/p/9274925.html 对于c语言来说是没有字典这样的结构的,所以对于解析 ...

  6. 常用工具类——StringUtils

    /* * Licensed to the Apache Software Foundation (ASF) under one or more * contributor license agreem ...

  7. 七）oracle 2 mysql

    /* Navicat MySQL Data Transfer Source Server : localhost Source Server Version : 50527 Source Host : ...

  8. Android 控件在布局中按比例放置[转]

    转自:http://netsky1990.blog.51cto.com/2220666/997452       在Android开发中常用到线性布局LinearLayout对界面进行具体的创建,其中 ...

  9. 自己（转）String、StringBuffer与StringBuilder之间区别

    String.StringBuffer与StringBuilder之间区别   最近学习到StringBuffer,心中有好些疑问,搜索了一些关于String,StringBuffer,StringB ...

  10. 关于Markdown格式转PDF格式

    Markdown转PDF格式 个人使用的Markdown编辑平台:有道云笔记网页版 当我们编辑好自己的随笔以后,在网页的[客户端下载]下面有一个[更多]的圆形图标选项,点击后在菜单中有一处[打印]选项 ...