js事件
来源:互联网 发布:星星知我心第二部全集 编辑:程序博客网 时间:2024/06/07 01:39
什么是事件
事件就是js和html之间的交互行为(怎么发生的,有可能是页面自动的,也可能是用户操作的).
事件源对象
触发事件的元素(发生在谁身上)
事件处理程序
要处理的程序(发生了什么事)
事件对象
当事件发生的时候,具体发生了哪些信息(如当按键盘的时候按的哪个键或者鼠标光标在页面的哪个位置等等)
事件的分类
- 鼠标事件
onclick
ondbclick
onmousedown
onmouseup
onmousemove
onmouseover
onmouseout
onmouseenter
onmouseleave - 键盘事件
onkeyup
onkeydown
onkeypress - 表单事件
onsubmit
onblur
onfocus
onchange - 页面事件
onload
onbeforeunload
绑定事件
IE使用 : obj.attachEvent(“事件(on)”, “处理程序”) 添加
obj.detachEvent(“事件(on)”,”处理程序”)删除
非IE使用 : obj.addEventListener(“事件(不加on)”, “处理程序”, 布尔值) 添加
obj.removeEventListener(“事件(不加on)”, “处理程序”, 布尔值) 删除
既然这里有区分IE和非IE那么我们又要开始封装这个绑定事件
function onClickListener(obj, type, handler, flg){ //默认情况下flg===false,为冒泡事件 if(flg === undefined){ flg = =false; } if(element.attachEvent){ return element.attachEvent("on"+type+handler,flg); }else if(element.addEventListener){ return element.addEventListener(type, handler, flg); }}function removeOnClickListener(obj,type,handler,flg){ //默认情况下flg===false,为冒泡事件 if(flg === undefined){ flg = =false; } if(element.detachEvent){ return element.detachEvent("on"+type+handler,flg); }else if(element.removeEventListener){ return element.removeEventListener(type, handler, flg); }}
事件对象
IE:window.event
火狐:对象.on事件=function(ev){}
怎么兼容所有浏览器呢?
obj.on事件 = function(ev){ var e = ev || window.event}
鼠标事件对象属性
相对于浏览器位置的:
clientX 当鼠标事件发生的时候,鼠标相对于浏览器X轴的位置。
clientY 当鼠标事件发生的时候,鼠标相对于浏览器Y轴的位置。
相对于文档位置的:
pageX 当鼠标事件发生的时候,鼠标相对于文档X轴的位置。(IE7/8无)
pageY 当鼠标事件发生的时候,鼠标相对于文档Y轴的位置。(IE7/8无)
相对于屏幕位置的:
screenX 当鼠标事件发生的时候,鼠标相对于屏幕X轴的位置。
screenY 当鼠标事件发生的时候,鼠标相对于屏幕Y轴的位置。
相对于事件源的位置:
offsetX 当鼠标事件发生的时候,鼠标相对于事件源X轴的位置。
offsetY 当鼠标事件发生的时候,鼠标相对于事件源Y轴的位置。
event.button:返回一个整数,指示当事件被触发时哪个鼠标按键被点击。0规定鼠标左键,1规定鼠标滚轮,2规定鼠标右键。不过老版本的IE并没有遵守W3C的规范,它的button属性含义如下:1鼠标左键 2鼠标右键 3左右同时按 4滚轮 5左键加滚轮 6右键加滚轮 7三个同时。目前IE11.0版本,无兼容性问题。
键盘事件对象属性
keyCode:获得键盘码。空格:32 回车13 左上右下:37 38 39 40。which属性有兼容性问题。
ctrlKey:判断ctrl键是否被按下,按下是true,反之是false 布尔值。还有shiftKey altKey。
type:用来检测事件的类型。
目标事件源对象
IE使用: 事件对象.srcElement
非IE使用 : 事件对象.target
兼容函数
function target(ev){ var e = ev || window.event; var target = e.target || window.event;}
- JS 事件
- js事件
- JS事件
- js事件
- js事件
- js事件
- js事件
- js 事件
- JS事件
- JS 事件
- JS事件
- JS 事件
- js事件
- JS事件
- js事件
- JS 事件
- JS事件
- JS--事件
- 多线程性能及效率问题
- Maven项目结构
- Activiti进阶(十一)——分配组任务的三种方式
- 单例模式的饿汉式与懒汉式
- Struts2, Spring 和 Hibernate 的理解之我谈
- js事件
- 技术人员日本游学之精益管理
- UVA 10129
- 向量点乘的含义
- hdu 6152 Friend-Graph(拉姆齐定理)
- UVA 10305
- Io 异常: The Network Adapter could not establish the connection解决方案
- TP框架中如何查看PHP信息,例如查找执行哪个php.ini文件
- StringUtils工具类