移动端事件的收集

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