js event事件

来源：互联网发布：淘宝海外全球站注册编辑：程序博客网时间：2024/06/05 09:16

1.js事件原理

在某个业务场景下的动作触发运行的逻辑流程

事件源：触发当前动作的源头组件（元素），可以是当前页面的任意元素（document、div、input等）

2. js事件绑定方式

(1)标签内部通过事件赋值方式绑定;

(2)js中通过标签对象动态给事件对象赋值方法;

(3)js中在scipt标签中动态绑定（谷歌不兼容，不常用）

3. 页面加载关闭事件：

onload：页面加载事件，页面加载完后再执行（包括外部文件、css样式等）

onunload：刷新或关闭时调用（火狐、谷歌不支持）

onbeforeunload：刷新或关闭时调用（火狐、谷歌不支持）

4. 鼠标事件

onclick(单击)、dblclick（双击）

onmouseenter（鼠标进入）、onmouseleave（鼠标退出）：不涉及子元素操作

onmouseover（鼠标进入）、onmouseout（鼠标退出）：涉及到子元素操作

onmousedown、onmouseup、onmousemove（鼠标移动）

oncontextmenu（右击菜单事件）

图片跟随鼠标移动

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片跟随鼠标移动</title>
<style type="text/css">
#Img {
position: absolute;
top: 0px;
left: 0px;
}
#div_Img {
background-color: skyblue;
width: 1177px;
height: 570px;
}
</style>
<script type="text/javascript">
window.onload = Main;
//全局坐标变量
var x = "";
var y = "";
//定位图片位置
function GetMouse(oEvent) {
x = oEvent.clientX;
y = oEvent.clientY;
document.getElementById("Img").style.left = (parseInt(x) - 100) + "px";
document.getElementById("Img").style.top = (parseInt(y)-100) + "px";
}
function Main() {
var ele = document.getElementById("div_Img");
//注册鼠标移动事件
ele.onmousemove = function() { GetMouse(event); }
}
</script>
</head>
<body>
<div id="div_Img">
<img src="img/logo.v2.png" id="Img" />
</div>
</body>
</html>

5.键盘事件

onkeypress：按下键触发，不能识别功能键和方向键

onkeydown：按下所有键都能触发

onkeyup：释放任何按键触发

6. 相关组件事件

onfocus（获取焦点）、onblur（失去焦点）

onchange（内容改变事件）

onsubmit（表单提交事件）

7. js事件对象event

•事件对象，由当前事件触发后，window对象自动产生的

这个对象包含了当前事件的大部分信息数据

•获取事件对象兼容问题：

（1）非参数传递方式：window.event 兼容IE低高版本、谷歌

（2）参数传递方式：function(event){} 兼容IE9以上、谷歌、火狐

兼容写法：function(event){var e =event||window.event}

•事件相关对象属性

srcElement：事件源元素

几个坐标属性：

clientX、clientY：相对于浏览器边界鼠标xy偏移量

screenX、screenY：相对于屏幕鼠标xy偏移量

pageX、pageY：相对于当前页面鼠标xy偏移量（设计滚动页面）

offsetX、offsetY：相对于当前事件容器组件内部的xy偏移量（不包括border，包括padding）

8.offsetWidth和offsetHeight:用于获取当前盒子尺寸

offsetWidth= width + border + padding

offsetHeight= height + border + padding

offsetLeft和offsetTop:用于获取当前盒子左边距和上边距

相对标准判断方式：如果父级组件没有定位（absolute、relative、fixed）的组件，left/top指的是body边距,如果有，则就是离最近定位父级组件的边距。

9. offsetWidth/offsetHeight和style.width/style.height区别

style的方式只能获取行内样式设置的值（局限性比较大）

style的方式可以赋值取值，offsetWidth/offsetHeight只能取值

style的方式得到的是带px单位，offsetWidth/offsetHeight获取的是整数值

style的方式获取的只是内容区域大小，offsetWidth/offsetHeight包括（边框+内容+padding）

offsetLeft/offsetTop和style.left/style.top区别

style的方式只能获取行内样式设置的值（局限性比较大）

style.left/style.top在自己盒子有定位情况下才有效，offsetLeft/offsetTop无视自己盒子定位

offsetParent和parentNode

offsetParent指的是有定位的父级元素，不一定是直属父级

如果所有父级都没有定位，则获取的就是body

parentNode指的是直属父级元素

阅读全文

0 0