JavaScript基础（十二）：事件

事件

• 当用户与浏览器进行任何交互时都会产生相应的事件（Event）比如：点击按钮、关闭窗口、鼠标移动等
• JS可以通过给事件绑定相应函数来使事件触发时执行相应的函数，相应函数会在执行事件时才会被执行
• 绑定事件的方式：
  • 可以在标签的事件属性中设置相应的JS代码（不推荐）
  • 可以通过为对象的指定事件属性设置回调函数的形式来处理事件

<!--在标签的事件属性中设置相应的JS代码（不推荐）-->
<button onclick="js代码。。。">按钮</button>
<!--为对象的指定事件属性设置回调函数的形式来处理事件-->
<button id="btn">按钮</button>  
<script>  
    var btn = document.getElementById("btn");  
    btn.onclick = function(){  
  
    };  
</script>

事件对象

• 当响应函数被调用时，浏览器每次都会将一个事件对象作为实参传递进响应函数中，这个事件对象中封装了当前事件的相关信息，比如：鼠标的坐标，键盘的按键，鼠标的按键，滚轮的方向等
• 可以给响应函数添加形参来调用这个事件对象，但是在IE8以下浏览器中事件对象没有做完实参传递，而是作为window对象的属性保存

元素.事件 = function(event){  
    event = event || window.event;
};  
元素.事件 = function(e){  
	e = e || event;
};

• 常用属性：
  • clientX
    返回触发此事件时鼠标的X坐标，原点为视口左上角
  • clientY
    返回触发此事件时鼠标的Y坐标，原点为视口左上角
  • pageX
    返回触发此事件时鼠标的X坐标，原点为页面左上角，仅支持IE8以上及其他浏览器
  • pageY
    返回触发此事件时鼠标的Y坐标，原点为页面左上角，仅支持IE8以上及其他浏览器

事件的冒泡

• 事件的冒泡（Bubble）指的是事件向上传导，当后代元素上的事件被触发时，将会导致其祖先元素上的同类事件也会触发
• 事件的冒泡大部分情况下都是有益的，如果需要取消冒泡，则需要使用事件对象来取消
• 可以将事件对象的cancelBubble设置为true，即可取消冒泡

元素.事件 = function(event){  
    event = event || window.event;  
    event.cancelBubble = true;  
};

事件的委派

• 指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件
• 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
• target: 事件对象的的target表示的触发事件的对象event.target.className == "类名"来让指定后代元素触发响应函数

事件的绑定

• addEventListener() 通过这个方法也可以为元素绑定响应函数
  • 参数：
    1.事件的字符串，不要on
    2.回调函数，当事件触发时该函数会被调用
    3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false
  • 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，这样当事件被触发时，响应函数将会按照函数的绑定顺序执行
  • 这个方法不支持IE8及以下的浏览器

btn01.addEventListener("click",function(){  
	alert(1);  
},false);  
  
btn01.addEventListener("click",function(){  
	alert(2);  
},false);

• attachEvent() 在IE8中可以使用attachEvent()来绑定事件
  • 参数：
    1.事件的字符串，要on
    2.回调函数
  • 这个方法也可以同时为一个事件绑定多个处理函数，不同的是它是后绑定先执行，执行顺序和addEventListener()相反

事件的传播

• 浏览器在实现时对于事件传播微软与网景有不同的理解方式
  • 微软认为事件由子元素向父元素传播
  • 网景认为事件由父元素向子元素传播
• W3C标准实现时参考两种方法给出了事件执行的阶段：
  • 捕获阶段
    事件先从父元素向子元素传递
  • 目标阶段
    捕获阶段完成后事件在目标阶段执行
  • 冒泡阶段
    然后事件再从子元素向父元素传递
• 当需要设置某个事件在捕获阶段执行时，将addEventListener()的第三个参数设置为true即可，IE8及以下浏览器没有实现捕获阶段所以没有办法设置