1.事件冒泡

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Panel</title>

<style type="text/css">

*{margin:0;padding:0;}

body { font-size: 13px; line-height: 130%; padding: 60px; }

#content { width: 220px; border: 1px solid #0050D0;background: #96E555 }

span { width: 200px; margin: 10px; background: #666666; cursor: pointer;color:white;display:block;}

p {width:200px;background:#888;color:white;height:16px;}

</style>

<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){

       // 为span元素绑定click事件

    $('span').bind("click",function(event){

        var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";

        $('#msg').html(txt);

        event.stopPropagation();    //  阻止事件冒泡

    });

    // 为div元素绑定click事件

    $('#content').bind("click",function(event){

        var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";

        $('#msg').html(txt);

        event.stopPropagation();    //  阻止事件冒泡

    });

    // 为body元素绑定click事件

    $("body").bind("click",function(){

        var txt = $('#msg').html() + "<p>body元素被点击.<p/>";

        $('#msg').html(txt);

    });

})

</script>

</head>

<body>

<div id="content">

    外层div元素

    <span>内层span元素</span>

    外层div元素

</div>

<div id="msg"></div>

</body>

</html>

2.阻止事件的默认行为

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){

   $("#sub").bind("click",function(event){

         var username = $("#username").val();  //获取元素的值

         if(username==""){     //判断值是否为空

             $("#msg").html("<p>文本框的值不能为空.</p>");  //提示信息

             event.preventDefault();  //阻止默认行为 ( 表单提交 )

         }

   })

})

</script>

</head>

<body>

<form action="test.html">

用户名：<input type="text" id="username" />

<br/>

<input type="submit" value="提交" id="sub"/>

</form>

<div id="msg"></div>

</body>

</html>

实际上都可以用return false;来解决

时间对象的属性

1,event.type()

<head>

 <title></title>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <!--   引入jQuery -->

<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>

 <script>

$(function(){

    $("a").click(function(event) {

      alert(event.type);//获取事件类型

      return false;//阻止链接跳转

    });

})

  </script>

</head>

<body>

<a href='http://google.com'>click me .</a>

</body>

</html>

2.event.target();

    $("a[href=http://google.com]").click(function(event) {

      alert(event.target.href);//获取触发事件的<a>元素的href属性值

      return false;//阻止链接跳转

    });

jquery中的事件进阶的更多相关文章

  1. jQuery中的事件绑定方法

    在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...

  2. jQuery：详解jQuery中的事件（二）

    上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...

  3. jQuery：详解jQuery中的事件（一）

    之前用过一些jQuery的动画和特效,但是用到的部分也不超过10%的样子,感觉好浪费啊——当然浪费的不是jQuery,而是Web资源.后来就想深入研究下jQuery的内部机理,读过两遍jQuery源代 ...

  4. jQuery学习笔记（三）jQuery中的事件

    目录 加载DOM 事件绑定 合成事件 事件冒泡 移除事件 一．加载DOM Javascript 与HTML之间的交互是通过用户操作浏览器页面引发的事件来处理的.jQuery提供了丰富的事件处理机制.从 ...

  5. Javascript事件模型系列（三）jQuery中的事件监听方式及异同点

    作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery>开始,到现在使用jQuery有一年 ...

  6. jQuery中的事件与动画 (你的明天Via Via)

    众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...

  7. Jquery中的事件和动画

    在学习Jquery中的过程中我们绝大部分都用到了事件的操作,也可以说事件是Jquery中必不可少的一部分,我们常见的一些事件有单击事件,鼠标事件,键盘事件等等.在Jquery中的学习中为了能使让页面以 ...

  8. jQuery中的事件机制深入浅出

    昨天呢,我们大家一起分享了jQuery中的样式选择器,那么今天我们就来看一下jQuery中的事件机制,其实,jQuery中的事件机制与JavaScript中的事件机制区别是不大的,只是,JavaScr ...

  9. jQuery中的事件和动画——《锋利的jQuery》（第2版）读书笔记2

    第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){   // 编写代码... }); 可以简写成: $(function( ...

随机推荐

  1. C# 字符串的截取和替换

    1.取字符串的前n个字符 (1)string str1=str.Substring(0,n); (2)string str1=str.Remove(i,str.Length-n); 2.去掉字符串的前 ...

  2. Android.mk学习 笔记

    感谢: 原创作品 转载请注明出处:http://www.cnblogs.com/langlang/ 作者email: dayhappyhappy@163.com LOCAL_PATH := $(cal ...

  3. php练习：给指定商品添加特殊效果

    老板说: 我只要在文本框填1|3 ,那第1和第3个商品都要标注! 思考过程: 有了重要信息1和3,而循环商品时$key按顺序自动递增,那么只要key和信息匹配的话,就判断商品添加标注,这个可以把位置信 ...

  4. 20145211 《Java程序设计》第4周学习总结——园日涉以成趣

    编程思想DRY和Once and Only Once DRY DRY原则的为"每一个知识都必须在系统内必须是单一的,明确的,权威的,具有代表性.当DRY的原则成功应用,在系统中,任何单一元素 ...

  5. Mac 系统下将普通文件变为可执行文件

    在使用Cocospods时,老是提示我pod文件里面有文稿的东西.后来想到前同事将他变为可执行文件了.所以百度了一下,方法如下: chmod +x (此处是文件的地址) 就可以了

  6. js获取网站根目录

    //js获取网站根路径(站点及虚拟目录),获得网站的根目录或虚拟目录的根地址         function getRootPath(){        var strFullPath=window ...

  7. 十大技巧快速提升原生APP开发性能

    移动应用市场用户争夺战日益激烈,原来做APP拼想法拼创意拼是否抓住用户痛点.现在,精细化用户体验成为了一个APP能否留存用户的关键问题,一旦用户觉得体验不畅,马上就有竞品APP后补,如何开发高性能的移 ...

  8. Access数据库创建、使用

    1.创建Access数据库表 1)在office中打开Microsoft Access2010,选择空数据库创建数据库StudentInfo. 2)创建新表,在表格第一列选择数据类型,并输入列名. 3 ...

  9. [PCL]2 点云法向量计算NormalEstimation

    从GitHub的代码版本库下载源代码https://github.com/PointCloudLibrary/pcl,用CMake生成VS项目,查看PCL的源码位于pcl_features项目下 1. ...

  10. 【关于HBITMAP, DC, MEM DC, Clipboard】将HBITMAP拷贝到Clipboard（Windows Clipboard & OLE Clipboard）

    参考: Programming Windows with MFC, 2nd. Chapter 18, 19. 建议把这两章学习完(至少到OLE drag-and-drop之前要学习完)再来尝试OLE ...