Introduction
This is a simple application in HTML 5 that
performs a HTML5 Canvas disable Event Listener by Name. We know
that HTML5 is an advanced version of HTML that can be used to develop
3D animated applications. The new feature of HTML5 is the canvas element for
drawing. The video and audio elements for media playback. Better support for
local offline storage. HTML5 will be the new standard for HTML, XHTML, and the
HTML DOM. The previous version of HTML is from 1999. The web has changed a lot
since then. HTML5 is still a work in progress. However, most modern browsers have
some HTML5 support. HTML5 is a cooperation between the World Wide Web Consortium
(W3C) and the Web Hypertext Application Technology Working Group.
Step1: First open the HTML editor.
- Open start->notepad.
- The name of the editor is "Tom".
Step2: First we create the "window.onload"
function. In an onload function, we define the size of the canvas
and set the color.
- window.onload = function(){
- var stage = new Kinetic.Stage("container", 578, 200);
- var circle = new Kinetic.Shape(function(){
- var canvas = this.getCanvas();
- var context = this.getContext();
- context.beginPath();
- context.arc(canvas.width / 2, canvas.height / 2, 70, 0, Math.PI * 2, true);
- context.fillStyle = "#FF00FF";
- context.fill();
- context.lineWidth = 4;
- context.stroke();
- });
Step3: Add
Event Listener and set on_click event on a circle.
- circle.addEventListener("click.event1", function(){
- alert("First Listener");
- });
- circle.addEventListener("click.event2", function(){
- alert("Second Listener");
- });
- stage.add(circle);
- document.getElementById("remove1").addEventListener("click", function(){
- circle.removeEventListener("click.event1");
- alert("First onclick removed");
- }, false);
- document.getElementById("remove2").addEventListener("click", function(){
- circle.removeEventListener("click.event2");
- alert("Second onclick removed");
- }, false);
- document.getElementById("removeAll").addEventListener("click", function(){
- circle.removeEventListener("click");
- alert("All onclicks removed");
- }, false);
Step4: Set button
name that we have used to perform the action.
- <body onmousedown="return false;">
- <div id="container"></div>
- <div id="buttons">
- <button id="remove1">
- Disable First Listener
- </button>
- <button id="remove2">
- Disable Second Listener
- </button>
- <button id="removeAll">
- Disable All Listeners
- </button>
- </div>
- </body>
Join the conversation! Your thoughts help the community grow.