jquery事件三 -- load(), ready(), resize()以及bind()事件
例子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>
努力生活，融于自然
