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. mysql Explain 性能分析关键字

    EXPLAIN 输出格式select_typetabletypepossible_keyskeykey_lenrowsExtra MySQL 提供了一个 EXPLAIN 命令, 它可以对 SELECT ...

  2. 使用Jetty搭建Java Websocket Server，实现图像传输

    https://my.oschina.net/yushulx/blog/298140 How to Implement a Java WebSocket Server for Image Transm ...

  3. 基于心跳的socket长连接

    http://coach.iteye.com/blog/2024444 基于心跳的socket长连接 博客分类: http socket 案例: 心跳: socket模拟网页的报文连接某个网站,创建t ...

  4. 天梯赛决赛 L2-1.红色警报 并查集

    L2-013. 红色警报 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 战争中保持各个城市间的连通性非常重要.本题要求你编写一 ...

  5. android bitmap compress（图片压缩）

    android bitmap compress android的照相功能随着手机硬件的发展,变得越来越强大,能够找出很高分辨率的图片. 有些场景中,需要照相并且上传到服务,但是由于图片的大小太大,那么 ...

  6. 支持持久化的内存数据库-----Redis

    一.Redis概述 1.1.什么是Redis Redis是一种高级key-value数据库.它跟memcached类似,不过数据 可以持久化,而且支持的数据类型很丰富.有字符串,链表,集 合和有序集合 ...

  7. WebRequestManager对象的使用

    WebRequestManager可以喝WebRequest对象一起使用. WebRequestManager对象的add_completedRequest方法,可以用来处理所有WebRequest对 ...

  8. (简单) POJ 1321 棋盘问题，回溯。

    Description 在一个给定形状的棋盘(形状可能是不规则的)上面摆放棋子,棋子没有区别.要求摆放时任意的两个棋子不能放在棋盘中的同一行或者同一列,请编程求解对于给定形状和大小的棋盘,摆放k个棋子 ...

  9. Codeforces#348DIV2/VK CUP 2016

    昨天第一次开大小号打cf,发现原来小号提交之后大号在此提交同样的代码会被skipped掉,然后之后提交的代码都不记分,昨天a,b,c都是水题 A 题意:问一个物品最多能被分成多少份,分成的连续两份不能 ...

  10. 关于cin的用法一些小结

    在写二叉树的时候遇到if(!cin)那几个标志位弄得并不清楚,还遇到了诸如cin.clear()等函数,感觉C++又白学了,于是打算去网上搜了几篇靠谱的文章,有时候看来,一些事件处理类的工程代码,在A ...