萌新整理Java事件

Java事件

一、鼠标事件
1.onclick 鼠标单击事件
2.ondblclick 鼠标双击事件
3.onmousemove鼠标移动事件
4.onmousedown鼠标的按下
5. onmouseup 鼠标的抬起
6. onmouseover 鼠标的移入事件
7. onmouseout鼠标的移出事件
8.oncontextmenu 右键菜单 return false
二、键盘事件
1.onkeydown 键盘按键按下
2.onkeyup 键盘按键抬起
3.keyCode 获取键盘值对应的ASCII值
4.e.ctrlKey 判断ctrl按键是否被按下
5.e.shiftKey 判断shift健是否被按下
三、框架事件
1.window.onload 当用户进入或离开页面时就会触发 onload 和onUnload 事件
2.onerror
3.onscroll
document.body.scrollTop
document.documentElement.scrollTop
注意： scrollTop 获取body滚动高度时候使用 document.docementElement.scrollTop 别 document.body.scrollTop 这样获取的都是0,因为兼容问题
四、表单事件
1.onsubmit
onSubmit 用于在提交表单之前验证所有的表单域

2.onchange
用户一旦改变了域的内容，checkEmail() 函数就会被调用

3. .reset()重置
8. .action=’./html’ 指定表单提交
bt[0].οnclick=function(){
// 指定表单的提交地址
f_first.action=’./购物车.html’;
// 表单提交方法 表单的对象.submit()方法就能跳转到指定的action位置
f_first.submit();
}
9. .submit();
10. onblur 失去焦点事件
11. onfocus 获取焦点事件
12. onreset 表单重置事件
五、事件对象和事件对象属性
1. 事件绑定
元素节点.on + 事件类型 = 匿名函数
系统会在事件绑定一旦完成的时候,生成一个事件对象
2. function a(){

alert(arguments[0]) //发现有参数
}
aa.οnclick=a
触发事件的时候,系统会自动去调用绑定的函数a,并且会默认将事件对象当第一个参数传入进去
function a(ev){
//形参这种形式i8以下不兼容
var e = ev || window.event //处理兼容问题
}
六、target 目标对象|触发对象
这个事件是由谁而引起的
注意I8以下不兼容需要 window.event.srcElement

oUl.οnclick=function(ev){
var e = ev || window.event;
var target = e.target || window.event.srcElement
alert(this.tagName)
alert(target.innerHTML)
}
七、阻止事件冒泡(事件流)
1.兼容(IE8火狐，谷歌)
var e = ent || event;
e.cancelBubble = true;
2.阻止冒泡事件（IE9，火狐，谷歌）
e.stopPropagation()
3.function stop1(e){
//自定义处理组织事件冒泡兼容问题
if(e.stopPropagation){
e.stopPropagation
}else{
e.cancelBubble = true;
}
}
八、事件委托
传统绑定事件方式
1.每一个事件都有事件驱动函数，函数在js中是以对象的形式存储到内存中
如果遍历每一个标签分别绑定事件函数，就会在内存中存在多个功能类似的函数对象
造成内存浪费
2.因为是遍历绑定事件，需要执行for
for在执行的时候会延迟dom就绪时间
事件委托:

1.在点击li的完毕后由于事件冒泡，会触发ul的点击事件
2.如果只给ul绑定点击事件，那么点击li的时候触发ul的点击事件
3.不会for循环，降低DOM的就绪时间
4.不会再内存中存在多个功能相似的函数对象，降低内存的占用空间
5.如果给document绑定点击事件，那么可以通过这个事件来管理网页中所有的该类型事件
var ul = document.querySelectorAll(‘ul’)[0];

ul.onclick=function(ent){

	var tag = ent.target;
	console.log(tag)
	if(tag.nodeName.toLowerCase() == 'li'){
		tag.style.backgroundColor='pink';
	}