2016/12/18 18:51
1/10
< SVG
SVG eseménykezelés Szerző: Sallai András Copyright © Sallai András, 2011, 2015 Licenc: GNU Free Documentation License 1.3 Web: http://szit.hu
Clickre dupla <svg xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" version="1.1" width="200" height="200"> <script type="text/ecmascript">
SzitWiki - http://szit.hu/
SVG eseménykezelés
Last update: 2015/07/07 23:47
oktatas:grafika:svg:eseménykezelés http://szit.hu/doku.php?id=oktatas:grafika:svg:esem%C3%A9nykezel%C3%A9s
Clickre más szín <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
Alert <svg xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" version="1.1" width="200" height="200"> <script type="text/ecmascript">
http://szit.hu/
Printed on 2016/12/18 18:51
2016/12/18 18:51
3/10
Célobjektum <svg xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" version="1.1" width="200" height="200"> <script type="text/ecmascript">
SzitWiki - http://szit.hu/
SVG eseménykezelés
Last update: 2015/07/07 23:47
oktatas:grafika:svg:eseménykezelés http://szit.hu/doku.php?id=oktatas:grafika:svg:esem%C3%A9nykezel%C3%A9s
Meg <svg xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" version="1.1" width="200" height="200"> <script type="text/ecmascript">
http://szit.hu/
Printed on 2016/12/18 18:51
2016/12/18 18:51
5/10
SVG eseménykezelés
Esemény másként <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="200" >
<set attributeName="fill" from="lightgrey" to="red" begin="mouseover" end="mouseout"/> Mozgasd felettem és klikkelj <set attributeName="font-size" from="30" to="45" begin="mouseover" end="mouseout"/> <set attributeName="fill" from="black" to="red" begin="mousedown" end="mouseup"/>
Mozgasd felettem és klikkelj
Más elem megváltoztatása <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="200" >
Mozgasd felette, hogy a szöveg piros legyen Mozgasd felette, hogy a szöveg piros legyen Klikkelj, hogy a szöveg nagy és piros legyen
SzitWiki - http://szit.hu/
Last update: 2015/07/07 23:47
oktatas:grafika:svg:eseménykezelés http://szit.hu/doku.php?id=oktatas:grafika:svg:esem%C3%A9nykezel%C3%A9s
Változtass meg <set attributeName="fill" from="black" to="red" begin="changeToRed.mouseover" end="changeToRed.mouseout"/> <set attributeName="font-size" from="14" to="50" begin="bigText.mouseover" end="bigText.mouseout"/> <set attributeName="font-size" from="14" to="50" begin="bigRedText.click" end="bigRedText.mouseout"/> <set attributeName="fill" from="black" to="red" begin="bigRedText.click" end="bigRedText.mouseout"/>
Mozgasd felette, hogy a szöveg piros legyen Mozgasd felette, hogy a szöveg piros legyen Klikkelj, hogy a szöveg nagy és piros legyen
Változtass meg
Animáció indítása <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="480" >
http://szit.hu/
Printed on 2016/12/18 18:51
2016/12/18 18:51
7/10
Billentyű <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 450 250" onload="init()" xml:space="preserve">
Billentyűesemények <script type="text/ecmascript">
SVG eseménykezelés
Last update: 2015/07/07 23:47
oktatas:grafika:svg:eseménykezelés http://szit.hu/doku.php?id=oktatas:grafika:svg:esem%C3%A9nykezel%C3%A9s
//néhány böngésző támogatja: evt.charCode, //némelyik csak ezt: evt.keyCode if (evt.charCode) { var charCode = evt.charCode; } else { var charCode = evt.keyCode; } //minden valódi karakter if (charCode > 31 && charCode != 127 && charCode < 65535) { text += String.fromCharCode(charCode); } //backspace billentyű if (charCode == 8) { //szöveg rövidítése text = text.substring(0,text.length-1); } //enter billentyű else if (charCode == 10 || charCode == 13) { stopTyping(evt); } } //dinamikus szöveg frissítése evtText1.firstChild.nodeValue = text; //nem kívánatos billentyűk például //az Opera vagy Mozilla böngészőben evt.preventDefault(); } //ez a függvény az eseményfigyelőt hozzáadja function initTyping(evt) { if (!typeInitialized) { document.documentElement.addEventListener("keypress",typeText,false); document.documentElement.addEventListener("click",stopTyping,false); evtText2.firstChild.nodeValue = "Typing Active"; typeInitialized = true; } //nem szeretnénk a dokumentum szintjén a klikk eseményeket evt.stopPropagation(); } function stopTyping(evt) { document.documentElement.removeEventListener("keypress",typeText,false); document.documentElement.removeEventListener("click",stopTyping,false); typeInitialized = false; evtText2.firstChild.nodeValue = "Typing Inactive"; evtText3.firstChild.nodeValue = "You typed: "+text; } ]]>
Printed on 2016/12/18 18:51
2016/12/18 18:51
9/10
SVG eseménykezelés
width="1500" height="1500" fill="yellow" stroke="none" />
Eseménykezelő hozzáadása és törlése Kattints a fehér részre a gépelés megkezdéséhez. Kattints a szövegdobozon kívül vagy nyomd meg az enter billentyűt az írás befejezéséhez. Nyomd meg a Backspace billentyűt az utolsó karakter törléséhez. Nincs gépelés Ezt írtad: Működés közben
Esemény hozzáadása és elvételének bemutatása.
Nincs gépelés Ezt gépelted: Kattints Kattintsmeg Nyomd aafehér szövegdobozon a Backspace részre a gépelés billentyűt kívül vagy megkezdéséhez. az nyomd utolsómeg karakter az enter törléséhez. billentyűt az írás befejezéséhez.
Linkek http://hu.wikipedia.org/wiki/ECMAScript http://www.w3.org/TR/SVG/script.html SzitWiki - http://szit.hu/
Last update: 2015/07/07 23:47
oktatas:grafika:svg:eseménykezelés http://szit.hu/doku.php?id=oktatas:grafika:svg:esem%C3%A9nykezel%C3%A9s
http://www.w3.org/TR/2000/WD-SVG-20000629/ecmascript-binding.html http://xmlgraphics.apache.org/batik/using/scripting/ecmascript.html http://www.ibm.com/developerworks/library/x-svgint/ http://www.carto.net/svg/manipulating_svg_with_dom_ecmascript/ http://pilat.free.fr/english/routines/js_dom.htm
From: http://szit.hu/ - SzitWiki Permanent link: http://szit.hu/doku.php?id=oktatas:grafika:svg:esem%C3%A9nykezel%C3%A9s Last update: 2015/07/07 23:47
http://szit.hu/
Printed on 2016/12/18 18:51
