mirror of
https://github.com/Polymer/polymer.git
synced 2026-08-19 01:14:44 -05:00
101 lines
2.7 KiB
HTML
101 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<!--
|
|
Copyright 2013 The Polymer-Project Authors. All rights reserved.
|
|
Use of this source code is governed by a BSD-style
|
|
license that can be found in the LICENSE file.
|
|
-->
|
|
<html>
|
|
<head>
|
|
<title>polymer::events</title>
|
|
<meta charset="utf-8">
|
|
<script src="../../polymer.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<h3>See console for results:</h3>
|
|
|
|
<h4>Custom element using declarative events</h4>
|
|
|
|
<x-basic>
|
|
<div style="background: white;">Click distributed node! (expected: local and host handler fires;
|
|
without event path, only host event fires.)</div>
|
|
</x-basic>
|
|
|
|
<element name="x-basic" on-click="hostClickHandler">
|
|
<template>
|
|
<style>
|
|
@host {
|
|
* {
|
|
display: block;
|
|
padding: 20px;
|
|
background: beige;
|
|
}
|
|
}
|
|
div {
|
|
padding: 20px;
|
|
margin: 10px;
|
|
background: whitesmoke;
|
|
}
|
|
</style>
|
|
<div on-click="localClickHandler">Click shadowDOM node! (expected: local and host handler fire)</div>
|
|
<div on-click="localDistributedClickHandler">
|
|
<content></content>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
Polymer.register(this, {
|
|
hostClickHandler: function(inEvent, inDetail, inSender) {
|
|
console.log('clicked on host!', this.localName, inEvent);
|
|
},
|
|
localClickHandler: function(inEvent, inDetail, inSender) {
|
|
console.log('clicked on local div!', this.localName, inEvent);
|
|
},
|
|
localDistributedClickHandler: function(inEvent, inDetail, inSender) {
|
|
console.log('clicked on local div around an insertion point!', this.localName, inEvent);
|
|
}
|
|
});
|
|
</script>
|
|
</element>
|
|
|
|
<h4>Composed custom elements using declarative events</h4>
|
|
|
|
<x-simple-composed></x-simple-composed>
|
|
|
|
<element name="x-simple-composed" on-click="hostClickHandler">
|
|
<template>
|
|
<style>
|
|
@host {
|
|
* {
|
|
display: block;
|
|
padding: 20px;
|
|
background: lightgreen;
|
|
}
|
|
}
|
|
|
|
div {
|
|
background: lightgreen;
|
|
}
|
|
|
|
</style>
|
|
<x-basic>
|
|
<div on-click="localClickHandler">Try clicking me! (expected:
|
|
local, local, host, host;
|
|
without event path, only host events fires.)</div>
|
|
</x-basic>
|
|
</template>
|
|
<script>
|
|
Polymer.register(this, {
|
|
hostClickHandler: function(inEvent, inDetail, inSender) {
|
|
console.log('clicked on host!', this.localName, inEvent);
|
|
},
|
|
localClickHandler: function(inEvent, inDetail, inSender) {
|
|
console.log('clicked on local div!', this.localName, inEvent);
|
|
}
|
|
});
|
|
</script>
|
|
</element>
|
|
|
|
|
|
</body>
|
|
</html>
|