jQuery event,冒泡,默认事件用法

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";

%>

<!DOCTYPE html>

<html>

<head>

<base href="<%=basePath%>">

<meta charset="UTF-8">

<title>b index</title>

<link rel='stylesheet' type="text/css" href='b/css/bootstrap.css'>

<style type="text/css">

    .s1{

        width: 100px;

        height: 100px;

        background-color: pink;

    }

    .s2{

        width: 50px;

        height: 50px;

        background-color: green;

    }

</style>

</head>

<body style="margin:1px;">

    <div id="div001">div001

        <div id="cdiv001">cdiv001

            <span id="span001">span001

                <a href="#">link</a>

            </span>

        </div>

    </div>

    <div id='div002'>div002

        <input id="txt001" />

        <input id="txt002" />

    </div>

    <div id='div003'>div003</div>

    <div>

        <button id="btn001">click me to check e.result </button>

    </div>

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

    <script type="text/javascript" src="b/js/bootstrap.js"></script>

    <script type="text/javascript" src="js/index039.js"></script>

</body>

</html>
$(function() {

    $('#div001').click(div001Click);

    $('#cdiv001').click(div001Click);

    $('span').click(div001Click);

    $('a').click(div001Click);

    $('#txt001').keydown(txt001Keydown);

    $('#txt002').keydown(txt001Keydown);

    $('#txt002').mousedown(txt002Mousedown);

    $('#btn001').click(btn001Click01);

    $('#btn001').click(btn001Click02);

});

function div001Click(e) {

    console.log('currentTarget:' + e.currentTarget.id + "--" + e.type);

    console.log('target:' + e.target.id + "--" + e.type);

    // 这样可以阻止事件冒泡；

    // e.stopPropagation();

    // 这样也可以阻止事件冒泡；

    // return false;

    // 这样可以阻止默认行为，a标签就不会自动跳转导航了；但是不会阻止事件冒泡；

    e.preventDefault();

    // 这样也可以阻止默认行为，但同时也把事件冒泡阻止了；

    // return false;

}

function txt001Keydown(e) {

    /**

     * 在txt002中按下了字母a，e对象jQuery.Event如下：

     *

     * altKey: false    是否按了alt

     * bubbles: true

     * cancelable: true

     * char: undefined

     * charCode: 0

     * ctrlKey: false    是否按了ctrl

     * currentTarget: input#txt002

     * data: null

     * delegateTarget: input#txt002

     * eventPhase: 2

     * handleObj: Object

     * isDefaultPrevented: function returnFalse() {

     * jQuery111108223536524455994: true

     * key: undefined

     * keyCode: 65        字母a就是65，不论是否按了shift键；

     * metaKey: false    是否按了meta键，大多数键盘上并不存在Meta键，该键存在于MIT计算机、Mac计算机或Sun公司的一些计算机键盘上。

     * originalEvent: KeyboardEvent

     * relatedTarget: undefined

     * result: "txt001KeydownReturn"     如果在return之前进行了debug暂停，是看不到这个值的；api说明：当前事件事件最后触发的那个处理函数的返回值，除非值是 undefined 。

     * shiftKey: false    是否按了shift

     * target: input#txt002

     * timeStamp: 1447392527314

     * type: "keydown"

     * view: Window

     * which: 65    到底按的是哪个键或按钮；

     * __proto__: Object

     *

     */

    console.log('target:'+e.target.id+'---'+e.which);

    console.log(e);

    return 'txt001KeydownReturn';

}

function txt002Mousedown(e) {

    /**

     * 在txt002上点击鼠标左键/右键/中间滚轮：

     *

     * altKey: false

     * bubbles: true

     * button: 0/2/1        0表示鼠标左键/2表示鼠标右键/1表示鼠标中间轮

     * buttons: undefined

     * cancelable: true

     * clientX: 382/384/384

     * clientY: 69/61/61

     * ctrlKey: false

     * currentTarget: input#txt002

     * data: null

     * delegateTarget: input#txt002

     * eventPhase: 2

     * fromElement: null

     * handleObj: Object

     * isDefaultPrevented: function returnFalse() {

     * jQuery1111020544881583191454: true

     * metaKey: false

     * offsetX: 125/127/127

     * offsetY: 23/15/15

     * originalEvent: MouseEvent

     * pageX: 382/384

     * pageY: 69/61

     * relatedTarget: null

     * result: "txt002MousedownReturn"    如果在return之前进行了debug暂停，是看不到这个值的；api说明:当前事件事件最后触发的那个处理函数的返回值，除非值是 undefined 。

     * screenX: 277/278

     * screenY: 221/215

     * shiftKey: false

     * target: input#txt002

     * timeStamp: 1447393382134/1447393383781/1447393386565        事件触发时距离1970年1月1日的毫秒数

     * toElement: input#txt002

     * type: "mousedown"

     * view: Window

     * which: 1/3/2        1表示鼠标左键/3表示鼠标右键/2表示鼠标中轮

     * __proto__: Object

     *

     */

    console.log(e);

    return 'txt002MousedownReturn';

}

