例子1

ready() DOM加载完毕

load() 元素加载完毕

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>Document</title>
  6. 	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  7. 	<script type="text/javascript">
  8. 		/*原生写法
  9. 		window.onload = function(){
  10.  
  11. 		}
  12. 		*/
  13.  
  14. 		/*jquery写法
  15. 		上面等同于下面的写法
  16. 		$(window).load(function() {
  17.  
  18. 		});
  19.  
  20. 		*/
  21.  
  22. 		/*
  23. 		ready的写法：
  24. 		$(document).ready(function(){
  25.  
  26. 		})
  27.  
  28. 		*/
  29.  
  30. 		/* ready的简写：
  31. 		$(function(){
  32.  
  33. 		})
  34.  		*/
  35.  
  36.  		// 窗口改变尺寸的时候，会触发事件；比如多次手动拉动浏览器窗口大小，就会触发多次2
  37.  		$(window).resize(function() {
  38.  
  39.  			console.log('2');
  40.  
  41.  		});
  42.  
  43. 	</script>
  44. </head>
  45. <body>
  46. 	<div id="div1"></div>
  47. </body>
  48. </html>

　　

二，bind()

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

绑定和解绑方法如下

  1. $(function(){
  2.     $('#div1').bind('mouseover click', function(event) {
  3.         alert($(this).html());
  4.  
  5.         // $(this).unbind();
  6.         $(this).unbind('mouseover');
  7.  
  8.     });
  9. });

　　

三. 自定义事件

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

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

如下例子

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>自定义事件</title>
  6. 	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  7. 	<script type="text/javascript">
  8. 		$(function(){
  9.  
  10. 			$('#btn').bind('hello',function(){
  11.  
  12. 				alert('hello!');
  13.  
  14. 			});
  15.  
  16. 			$('#btn').bind('click',function(){
  17.  
  18. 				alert('click');
  19.  
  20. 			});
  21.  
  22. 			$('#btn2').click(function() {
  23. 				$('#btn').trigger('hello');
  24. 				$('#btn').trigger('click');
  25. 			});
  26.  
  27. 		})
  28.  
  29. 	</script>
  30. </head>
  31. <body>
  32. 	<input type="button" name="" value="按钮" id="btn">
  33. 	<input type="button" name="" value="按钮2" id="btn2">
  34. </body>
  35. </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. Excel VBA入门（一）数据类型

    与其它的编程语言一样,VBA也有它自己的数据类型.讲到数据类型,就离不开"变量"与"常量"这两个概念,变量与常量,都是用于保存数据的.顾名思义,"变量 ...

  2. EMC存储同时分配空间到两台服务器路径不一致-双机盘符不一致

    以下方式将i盘盘符换成g盘,g盘盘符换成i emcpadm rename -s emcpoweri -t emcpowerj emcpadm rename -s emcpowerg -t emcpow ...

  3. Scala基础：定义变量和逻辑判断语句以及方法和函数

    定义变量和逻辑判断语句 package com.zy.scala import scala.collection.immutable object ScalaDemo { def main(args: ...

  4. schedule与scheduleAtFixedRate之Timer源码分析

    执行Timer任务调度方法有如下几种: 这些方法最后调用的都是这个方法: private void sched(TimerTask task, long time, long period)   这个 ...

  5. ReentrantLock(重入锁)功能详解和应用演示

    目录 1. ReentrantLock简介 2. ReentrantLock和synchronized的相同点 2.1 ReentrantLock是独占锁且可重入的 3. ReentrantLock相 ...

  6. java常用正则校验工具类

    正则常用校验工具类 import java.util.regex.Pattern; /** * @program: * @description: 校验工具类 * @author: xujingyan ...

  7. Hibernate一对多操作

    --------------------siwuxie095 Hibernate 一对多操作 以客户和联系人为例,客户是一,联系人是多 即 一个客户里面有多个联系人,一个联系人只能属于一个客户 注意: ...

  8. centos 命令行和图形桌面模式的切换

    1.安装系统时建议安装图形界面,毕竟图形桌面下安装程序,比较方便 2.系统部署完成后可以切换到命令行界面:打开一个SHELL窗口运行 init 3 即可进入命令行界面.恢复图形用init 5 3.进入 ...

  9. SceneBuilder 打不开 .fxml文件，只在任务栏显示

    mark一下,今天下载官网的SceneBuilder 2.X 最近在使用JavaFX,感觉还是很酷的,可是在正常的编辑关闭SceneBuilder 之后,再次打开却打不开了 可是奇怪的是有些 .fxm ...

  10. 谈谈Vue.js——vue-resource全攻略

    本篇文章主要介绍了谈谈Vue.js——vue-resource全攻略,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧   概述 上一篇我们介绍了如何将$.ajax和Vue. ...