脚本模型:
// 同一个对象绑定了同一个事件多次,后者会把前者给覆盖掉
事件一般是用于浏览器和用户操作进行交互。最早是IE和Netscape Navigator中出现，作为分担服务器端运算负载的一种手段。直到几乎所有的浏览器都支持事件处理。而DOM2级规范开始尝试以一种复合逻辑的方式标准化DOM事件。IE9、Firefox、Opera、Safari和Chrome全都已经实现了“DOM2级事件”模块的核心部分。IE8之前浏览器仍然使用其专有事件模型。
JavaScript有三种事件模型：内联模型、脚本模型和DOM2模型。
window.onload = function(){
// alert("轮播");
// }
// window.onload = function(){
// alert("无缝滚动");
// }
键盘事件
document.onkeyup = box;
function box(e){
// alert("键盘上的键被松开了");
if(e.keyCode == 27){
close();
}
}
// document.onkeyup = function(e){
// alert("键盘上的键被按下并松开了");
// alert(e.keyCode);
// }
选中事件
var b = document.getElementById("box");
// b.onselect = function(){
// alert("我被选中了");
// }
b.onchange = function(){
alert("内容改变了");
}
冒泡传播:
事件冒泡
--------事件由最开始的元素接收，然后逐级向上传播到最不具体的那个节点（文档）
// 从最具体的那个元素开始往上传播,到最不具体的那个元素
// 最具体====>document====>window
事件捕获
--------事件由最最不具体的那个节点（文档）元素接收，然后逐级向下广播到最具体的那个元素
增加监听事件:
// 元素对象.addEventListener(参数1,参数2,参数3)
// 参数1:事件的名字(不加on) 不要忘了事件名加 ""
// 参数2:事件触发后调用的函数 可以是一个匿名函数,还可以有名字的函数(直接写函数名就行了)
// 参数3:事件流的类型 值是一个布尔值 可以省略不写,默认为false 冒泡类型
// 如果为true时,是捕获类型 为false 为冒泡类型
//
// 移除监听事件:
// 元素对象.removeEventListener(参数1,参数2,参数3)
// 用法同上
IE里只支持冒泡类型
// 增加监听事件:
// 元素对象.attachEvent(参数1,参数2);
// 参数1:事件 (注意:on+事件名)
// 参数2:事件触发后调用的函数 可以是一个匿名函数,还可以是一个有名字的函数 (直接写函数名)
//
// 移除监听事件:
// 元素对象.detachEvent(参数1,参数2);
兼容
//增加监听事件
function addE(obj,type,fn){
if(obj.addEventListener){ //w3c
obj.addEventListener(type,fn);
}else if(obj.attachEvent){ //ie8
obj.attachEvent("on"+type,fn);
}
}
var oD = document.getElementsByTagName("div")[0];
// addE(oD,"click",function(){
// alert("你好呀，不要睡觉~");
// });
//移除监听事件
function removeE(obj,type,fn){
if(obj.removeEventListener){ //w3c
obj.removeEventListener(type,fn,false);
}else if(obj.detachEvent){ //IE
obj.detachEvent("on" + type,fn);
}
}
addE(oD,"click",box);
function box(){
alert("hello");
}
removeE(oD,"click",box);
总结:
// 1.ie里 脚本模型无法传递event对象,用attchEvent() 来传递event
// 2.关于this 脚本模型里,谁调用某个方法,方法里的this指向的就是谁
// 通过监听的方式,在ie里,this指向的不再是调用它的对象,而是window对象、
非火狐情况:
// 滚轮事件:mousewheel
// 判断滚轮方向及距离 wheelDelta
// 往上滚动一次 +120
// 往下滚动一次 -120
// 火狐情况:
// 滚轮事件用:DOMMouseScroll
// 判断滚轮方向及距离: detail
// 往上滚动一次 -3
// 往下滚动一次 +3
兼容
function getWD(evt){
var e = evt || window.event;
if(e.wheelDelta){ //非火狐
return e.wheelDelta;
}else if(e.detail){ //火狐
return -e.detail * 120;
}
}
W3C:evt.preventDefault();
IE: evt.returnValue = false
returnValue是javascript中html的window对象的属性,目的是返回窗口值
function prevDefault(evt) {
var e = evt || window.event;
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;//ie
}
};
上下文菜单事件：contextmenu
var text = document.getElementById('text');
addEvent(text, 'contextmenu', function (evt) {
var e = evt || window.event;
preDef(e);
var menu = document.getElementById('menu');
menu.style.left = e.clientX + 'px';
menu.style.top = e.clientY + 'px';
menu.style.visibility = 'visible';
addEvent(document, 'click', function () {
document.getElementById('myMenu').style.visibility = 'hidden';
});