Skip to content

Instantly share code, notes, and snippets.

/index.html

Created July 10, 2016 00:57
Show Gist options
  • Save anonymous/5e16be8a2e9c3b08e8dd62aa46de96d9 to your computer and use it in GitHub Desktop.
Save anonymous/5e16be8a2e9c3b08e8dd62aa46de96d9 to your computer and use it in GitHub Desktop.
Download ZIP
SVG shadow tree event listener test // source http://jsbin.com/dubazuzoke
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>SVG shadow tree event listener test</title>
</head>
<body>
<svg>
<circle id="c" cx="50" cy="50" r="40" />
<use fill="red" x="100" xlink:href="#c" />
</svg>
<script id="jsbin-javascript">
function makeClickHandler(name) {
return function clickHandler(event){
console.log(
[name,
'target =',
event.target.constructor.name,
'target.parentNode =',
(event.target.parentNode? event.target.parentNode.constructor.name : 'null'),
'; currentTarget =',
event.currentTarget.constructor.name
].join(' '));
};
}
document.querySelector("svg").addEventListener("click", makeClickHandler("SVG handler:"));
document.querySelector("circle").addEventListener("click", makeClickHandler("Circle handler:"));
document.querySelector("use").addEventListener("click", makeClickHandler("Use handler:"));
</script>
<script id="jsbin-source-javascript" type="text/javascript">function makeClickHandler(name) {
return function clickHandler(event){
console.log(
[name,
'target =',
event.target.constructor.name,
'target.parentNode =',
(event.target.parentNode? event.target.parentNode.constructor.name : 'null'),
'; currentTarget =',
event.currentTarget.constructor.name
].join(' '));
};
}
document.querySelector("svg").addEventListener("click", makeClickHandler("SVG handler:"));
document.querySelector("circle").addEventListener("click", makeClickHandler("Circle handler:"));
document.querySelector("use").addEventListener("click", makeClickHandler("Use handler:"));</script></body>
</html>
Raw
jsbin.dubazuzoke.js
function makeClickHandler(name) {
return function clickHandler(event){
console.log(
[name,
'target =',
event.target.constructor.name,
'target.parentNode =',
(event.target.parentNode? event.target.parentNode.constructor.name : 'null'),
'; currentTarget =',
event.currentTarget.constructor.name
].join(' '));
};
}
document.querySelector("svg").addEventListener("click", makeClickHandler("SVG handler:"));
document.querySelector("circle").addEventListener("click", makeClickHandler("Circle handler:"));
document.querySelector("use").addEventListener("click", makeClickHandler("Use handler:"));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment