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. [iOS]C语言技术视频-15-指针变量高级用法练习一(函数指针完成动态排序)

    下载地址: 链接: http://pan.baidu.com/s/1o6MOzX4 密码: xzxn

  2. IMapControl3 Interface（1） Properties属性

    IMapControl3 Interface Provides access to members that control the MapControl. Note: the IMapControl ...

  3. 读 《我为什么放弃Go语言》 有感

    最近又熟悉了下go语言,发现go语言还有许多设计不好的地方,然后又读到了<我为什么放弃Go语言>这篇文章, 对于某些方面,我还是比较认同的. 这篇文章总结了十六点,如下: 1.1 不允许左 ...

  4. Linux下VNC配置多个桌面和修改密码 不会当系统重启vnc失效

    1:vncserver 2:iptables -I INPUT -p tcp --dport 5901 -j ACCEPT   客户端方式 3:iptables -I INPUT -p tcp --d ...

  5. html中的空白字符问题

    1.当我们想使用百分比来进行两个盒子的并排 代码: <!DOCTYPE html> <html lang="en"> <head> <me ...

  6. 已有 JS 模块化和打包方案收集

    模块化方案 RequireJS AMD 方案, 常用的 define 语法, 异步加载模块, 目前很多支持: 官网 http://requirejs.org/ Github https://githu ...

  7. 静态方法List

    public class Country { public static List<Country> CountryList = new List<Country> { new ...

  8. fedora安装各种应用软件

    1 安装视频播放器 sudo yum install mplayer mplayer-gui 可以从命令行 和 gnome 中启动 2 音量调节 (1)使用 alsamixer alsamixer是一 ...

  9. java XML转JSON格式

    标签: XML转Json json 2014-05-20 20:55 6568人阅读 评论(6) 收藏 举报  分类: [J2SE基础](20)  代码如下所示,从这个例子中发现了代码库的重要性,如果 ...

  10. axis2开发实例（一）

    主要参考<axis2之webservice新手超详细教程http://wenku.baidu.com/view/6eae036d011ca300a6c390a4.html> <axi ...