javascript为组件添加事件

最新推荐文章于 2022-09-12 20:36:58 发布

花过无痕

最新推荐文章于 2022-09-12 20:36:58 发布

阅读量1.2k

点赞数

分类专栏： Html5学习

本文链接：https://blog.csdn.net/hgwhen/article/details/25236037

版权

Html5学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Html5中中使用JS为组件添加事件时，需要使用一个对象来持有事件监听，然后进行添加和移除事件监听

var downhandler = function(e) {//持有对象
				cnvs_down(e);
			}
			function cnvs_down(e) {
				x = e.clientX;
				y = e.clientY;
				draw(x, y);
				startX = e.clientX;
				startY = e.clientY;
			}

			var uphandler = function(e) {
				cnvs_up(e);
			}
			function cnvs_up(e) {
				x = startX;
				y = startY;
				x1 = e.clientX;
				y1 = e.clientY;
				var c = document.getElementById("myCanvas").getContext("2d");
				c.strokeStyle = "#ff0000";
				c.moveTo(x, y);
				c.lineTo(x1, y1);

				c.stroke();
			}

			var getCoordinateshandler = function cnvs_getCoordinates(e) {
				x = e.clientX;
				y = e.clientY;
				draw(x, y);
				document.getElementById("text").innerHTML = "坐标:(" + x + "," + y + ")";
			}

进行添加和移除事件

function lineEvent() {
				var c = document.getElementById("myCanvas");
				c.addEventListener("mousedown", downhandler, false);//添加事件
				c.addEventListener("mouseup", uphandler, false);
				c.removeEventListener("mousemove", getCoordinateshandler, false);//移除事件
			}

以下写法无效:

function lineEvent() {
				var c = document.getElementById("myCanvas");
				c.addEventListener("mousedown", cnvs_down(e), false);//添加事件
				c.addEventListener("mouseup", cnvs_up(e), false);
				c.removeEventListener("mousemove", cnvs_getCoordinates(e), false);//移除事件
			}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			var startX = 0;
			var startY = 0;
			function draw(x, y) {
				var c = document.getElementById("myCanvas").getContext("2d");
				c.fillStyle = "#ff0000";
				c.fillRect(x, y, 2, 2);
			}

			var downhandler = function(e) {
				cnvs_down(e);
			}
			function cnvs_down(e) {
				x = e.clientX;
				y = e.clientY;
				draw(x, y);
				startX = e.clientX;
				startY = e.clientY;
			}

			var uphandler = function(e) {
				cnvs_up(e);
			}
			function cnvs_up(e) {
				x = startX;
				y = startY;
				x1 = e.clientX;
				y1 = e.clientY;
				var c = document.getElementById("myCanvas").getContext("2d");
				c.strokeStyle = "#ff0000";
				c.moveTo(x, y);
				c.lineTo(x1, y1);

				c.stroke();
			}

			var getCoordinateshandler = function cnvs_getCoordinates(e) {
				x = e.clientX;
				y = e.clientY;
				draw(x, y);
				document.getElementById("text").innerHTML = "坐标:(" + x + "," + y + ")";
			}
			function cnvs_clearCoordinates(e) {
				document.getElementById("text").innerHTML = "";
			}

			function lineEvent() {
				var c = document.getElementById("myCanvas");
				c.addEventListener("mousedown", downhandler, false);
				c.addEventListener("mouseup", uphandler, false);
				c.removeEventListener("mousemove", getCoordinateshandler, false);
			}

			function circelEvent() {
				var c = document.getElementById("myCanvas");
				c.addEventListener("mousemove", getCoordinateshandler, false);
				c.removeEventListener("mousedown", downhandler, false);
				c.removeEventListener("mouseup", uphandler, false);
			}

			lineEvent();
		</script>
	</head>
	<body>
		<canvas id="myCanvas" οnmοusedοwn="cnvs_down(event)" οnmοuseup="cnvs_up(event)"  style="float: left;border: 1px solid #c3c3c3" width="480" height="320"></canvas>
		<div id="text"></div>
		<input id="linebtn" type="button" value="直线" οnclick="lineEvent()"/>
		<input id="circelbtn" type="button" value="曲线" οnclick="circelEvent()"/>
	</body>
</html>

参考 http://blog.csdn.net/wl110231/article/details/7597143