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>

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM