移动端事件的收集（代码实例）

移动端事件的收集（代码实例）

window.onload = function () {
	var box = document.querySelector(".box");
	//box.style.background = "blue";
	/* 
		touchstart 手指触摸 == mousedown 
		touchend 手指抬起 == mouseup
		touchmove 手指触屏移动 == mousemove
		
		touch事件  在 chrome的模拟器下，部分版本 通过on的方式来添加事件无效
	*/
	box.ontouchstart = function () {
		//this.style.background = "blue";
		console.log(1);
	};
	box.ontouchend = function () {
		//this.style.background = "red";
		console.log(2);
	};
	box.ontouchmove = function () {
		//this.style.background = "red";
		console.log(3);
	};
};

2.事件监听

box.addEventListener("touchstart",function() {
		console.log(1);
	}
);

3.冒泡和捕获

window.onload = function () {
	var box = document.querySelector(".box");
	var p = document.querySelector(".p");
	box.addEventListener(
		"touchstart",
		function() {
			console.log(1);
		},
		false    // false代表冒泡  true代表捕获
	);
	p.addEventListener(
		"touchstart",
		function() {
			console.log(2);
		},
		false
	);
	/*
	冒泡 ：点击元素 他会把这个事件一直向上传递 从下向上传递 两个都是false,点击出现的顺序是2 1 
	捕获 ：从上向下传递，两个都是true,点击出现的顺序是1  2 
	*/
};