js常用事件
为了便于使读者更好地运用js事件,就把常用事件大致分为以下几种:
a. 表单元素事件,在表单元素中生效
onfocus ------获取焦点
onblur -------失去焦点
onsubmit ------ 点击提交按钮
onreset --------重新点击鼠标按键
onchange ------框内容改变时,该事件常用于输入字段的验证,用于input输入
eg.离开输入框时,value值转换为大写
x.value=x.value.toUpperCase();
b. 键盘事件:
onkeydown ------键盘按下
onkeyup ---------松开键盘
onkeypress ------按下或者按住键盘
键盘码:
document.onkeydown = function (ev) {
ev = ev || window.event;
console.log(ev.keyCode);
}
组合键盘 ctrl+c
if (ev.ctrlkey && ev.keyCode == 67) {
alert("组合键ctrl+C");
//执行对应的事件
}
c.点击事件
onclick -----单击事件
onblclick -----双击事件
d. 鼠标事件
onmouseover------鼠标移上
onmouseout ------鼠标移出
注意: onmouseover onmouseout事件会出现事件冒泡(图片闪动现象)
relatedTarget 事件属性返回与事件的目标节点相关的节点。
对于 mouseover 事件来说,该属性是鼠标指针移到目标节点上时所离开的那个节点。
对于 mouseout 事件来说,该属性是离开目标时,鼠标指针进入的节点。
对于其他类型的事件来说,这个属性没有用。
解决办法:
方法一:
document.getElementById('boximg').onmouseover = function(ev){
event = ev || window.event;
// relatedTarget获取鼠标源
var frm = event.relatedTarget || event.fromElement;
while(frm){
if (frm == this) {
return;
}
frm = frm.parentNode;
console.log('hahah');
}
}
document.getElementById('boximg').onmouseout = function(ev){
event = ev || window.event;
// console.log('leave');
var to = event.relatedTarget || event.toElement;
while(to){
if (to == this) {
return false;
}
to = to.parentNode;
console.log(to.nodeName);
}
}
方法二:onmouseenter onmouseleave 不支持事件冒泡
因此,把onmouseover onmouseout 替换为对应的 onmouseenter onmouseleave 事件
onmousedown -----按下鼠标时触发
onmouseup -------松开鼠标时触发
onmousemove-----鼠标移动
e. 窗口事件,只有在body和frameset元素中才有效
onload ----用户进入页面;事件可用于检查访客的浏览器类型和版本,以便基于这些信息来加载不同版本的网页。
onunload ----用户离开页面
f. 其他:
onresize -----窗口或者框架被重新定义尺寸时触发
jquery常用的事件是在js事件的基础上去掉on即可,例如:onclick 与 click()事件 对应;onsubmit 与 submit() 事件对应等;记住常用的js事件,则jquery事件也差不多记一般了…^-^
希望可以帮助大家~~
最新文章
- cin判断读取结束 C++语言
- Hexo建博小结
- 101个LINQ示例,包含几乎全部操作
- android 项目学习随笔八(xUtils的BitmapUtils模块)
- POJ 2251 Dungeon Master --- 三维BFS(用BFS求最短路)
- ArrayList和LinkedList遍历方式及性能对比分析
- CentOS学习笔记—启动、ROOT密码
- Modules-nodejs
- (转)在iOS中使用icon font
- 海美迪Q系列视频文明书
- 避免uncaughtException错误引起node.js进程崩溃
- 10、Typescript-类的基本用法
- HBase、MongoDB、cassandra比较
- spring扩展点总结
- 20155324 2016-2017-2 《Java程序设计》第2周学习总结
- 深度残差网络(DRN)ResNet网络原理
- Scala集合(二)
- 将虚拟网络连接到 ExpressRoute 线路
- Android targetSdkVersion 原理
- Xamarin for VS 4.0.1.145 Stable版免费完整破解补丁
热门文章
- 各浏览器下使用 OBJECT 元素和 EMBED 元素嵌入 Flash 存在差异
- SonarQube代码质量管理工具安装与使用(sonarqube5.1.2 + sonar-runner-dist-2.4 + MySQL5.x)
- python中的zip、map、reduce 、lambda函数的使用。
- 深度学习Bible学习笔记:第二、三章 线性代数 概率与信息论
- pyhon----模块导入
- (六)cxf处理一些Map等复杂类型
- 【转】ssh服务器启动和客户端常用操作
- C#中IEnumerable、ICollection、IList、IQueryable 、IQueryable 、List之间的区别
- ctsc2017
- Storm通信机制(了解)