2016-1-19（移动触摸事件以及事件的一些属性引申）

序言：
今天第一天接触移动端 ，本来以为调试还需要安卓的虚拟机。安装完后才发现，直接放在手机里就可以测试一下啦，测出的测试单单指的是测试一下事件是否触发，像谷歌的控制台调试可是没有的？至少我还没发现。

1. touchstart事件（手指接触到屏幕触发）
2. touchmove事件（手指在屏幕上滑动触发）
3. touchend事件（手指离开屏幕时触发）
   这三个事件都有三个触摸列表，每个列表里包含了对应的一系列触摸点（用来实现多点触控）多点触控我还是没有练习到呢？
   touches：当前位于屏幕上的所有手指的列表。
   targetTouches：位于当前DOM元素上手指的列表。
   changedTouches：涉及当前事件手指的列表。
   每个列表还有一些相同的属性：
   identifier：一个数值，唯一标识触摸会话（touch session）中的当前手指。一般为从0开始的流水号（android4.1，uc）
   target：DOM元素，是动作所针对的目标。
   pageX/pageX/clientX/clientY/screenX/screenY：一个数值，动作在屏幕上发生的位置（page包含滚动距离,client不包含滚动距离，screen则以屏幕为基准）。　
   radiusX/radiusY/rotationAngle：画出大约相当于手指形状的椭圆形，分别为椭圆形的两个半径和旋转角度。
   这里有一个例子可以深刻理解三个触摸事件以及他们的触摸列表

<script>
        function load (){

            document.addEventListener('touchstart',touch, false);
            document.addEventListener('touchmove',touch, false);
            document.addEventListener('touchend',touch, false);

            function touch (event){
                event = event || window.event;
                event.preventDefault();//// 阻止浏览器默认事件，重要 (比如双击缩放  滚动)
                var oInp = document.getElementById("inp");

                switch(event.type){
                    case "touchstart":
                        oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
                        break;
                    case "touchend":
                            alert(event.changedTouches[0]);
                        oInp.innerHTML = "Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
                        break;
                    case "touchmove":
                        event.preventDefault();
                        oInp.innerHTML = "Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
                        break;
                }

            }
        }
        window.addEventListener('load',load, false);
    </script>

事件event的一些引申的属性

1.上文代码中event.type属性来判断事件的类型。
2.然后event的触摸列表的属性：event.touches;获取第一个就是event.touches[0];
event.changedTouches[0];event.targetTouches[0];
3.在上面的代码中，在touchstart事件中获取event.touches[0]或event.targetTouches[0],表示获取的是正在屏幕或dom元素上的手指。
而在startend事件中用的event.changedTouches[0];而不用event.touches[0]或event.targetTouches[0],是因为此时event.touches[0]或event.targetTouches[0]为defined;已经没有手指在屏幕或dom元素上了。而event.changedTouches[0]就代表此次事件涉及到的手指列表。
4.event.preventDefault(); 阻止浏览器默认事件，重要 (比如双击缩放 滚动)

判断是否支持触摸事件

//判断是否支持触摸事件的方法
    function isTouchDevice() {
        document.getElementById("version").innerHTML = navigator.appVersion;

        try {
            document.createEvent("TouchEvent");//xmlDoM的对象
            alert("支持TouchEvent事件！");

            bindEvent(); //绑定事件
        }
        catch (e) {
            alert("不支持TouchEvent事件！" + e.message);
        }
    }

createEvent（‘事件参数’）；关于事件的其他的属性及其自定义事件，dom2级及ie的事件，将在下篇博客体现。