javascript基础三 （EVENT事件详解）

一：基础概念

event:事件对象：当一个事件发生的时候和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存到一个指定地方-event对象,供需要的时候调用

事件对象：必须在一个事件调用的函数里面才有内容

事件函数：事件调用的函数,一个函数是不是事件函数，不在定义的时候决定，而是取决去于个函数调用的时候

二：兼容

ie/chrome :event是一个内置的全局对象
firefox  :事件对象是通过事件函数的第一个参数传入

function fn(ev){
var ev = ev || event;
alert(ev);
}

三：事件冒泡

事件冒泡：当一个元素接收到一个事件的时候,会把它接收到的所有事件传播给父级,直到顶层window

阻止冒牌: 当前要阻止冒泡的事件函数中调用 event.cancleBubble = true

function(ev){
var ev = ev || event;
ev.cancleBubble = true;
}

四：事件 绑定

1:事件绑定的第一种方式：赋值形式

obj.onclick = fn;
obj.onclick = fn2; //会覆盖前面绑定的fn 
function fn(){
alert(1);
}
function fn2(){
alert(2);
}

2:事件绑定的第二种方式：给一个对象绑定多个函数

ie：obj.attachEvent('事件名称','事件函数');
1:没有捕获
2:事件名称有on
3:事件函数执行的顺序正序：标准ie顺序执行 非标准ie倒序执行
4:this指向window

document.attachEvent('onclick',fn);

标准：obj.addEventListener('事件名称','事件函数','是否捕获');
1:有捕获
2:事件名称没有on
3:事件执行正序
4:this：触发事件的对象

document.addEventListenrt('click',fn,false) false :是否捕获 默认

解决事件绑定中this指向问题

call 函数下的一个方法,call方法第一个参数可以改变函数执行过程中的内部this的指向
call方法第二个参数就是原函数的参数 

/例一
function fn(){
    alert(this)
}
fn.call() //调用函数 
fn() == fn.call();

fn.call(null,arguments1,arguments2);  //如果第一个参数为空则不改变函数内部指向

处理事件绑定兼容方法

function bind(obj,evname,fn){
    if(obj.addEventListener){
       obj.addEventListener(evname,fn,false);
    }else{
       obj.attachEvent('on'+evname,function(){
       fn.call(obj);
      })
    }
}

五：取消事件

ie：obj.detachEvent("事件名称","事件函数");

标准: obj.removeEventListener('事件名称','事件函数','是否捕获');

六：键盘事件

onkeydown

onkeyup

oncontextmenu

event.keyCode :数字类型 键盘案件的值

ctrlKey,shiftKey,altKey当一个事件发生的时候，如果ctrl,shift,alt是按下的状态返回 true 否则返回false

七：事件委托

/**
 *事件委托：事件代理,利用冒泡原理，触发执行效果
 *1:提高性能
 *2:新添加的元素也有事件
 * nodeName 
 * 捕捉事件源；返回事件的目标节点
 * ie :window.event.srcElement
 * 标准下：event.target
 */

var oUl = document.getElementById("ul");
oUl.onmouseover = function(ev){
	// alert(1);
	var ev = ev || event;
	var target = ev.target || ev.srcElement;
	if(target.nodeName.toLowerCase() == 'li'){
		target.style.background = 'red';
	}
}

oUl.onmouseout = function(ev){
	// alert(1);
	var ev = ev || event;
	var target = ev.target || ev.srcElement;
	if(target.nodeName.toLowerCase() == 'li'){
		target.style.background = '';
	}
}