dom编程事件

1.绑定事件与解绑事件

绑定事件分三种，咱先说简单的

（1）在标签内绑定，最简单的也是新手最先接触的。上代码：

按钮

(2)在JavaScript内使用，在这里又分两种，咱还是先说简单的，上代码：

//获取 类名为 a 的节点元素 
var a  = document.querySelector('.a')
//绑定点击事件
a.onclick = function(){
console.log('你好')
}

（3）其实这个也不麻烦，不信你看：

//获取元素
var a = document.querySelector('.a')
//绑定事件
a.addEventListener("click",function(){
console.log('你好呀！！')
})

解绑：

不会解绑的人质不是一个好的歹徒

（1）解绑有两种并且都是在JavaScript中实现，淦代码：

btn.onclick = null //点击一次解绑，或者说只能点击一次

（2）第二种你一定用得到：

btn.removeEventListener(type,funName)//第一个参数事件，第二个参数是函数名

2.事件对象

事件对象分为：事件源对象、事件与源对象的位置、事件相对于页面的位置

（1）事件源对象：

event.target    // 事件源对象

（2）事件与源对象的位置

event.offsetX   //事件与源对象水平方向的距离


event.offsetY  //事件与源对象垂直方向的距离

（3）事件与相对页面的位置：

event.pagX   //事件与页面的水平方向的距离


event.pagY  //事件与页面的垂直方向的距离

3.事件的传递

事件传递有两部分：

（1）冒泡   ：就是最具体的传递给最不具体的，简单说就是有三个嵌套关系的块，你点击最里面一个那就是从里往外执行事件

（2）捕获 ：最不具体的传递给最具体的，简单说就是从外往里执行事件

默认都是冒泡，使用捕获的方法 如下：

elen.addEventlistener('click',function(){},true) //true就是捕获，反之false  不捕获

阻止事件传递：

event.stopPropagation()

阻止默认事件：

event.preventDefault()