收藏私塾在线
 

欢迎您来到私塾在线网!   

请登录! 

免费注册 

交流首页 » Web前端技术 »jquery 事件机制  提现最快的斗地主游戏
发表人 内容
bweer
[头像]

交流经验:
总积分:375
级别:普通会员
注册时间: 2011-11-08
文章: 7
离线

本文地址:http://www.panxinet.com/forum/posts/list/472.html
文章摘要:jquery 事件机制 ,矫国革俗创富煮鹤烧琴,出乎意料休斯顿卡斯塔。

在介绍方法之前,我觉得有必要描述一下响应事件的两种策略,一种是事件捕获(Event capturing),一种是事件冒泡(Event bubble),这两种策略是相对立的,它们是在浏览器大战中分别由Netscape和微软提出的完全相反的两种事件传播模型。

事件冒泡定义为在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层。

而事件捕获则与事件冒泡则恰好相反,处理事件是从对象的最外层往里传播,直到终止。W3C标注是支持两种事件处理策略的,但是却更偏向于事件冒泡,因为事件捕获Bug较多,目前IE是不支持事件捕获的,其他浏览器基本两种都支持。下面我给一个事件冒泡的例子,自己试一下就明白了,至于事件捕获就算了.....

 

1、事件冒泡

 

js代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.panxinet.com/074/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.panxinet.com/296/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>JavaScript事件冒泡</title> 
<style type="text/css"> 
#box {width:200px; height:100px; border:2px solid red} 
#box h5 {margin:0; padding:2px 5px; font-size:18px; text-align:right; background:red; cursor:move} 
#box h5 a {text-decoration:none; color:#FFF} 
#box div{ white-space:inherit;}
</style> 
</head> 
<body> 
<div id="box"> 
<h5 onmousedown="startDrag();"><a onmousedown="closeBox();" href="javascript:void(0);">关闭</a></h5> 
<div id="testInfo"></div> 
</div> 
<script type="text/javascript">
    function startDrag() {
        document.getElementById('testInfo').innerHTML += '层事件';
    }
    function closeBox(e) {
        document.getElementById('testInfo').innerHTML += '关闭事件';
        //将下面一段注释去掉则可以阻止冒泡
//        if (e && e.stopPropagation)
//            e.stopPropagation();
//        else
//            window.event.cancelBubble = true;
    }
</script> 
</body> 
</html> 

 

那么在JQuery中阻止事件策略的方法有event.preventDefault();(阻止默认行为)、event.stopPropagation();event.stopImmediatePropagation();(阻止事件冒泡)、直接返回return false;(阻止默认行为和时间冒泡)。

事件处理包括bind(type,[data],fn)、bind(map)、one(type,[data],fn)、trigger(type,[data])、triggerHandler(type,[data])、unbind([type],[data])这几个方法。

1、bind(type,[data],fn)用于为指定元素绑定指定的事件处理函数,提现最快的斗地主游戏:[data]代表可选的传递的参数,它的写法为:

 

js代码:
     //带参数的绑定方式
        $("#text").bind('click', { result: "yes" }, function(event) {
            alert(event.data.result);
        })
        //不带参数并且阻止冒泡
        $("#text").bind('click', function(e) {
            //自定义处理行为
            e.stopPropagation();
        })

其实bind(type,[data],fn)这种绑定事件的方式我们还有一种简写的方式,但是他们的区别在于简写方式不能如bind一样指定参数[data],他的写法就是直接将bind中type参数执行,如下:

 

js代码:
 $("#text").click(function(e) {
      //自定义处理行为
     alert("简写方式");
 })

 

2、bind(map)就是一次性为元素绑定多个事件处理函数,写法如下:

 

js代码:
    $('#text').bind({
            click: function() {
                alert("bind(map)绑定的click事件");
            },
            mouseenter: function() {
                alert("bind(map)绑定的mouseenter事件");
            }
        });

 

3、one(type,[data],fn)指定事件只执行一次,写法与bind()方法一样,在此就不做示范。

   4、trigger(type,[data])、triggerHandler(type,[data])其实作用是一样的,都是在每一个匹配的元素上触发某类事件,唯一的区别就是前者是执行事件冒泡事件的,而后者只执行指定元素的事件。下面做个比较:


js代码:
//HTML代码:
<button id="trigger">trigger()</button>
<button id="triggerHandler">triggerHandler()</button><br/><br/>
<div id="triggerdiv">
    <div id="tri"></div>
</div>
//JQuery代码
       $("#triggerdiv").click(function() {
            alert("DIV触发");
        });
        $("#trigger").click(function() {
            $("#tri").trigger("click");
        });
        $("#triggerHandler").click(function() {
            $("#tri").triggerHandler("click");
        });
        $("#tri").click(function() {
            alert("子集DIV触发");
        });

5、unbind([type],[data])就再简单不过了,删除指定元素的绑定事件,如果指定type参数则删除指定的事件,如果没有指定则删除该指定元素的所有事件。

在这些事情机制中我最常用到的还是bind方法,再常用的就是它的简写方式。当然这些事件机制是可以结合起来用的,关键看业务需求而定。







推广链接
精品视频课程推荐

研磨设计模式——跟着cc学设计系列视频教程
本视频课程是北京Java私塾原创精品书籍《研磨设计模式》一书的配套学习视频,由《研磨设计模式》的第一作者CC录制 课程目标:全面、系统的掌握GoF设计模式的知识,达到可以在实际项目开发中运用的能力 技术要点:如何实现可配置、如何实现缓存以及缓存的管理、如何实现用缓存来控制多实例的创建、如何实现参数化工厂、 如何实现可扩展工厂、如何实现原型管理器、如何实现Java的静态代理和动态代理、如何实现多线程处理队列请求、 如何实现命令的参数化配置、可撤销的操作、宏命令、队列请求和日志请求、如何实现翻页迭代、如何检测环状结构、 如何实现通用的增删改查、如何模拟工作流来处理流程、如何实现简单又通用的XML读取、如何实现模拟AOP的功能......

Spring3开发实战-独家视频教程
从零到精通Spring3的开发知识;IoC/DI的思想、IoC/DI的运行流程、IoC/DI的开发指导、AOP的思想、AOP的运行流程、AOP应用的设计、Spring对JDBC和Hibernate的支持、Spring的事务、SSH的集成应用

Ajax+JSON基础实战视频教程
数据校验、Javascript模拟多线程、下拉列表联动、操作XML、AJAX结合JSON的操作、Json-lib的使用

Javascript基础视频教程
JavaScript的内置对象--Array、String、Date、Math等,可以通过DOM对象进行对象控制,创建控制菜单及复选框的控制,创建二级联动列表框及列表框选项的移动,JavaScript项目,创建基于JS的商品管理系统。

深入浅出学Spring Web MVC视频教程
系统、完整的学习Spring Web MVC开发的知识。包括:Spring Web MVC入门;理解DispatcherServlet;注解式控制器开发详解;数据类型转换;数据格式化;数据验证; 拦截器;对Ajax的支持;文件上传下载;表单标签等内容;最后以一个综合的CRUD带翻页的应用示例来综合所学的知识

 
交流首页 » Web前端技术
前往:   

关于我们 | 联系我们 | 用户协议 | 私塾在线服务协议 | 版权声明 | 隐私保护

版权所有 Copyright(C)2009-2012 私塾在线学习网