1.事件驱动模型:
注:可以看做用户点击某个功能或者按钮,来产生一个onclick事件来触发某个函数;
2.事件驱动要素:
1.事件源;
2.事件(行为);
例如:
鼠标点击;
鼠标悬浮于某个页面的某个热点之上;
确认表单;
在表单中选取输入框;
3.事件分类:
4.监听器:
1.IE中
element.attachEvent(event, function); 添加
element.detachEvent(event, function);//删除
2.chrom ff
element.addEventListener(event, function, useCapture);//添加
element.removeEventListener(event, function, useCapture);//删除
5.事件对象(event对象)
注:1.当事件发生时,只能在事件函数内部访问对象;
2.处理函数后会自动销毁;
//event对象
btn.onclick = function (e) {
var ev = e || window.event; //兼容性
}
var wrap = document.getElementById("wrap");
wrap.onmousemove = function(e) {
var ev = e || window.event;
this.innerHTML = ev.type;
//距离浏览器
this.innerText = ev.clientX + " " + ev.clientY;
//距离屏幕
this.innerHTML = ev.screenX + " " + ev.screenY;
//距离事件源
this.innerHTML = ev.offsetX + " " + ev.offsetY;
this.innerHTML = ev.layerX + " " + ev.layerY;
};
6.keycod事件 键盘码:
document.body.onkeydown = function(e) {
var ev = e || window.event;
//获取键盘码
wrap.innerHTML = ev.keyCode;
//altKey
wrap.innerHTML = ev.altKey;
//ctrlKey
wrap.innerHTML = ev.ctrlKey;
//shiftKey
wrap.innerHTML = ev.shiftKey;
console.log(ev.type);
回车 = 13; alt = 18; 上 = 38; 右 = 39;
左 = 37; 下 = 40; Ctrl =17; shift = 16;
当多个事件定同一个函数时,event.type 来判断在哪个事件用;