zoukankan      html  css  js  c++  java
  • 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>
    

      

  • 相关阅读:
    Git:创建远程仓库并推送内容到远程库
    Git中ssh的使用
    Git中的文件上传、修改、撤消修改和删除
    Git的安装和创建版本库
    HTML相关知识点总结
    Android开发--TableLayout的应用
    Java中sql语句的引号问题
    NXOPEN环境配置
    shell小技巧
    查询MySQL锁等待的语句
  • 原文地址:https://www.cnblogs.com/regit/p/9003744.html
Copyright © 2011-2022 走看看