jQuery自学笔记（二）——事件（二）

复合事件：

假设现在有以下代码段：

<body>
<div id="container">

    <div id="switcher" class="switcher">
        <h3>Style Switcher</h3>
        <button id="switcher-default">
            Default
        </button>
        <button id="switcher-narrow">
            Narrow Column
        </button>
        <button id="switcher-large">
            Large Print
        </button>
    </div>

    <div id="header">
        <h2>A Christmas Carol</h2>
        <h2 class="subtitle">In Prose, Being a Ghost Story of Christmas</h2>
        <div class="author">by Charles Dickens</div>
    </div>

    <div class="chapter" id="chapter-preface">
        <h3 class="chapter-title">Preface</h3>
        <p>I HAVE endeavoured in this Ghostly little book, to raise the Ghost of an Idea, which shall not put my readers out of humour with themselves, with each other, with the season, or with me.  May it haunt their houses pleasantly, and no one wish to lay it.</p>
        <p>Their faithful Friend and Servant,</p>
        <p>C. D.</p>
        <p>December, 1843.</p>
    </div>

    <div class="chapter" id="chapter-1">
        <h3 class="chapter-title">Stave I: Marley's Ghost</h3>
        <p>MARLEY was dead: to begin with. There is no doubt whatever about that. The register of his burial was signed by the clergyman, the clerk, the undertaker, and the chief mourner. Scrooge signed it: and Scrooge's name was good upon 'Change, for anything he chose to put his hand to. Old Marley was as dead as a door-nail.</p>
        <p>But what did Scrooge care! It was the very thing he liked. To edge his way along the crowded paths of life, warning all human sympathy to keep its distance, was what the knowing ones call "nuts" to Scrooge.</p>
    </div>
</div>
</body>

其CSS属性如下所示：

/***************************************
   Default Styles
************************************** */

html, body {
    margin: 0;
    padding: 0;
}

body {
    font: 62.5% Verdana, Helvetica, Arial, sans-serif;
    color: #000;
    background: #fff;
}
#container {
    font-size: 1.2em;
    margin: 10px 2em;
}

h1 {
    font-size: 2.5em;
    margin-bottom: 0;
}

h2 {
    font-size: 1.3em;
    margin-bottom: .5em;
}
h3 {
    font-size: 1.1em;
    margin-bottom: 0;
}

code {
    font-size: 1.2em;
}

a {
    color: #06581f;
}


/***************************************
   Chapter Styles
************************************** */

.poem {
    margin: 0 5em;
}
.chapter {
    margin: 1em;
}
.switcher {
    float: right;
    background-color: #ddd;
    border: 1px solid #000;
    margin: 10px;
    padding: 10px;
    font-size: .9em;
}
.switcher h3 {
    margin: .5em 0;
}

#header {
    clear: both;
}

body.large .chapter {
    font-size: 1.5em;
}

body.narrow .chapter {
    width: 250px;
}

.selected {
    font-weight: bold;
}

.hidden {
    display: none;
}

.hover {
    cursor: pointer;
    background-color: #afa;
}

事件捕获：事件捕获从最根本上的Document到下级的元素逐级的向下传递捕获。

事件冒泡：当事件发生时，会首先发送给最具体的元素，在这个元素获得相应之后，事件会向上冒泡到更一般的元素。

比如下面这行代码：

<script type="text/javascript">
        $(document).ready(function () {
            $('#switcher button').click(function () {
                var bodyClass = this.id.split('-')[1];
                $('body').removeClass().addClass(bodyClass);
                $('#switcher button').removeClass();
                $(this).addClass('selected');
                //alert("button相应");
                event.stopPropagation();                  //避免其他DOM元素相应这个事件
            });
            $('#switcher').click(function () {
                //if (event.target == this)
                //alert("switch相应");
                $('#switcher button').toggle('hidden');
                $('#switcher h3').hover(function () {
                    $(this).addClass('hover');
                },function () {
                    $(this).removeClass('hover');
                });
            });
        });
    </script>

这里当点击switcher button时会因为事件冒泡使switcher中的绑定事件也进行，即整个switcher button会被隐藏。

为了防止事件冒泡，可以利用event.target判断DOM中首先接收到事件的元素，比较 event.target 和 this 以便判断事件是否因事件冒泡被处理。

通过event.stopPropagation()也可以实现完全阻止事件冒泡。

通过event.preventDefault()方法可以在触发默认操作前终止事件。例如表单验证时对字段检查，判断是否进行表单提交这个默认操作。

jQuery自学笔记（二）——事件（二）

猜你喜欢