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. 转：sql SELECT时的with(nolock)选项说明

    I used to see my senior developers use WITH (NOLOCK) when querying in SQL Server and wonder why they ...

  2. Htpasswd 给网站后台目录加密

    http://www.l0phtcrack.com/download.html打开apache配置文件 httpd.conf  配置如下:  <Directory "/var/www/ ...

  3. javascript学习01

    1/js 中所有的数字都是浮点型,所以5/2=2.5    6.5%2.1=0.2 2/delete用于删除对象的属性或者是数组元素: var o={x=1,y=2}:delete o.x;  x i ...

  4. Android学习笔记之Intent(1)

    1.Intent指定启动目标组件 2.Intentfilter描述基本组件所在地址 3.其他包引入资源文件时记得引入R所在的包 package com.jikexueyuan.intent; impo ...

  5. Python全栈【进程、线程】

    Python全栈[进程.线程] 本节内容: 进程 线程 协程 I/O多路复用 进程 1.进程就是一个程序在一个数据集上的一次动态执行过程,进程是资源分配的最小单元. 2.进程一般由程序.数据集.进程控 ...

  6. C++ string 类重写

    (我们知道学习C++时,在学习完C的基础内容后最先上手的就是C++的string类来学习字符串处理的内容,这里我们通过重写string类来重新认识字符串处理的内容) 1.树立string类主要函数,确 ...

  7. CSS——宽高问题大汇总

    1.宽高继承 他们是要属性的,并不是直接就能继承,inherit. 2.浮动的盒子不要给宽,宽度由内容来决定

  8. Spring--AOP--面向切面编程

    AOP: 面向切面编程. 通过动态代理实现. AOP就3条线, 2条线给剪断. 实现:动态代理 如果实现interface的话, 用Proxy, InvocationHandler. 不实现inter ...

  9. eclipse创建android项目，无法正常预览布局文件

    http://jingyan.baidu.com/article/d621e8da0e0e052865913fae.html

  10. 编码器芯片MLX90363的使用

    文档资料 MLX90363 Datasheet MLX90363 Application Note 使用 对于编码器来说,Rotary Application模式 SPI驱动中,CS必须在8个字节都发 ...