function btn001Click01(e) {

    console.log('btn001Click01');

    // 在控制台查看这个e.result竟然是btn001Click02Result；

    console.log(e);

    return 'btn001Click01Result';

}

function btn001Click02(e) {

    console.log('btn001Click02');

    // 在控制台查看这个e.result竟然也是btn001Click02Result；

    console.log(e);

    // 返回当前事件事件最后触发的那个处理函数的返回值；的确是btn001Click01Result

    console.log(e.result);

    return 'btn001Click02Result';

}

jQuery event,冒泡,默认事件用法的更多相关文章

  1. jQuery之阻止默认事件以及解除阻止

    大家都知道e.preventDefault()可以阻止默认时间,例如提交功能,但是怎么解除呢?以下参考于网络: 可以使用removeEventListener来移除.但是条件是addEventList ...

  2. 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return fal的区别

    今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...

  3. 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别

    1.event.stopPropagation()方法 这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开, ...

  4. jQuery源码解读-事件分析

    最原始的事件注册 addEventListener方法大家应该都很熟悉,它是Html元素注册事件最原始的方法.先看下addEventListener方法签名: element.addEventList ...

  5. 第二十五课：jQuery.event.trigger的源码解读

    本课主要来讲解jQuery.event.trigger的源码解读. trigger = function(event, data, elem, onlyHandlers){ if(elem & ...

  6. 【JQuery源码】事件绑定

    事件绑定的方式有很多种.使用了jQuery那么原来那种绑定方式(elem.click = function(){...})就不推荐了,原因? 最主要的一个原因是elem.click = fn这种方式只 ...

  7. 【jQuery源码】事件委托

    jQuery的事件绑定有几个比较优秀的特点: 1. 可以绑定不限数量的处理函数 2. 事件可以委托到祖先节点,不必一定要绑到对应的节点,这样后添加的节点也照样能被处理. 3. 链式操作 下面主要分析事 ...

  8. 自己动手丰衣足食，h5手机端jquery弹窗插件（事件冒泡、单例模式、遮盖部分禁止默认滚动）

    感谢浏览,欢迎交流=.= 公司开发微信网页多处需要使用弹窗,使用jquery-ui的定制化下载仍需要150多kb,想来有些奢侈(最终下来只有11kb,压缩后2kb,啊,我的神), 手机端弹窗方式与pc ...

  9. jQuery 学习笔记（5）（事件绑定与解绑、事件冒泡与事件默认行为、事件的自动触发、自定义事件、事件命名空间、事件委托、移入移出事件）

    1.事件绑定: .eventName(fn) //编码效率略高,但部分事件jQuery没有实现 .on(eventName, fn) //编码效率略低,所有事件均可以添加 注意点:可以同时添加多个相同 ...

随机推荐

  1. android数据库sqlite增加删改查

    http://hi-beijing.iteye.com/blog/1322040 http://www.cnblogs.com/wenjiang/archive/2013/05/28/3100860. ...

  2. 为什么无论你怎么设置自定义的外层div的高度，easyui的动态添加的tab的高度还是不变高

    由以下代码可知,easyui自动将panel的height设置为了固定的150px高度!

  3. 【转】简单模拟angular的依赖注入

    原文:http://www.oschina.net/code/snippet_1181081_35136 代码片段 var angular = function(){}; Object.defineP ...

  4. PAT (Advanced Level) 1013. Battle Over Cities (25)

    并查集判断连通性. #include<iostream> #include<cstring> #include<cmath> #include<algorit ...

  5. 项目经验分享——Java常用工具类集合 转

    http://blog.csdn.net/xyw591238/article/details/51678525 写在前面     本文涉及的工具类部分是自己编写,另一部分是在项目里收集的.工具类涉及数 ...

  6. [Unity]C#中 将XML和实体类之间进行相互转换的工具类

    using System; using System.Xml; using System.Xml.Serialization; using System.IO; namespace LOTool { ...

  7. SVN第二篇-----命令集合

    16.switch  代码库URL变更 svn switch (sw): 更新工作副本至不同的URL. 用法:  1.switch URL [PATH]         更新你的工作副本,映射到一个新 ...

  8. iOS 旋转

    实现一张图片的旋转部分角度显示: [cpp] view plaincopy UIImageView image = [[UIImageView alloc]init]; image.frame = C ...

  9. Sublime Text 2快捷键大全

    作者:zccst 2015-04-13 Sublime 插件安装 http://www.cnblogs.com/jingwhale/p/4421021.html 2014-09-17 Sublime ...

  10. Android L（5.0）源码之手势识别GestureDetector

    本人新手,最近下了Android L的源码,正在研究手势识别,能力有限,现总结如下: Android识别触摸屏手势使得用户体验大大提高.在View类中有个View.OnTouchListener内部接 ...