最详细的JavaScript和事件解读

与浏览器进行交互的时候浏览器就会触发各种事件。比如当我们打开某一个网页的时候，浏览器加载完成了这个网页，就会触发一个 load 事件；当我们点击页面中的某一个“地方”，浏览器就会在那个“地方”触发一个 click 事件。

这样，我们就可以编写 JavaScript，通过监听某一个事件，来实现某些功能扩展。例如监听 load 事件，显示欢迎信息，那么当浏览器加载完一个网页之后，就会显示欢迎信息。

基础事件操作

监听事件

浏览器会根据某些操作触发对应事件，如果我们需要针对某种事件进行处理，则需要监听这个事件。监听事件的方法主要有以下几种：

1,HTML 内联属性（避免使用）on+事件动作( onclick )
2,DOM 属性绑定 on+事件动作( onclick )
2,使用事件监听函数事件动作( click ) 不需要添加on

HTML 内联属性（避免使用）

HTML 元素里面直接填写事件有关属性，属性值为 JavaScript 代码，即可在触发该事件的时候，执行属性值的内容。

<button onclick="event()">点击这个按钮</button>
function event(){
  alert('HTML 内联属性')
}

DOM 属性绑定

也可以直接设置 DOM 属性来指定某个事件对应的处理函数，这个方法比较简单：

var dd = document.getElementById('id')
dd.onclick = function(){ 
  alert('你点击了这个按钮');
};

上面代码就是监听 element 节点的 click 事件。它比较简单易懂，而且有较好的兼容性。但是也有缺陷，因为直接赋值给对应属性，如果你在后面代码中再次为 element 绑定一个回调函数，会覆盖掉之前回调函数的内容。

虽然也可以用一些方法实现多个绑定，但还是推荐下面的标准事件监听函数。

使用事件监听函数

标准的事件监听函数如下：

element.addEventListener(<event-name>, <callback>, <use-capture>);
var dd = document.getElementById('id')
dd.addEventListener('click',function(){
  alert('使用事件监听函数')
})

用标准事件监听函数改写上面的例子：

var btn = document.getElementsByTagName('button');
btn[0].addEventListener('click', function() {
    alert('你点击了这个按钮');
}, false);

这里最好是为 HTML 结构定义个 id 或者 class 属性，方便选择，在这里只作为演示使用。

移除事件监听

当我们为某个元素绑定了一个事件，每次触发这个事件的时候，都会执行事件绑定的回调函数。如果我们想解除绑定，需要使用 removeEventListener 方法：

var dd = document.getElementById('id')
dd .removeEventListener('click',function(){
  alert('移除事件监听')
});

需要注意的是，绑定事件时的回调函数不能是匿名函数，必须是一个声明的函数，因为解除事件绑定时需要传递这个回调函数的引用，才可以断开绑定。例如：

var fun = function() { // function logic};

element.addEventListener('click', fun,false);
element.removeEventListener('click', fun, false);

pc电脑端事件动作（jquery一样）

移动端端事件动作

| 事件属性 | 当发生以下情况，出现此事件 | 重要性 |
| -- | -- |
| tap | 手指放到屏幕上的时候触发，zepto等移动端插件 | 重要 |
| touchstart | 手指放到屏幕上的时候触发 | 重要 |
| touchmove | 手指在屏幕上移动的时候触发 | 重要 |
| touchend | 手指从屏幕上拿起的时候触发 | 重要 |
| touchcancel | 系统取消touch事件的时候触发。不详 | 不重要 |

这个可以不看，这个是移动端的事件
client / clientY：// 触摸点相对于浏览器窗口viewport的位置 
pageX / pageY：// 触摸点相对于页面的位置 
screenX /screenY：// 触摸点相对于屏幕的位置 
identifier： // touch对象的unique ID

js 手机端触发事事件、javascript手机端/移动端触发事件
http://blog.sina.com.cn/s/blog_6d3f840a0101mchu.html