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. HTTP协议详解 转自小坦克

    -- 此文章是转载小坦克的;直接复制文章的目的是因为原文章地址经常被重置,找不到原来的文章.小坦克博客园主页:https://home.cnblogs.com/u/TankXiao/ 当今web程序的 ...

  2. hdu-oj 1874 畅通工程续

    最短路基础 这个题目hdu-oj 1874可以用来练习最短路的一些算法. Dijkstra 无优化版本 #include<cstdio> #include<iostream> ...

  3. hibernate--ID生成策略--annotation

    annotation: @GeneratedValue a) 自定义ID b)auto: 对mysql默认使用auto_increment, 对oracle使用hibernate_sequence c ...

  4. CodeForces 660B Seating On Bus

    模拟. #include<cstdio> #include<cstring> #include<cmath> #include<vector> #inc ...

  5. Education Round16

    A题:题意:给定国际象棋king的坐标,求能向几个方向移动分析:处理一下边界情况,其他的都是8 #include <iostream> #include <cstdio> #i ...

  6. Bash shell 的算术运算有四种方式

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~1:使用 expr 外部程式加法 r=`expr 4 + 5`echo $r注意! '4' '+' '5' 这三者之间要有空白r=`e ...

  7. (中等) HDU 1043 Eight，经典搜索问题。

    Problem Description The 15-puzzle has been around for over 100 years; even if you don't know it by t ...

  8. (简单) POJ 3279 Fliptile，集合枚举。

    Description Farmer John knows that an intellectually satisfied cow is a happy cow who will give more ...

  9. html5 canvas 五子棋游戏

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  10. IOS开发－OC学习－常用功能代码片段整理

    IOS开发-OC学习-常用功能代码片段整理 IOS开发中会频繁用到一些代码段,用来实现一些固定的功能.比如在文本框中输入完后要让键盘收回,这个需要用一个简单的让文本框失去第一响应者的身份来完成.或者是 ...