1.event对象
document.onmouseup = function(evt){
var e = evt || window.event // 这里是为了兼容w3c和IE，因为ie有自己自定义的event
}
2.鼠标左中右键
1.event.button
window.onload = function() { document.onmousedown= function(event) { if (getButton(event) == 0) alert('左键'); if (getButton(event) == 1) alert('中键'); if (getButton(event) == 2) alert('右键'); } } function getButton(event) { var e = event || window.event; if (event) { return e.button; } else if (window.event) { // IE switch (e.button) { case 1: return 0; case 4: return 1; case 0: // 360 return 2 } } }
2.键盘事件
keydown: 按下任意键立即触发
keyup: 弹起任意键立即触发
keypress: 按下字符键触发（1,2,3，a,b,c等等）
keycode: 键盘上的任意键，返回的是ASCLL的小写字母
charcode： 只有在发生keypress事件的时候才包含值，返回的是那个键所代表的字符的ASCLL编码
3.冒泡
<body>
<div id="box">
<input type="" name="" value="按钮">
</div>
<script type="text/javascript">
document.onclick = function(){
alert('document');
}
document.body.onclick = function(){
alert('body');
}
document.getElementById('box').onclick = function(){
alert('div');
}
document.getElementsByTagName('input')[0].onclick = function(event){
var e = event || window.event;
alert('input');
e.stopPropagation(); // W3C取消冒泡
e.cancelBubble = true; // IE取消冒泡方式
}
</script>
</body>
4.检查入口函数是否重复
alert(window.onload)
5.w3c事件处理函数
1.addEventListener(method,function,bool) bool为false时为捕获，true时为冒泡
2.removeEventListener(method,function,bool)
3.相同函数屏蔽问题
<!DOCTYPE html>
<html>
<head>
<title>fdfda</title>
<meta charset="utf-8">
</head>
<body>
<div id="box">
<input type="" name="" value="¹þ¹þ">
</div>
<script type="text/javascript">
window.onload = function(){
window.addEventListener('click',init,false);
window.addEventListener('click',init,false);
window.addEventListener('click',init,false);
}
function init(){
alert('hahah'); // 只弹出一次
}
4.切换
<div id="box">ggggg</div>
<script type="text/javascript">
window.addEventListener('load',function(){
var box = document.getElementById('box');
box.addEventListener('click',change1,false)
},false)
function change1(){
this.innerHTML = '哈哈哈哈';
this.addEventListener('click',change2,false);
this.removeEventListener('click',change1,false);
}
function change2(){
this.innerHTML = '嘻嘻嘻嘻';
this.addEventListener('click',change1,false);
this.removeEventListener('click',change2,false);
}
</script>
6.IE事件的处理函数
1.attachEvent(method,function), detachEvent(method,function)
注意： IE不支持捕获，只支持冒泡，IE添加时间不能屏蔽重复的函数，IE中的this指向的是window而不是dom对象，在传统时间上，IE是无法接收到event对象的，但使用了attachEvent却可以，但有些区别
<!DOCTYPE html>
<html>
<head>
<title>fdfda</title>
<meta charset="utf-8">
</head>
<body>
<div id="box">
<input type="" name="" value="¹þ¹þ">
</div>
<script type="text/javascript">
window.onload = function(){
window.addEventListener('click',init,false);
window.addEventListener('click',init,false);
}
function init(){
alert('hahah'); // 弹出两次，无法屏蔽
}
// 在IE中
window.attachEvent('onload',function(){ var box = document.getElementById('box'); box.attachEvent('onclick',function(){ // alert(this === box) // 返回false alert(this === window) // 返回true // ps: 可以用call()把this对象传过去 }) })
7.跨浏览器添加事件和移除事件
<div id="box">ggggg</div>
<script type="text/javascript">
// 添加事件
function addEvent(obj,type,fn){
if(obj.addEventListener){
obj.addEventListener(type,fn,false)
}else if(obj.attachEvent){
obj.attachEvent('on'+type,fn)
}
}
// 移除事件
function removeEvent(obj,type,fn){
if(obj.removeEventListener){
obj.removeEventListener(type,fn,false)
}else if(obj.detachEvent){
obj.detachEvent('on'+type,fn)
}
}
// 跨浏览器获取目标对象
function getTarget(evt){
if(evt.taget){ // w3c
return evt.getTarget
}else if(window.event.srcElement){
return window.event.srcElement;
}
}
addEvent(window,'load',function(){
var box = document.getElementById('box');
addEvent(box,'click',change1)
})
function change1(evt){
var that = getTarget(evt)
that.innerHTML = '哈哈哈哈';
addEvent(that,'click',change2);
removeEvent(that,'click',change1);
}
function change2(evt){
var that = getTarget(evt)
that.innerHTML = '嘻嘻嘻嘻';
addEvent(that,'click',change1);
removeEvent(that,'click',change2);
}
</script>
8.上下文菜单事件（contextmenu）
ps:contextmenu事件很常用，这直接导致浏览器兼容性较为稳定
<textarea style=" 200;height: 200" id="text"></textarea>
<ul id="menu">
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
</ul>
<javascript>
addEvent(window,'load',function(){ var text = document.getElementById('text'); addEvent(text,'contextmenu',function(evt){ evt.preventDefault(); var menu = document.getElementById('menu'); var e = evt || window.event; menu.style.display = 'block'; menu.style.left = e.clientX+'px'; menu.style.top = e.clientY+'px'; addEvent(document,'click',function(){ menu.style.display = 'none'; }) }) }) function addEvent(obj,type,fn){ if(obj.addEventListener){ obj.addEventListener(type,fn,false) }else if(obj.attachEvent){ obj.attachEvent('on'+type,fn) } }
<javascript>
9.卸载前事件（当鼠标离开时进行提示 ）
<a href="http://www.baidu.com">baidu</a>
<script type="text/javascript">
addEvent(window, 'beforeunload', function(evt) {
preDef(evt);
})
function addEvent(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false)
} else if (obj.attachEvent) {
obj.attachEvent('on' + type, fn)
}
}
function preDef(evt){
console.log('aaa');
var e = event || window.event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
console.log(e.returnValue);
}
}
</script>
10. 关于重复提交表单的问题（模拟延迟）
disabled = true （只限于按钮放置重复提交）