js事件入门（5）
5.窗口事件
5.1.onload事件
元素加载完成时触发,常用的就是window.onload
window.onload = function(){
//等页面加载完成时执行这里的代码
}
5.1.resize
当浏览器窗口改变的时候触发
window.onresize = function(){
alert(1)
}
6.event对象
6.1.什么是event对象？
event对象代表事件的状态，当事件发生的时候用来记录事件的详细信息，类似于飞机的黑匣子。
在ie和chrome中，事件对象（event）是一个内置的全局对象，必须在事件调用的时候才有值，如果没有事件调用，event没有值，
在firefox中event对象没有被定义，如果一个函数被事件调用，那么这个事件函数中的第一个参数就是event对象，这也是标准浏览器下的处理方式，在非标准下，这种方式不被采用
总结：在非标准下，使用被定义好的event内置对象，在标准下使用事件函数中的第一个参数，假设传入的第一个参数为ev，可以用逻辑或做兼容，var ev = ev || event
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onunload = function(){
var oDiv = document.getElementById('box');
oDiv.onclick = function(ev){
//这里的ev就是event对象
//兼容性处理
var ev = ev || event;
console.log(ev);
}
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
6.2.event对象上的属性 clientX,clientY
clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的垂直坐标。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('box');
document.onmousemove = function(ev){
//event对象
var ev = ev || event;
//innerHtml表示往div里面添加内容
oDiv.innerHTML = "clientX:"+ev.clientX+",clientY:"+ev.clientY;
}
}
</script>
<style type="text/css">
#box{
height: 100px;
background: black;
color: white;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
6.3.综合案例2
综合案例2代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
window.onload = function(){
//获取到box对象
var oDiv = document.getElementById("box");
oDiv.onmousedown = function(ev){
//事件兼容性处理
var ev = ev || event;
var disX = ev.clientX - oDiv.offsetLeft;
var disY = ev.clientY - oDiv.offsetTop;
document.onmousemove = function(ev){
var ev = ev || event;
oDiv.style.left = ev.clientX - disX + "px";
oDiv.style.top = ev.clientY -disY + "px";
}
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
}
return false;
}
}
</script>
<style type="text/css">
#box{
position: absolute;
}
#box img{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="box">
<img src="img/window.png"/>
</div>
</body>
</html>
6.4.event对象上的keycode属性
对于 keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。
```
```
//对比onkeypress，有什么不同？
```
**总结：keycode主要是用来记录用户按下的是哪个键，onkeypress和onkeydown按下时，键盘码不同，常用于游戏中控制方向或者翻页，onkeypress事件在用户按下并放开任何字母数字键时发生。但是系统按钮（例如：箭头键、功能键）无法得到识别。 **
6.5.综合案例3
//通过键盘控制方向
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
//获取到box对象
var oBox = document.getElementById('box');
//定义x y轴的增量
var x = y= 0;
//键盘按下事件
document.onkeydown = function(ev){
//事件兼容
var ev = ev || event;
//上38 下 40 左37 右39
switch(ev.keyCode){
case 38:
y -= 10;
break;
case 40:
y += 10;
break;
case 37:
x -= 10;
break;
case 39:
x += 10;
break;
}
//改变偏移量
oBox.style.left = x + "px";
oBox.style.top = y + "px";
}
}
</script>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
</html>
螺钉课堂视频课程地址：http://edu.nodeing.com
js事件入门（5）的更多相关文章
- js事件入门（2）
2.鼠标事件 鼠标事件就是用户与页面的许多交互时通过鼠标移动或者鼠标点击等触发的事件. 2.1.onmousedown 鼠标按下的时候触发的事件 <!DOCTYPE html> <h ...
- js事件入门（6）
7.事件冒泡机制 7.1.什么是事件冒泡 当一个元素接收到一个事件以后,会将事件传播给它的父级元素,它的负级元素会一层一层往上传播,直到最顶层window,这种事件传播机制叫作事件冒泡. <!D ...
- js事件入门（4）
4.表单事件 表单事件处理主要用来验证表单,可以处理用户在表单上所做的任何操作. 4.1.onsubmit事件 当用户点击submit按钮来提交表单时,就会触发onsubmit事件,如果事件处理程序返 ...
- js事件入门（3）
3.键盘事件 3.1.onkeydown 键盘按下事件 当键盘按下的时候触发 <!DOCTYPE html> <html> <head> <meta char ...
- js事件入门（1）
1.事件相关概念 1.1 什么是事件? 事件是用户在访问页面时执行的操作,也就是用户访问页面时的行为.当浏览器探测到一个事件时,比如鼠标点击或者按键.它可以触发与这个事件相关的JavaScript对象 ...
- Node.js快速入门
Node.js是什么? Node.js是建立在谷歌Chrome的JavaScript引擎(V8引擎)的Web应用程序框架. 它的最新版本是:v0.12.7(在编写本教程时的版本).Node.js在官方 ...
- 第一百一十九节，JavaScript事件入门
JavaScript事件入门 学习要点: 1.事件介绍 2.内联模型 3.脚本模型 4.事件处理函数 JavaScript事件是由访问Web页面的用户引起的一系列操作,例如:用户点击.当用户执行某些操 ...
- Node.js开发入门—HelloWorld再分析
在Node.js开发入门(1)我们用http模块实现了一个简单的HelloWorld站点,这次我们再来细致分析下代码.了解很多其它的细节. 先看看http版本号的HelloWorld代码: 代码就是这 ...
- Vue.js+vue-element搭建属于自己的后台管理模板：Vue.js快速入门（二）
Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js快速入门(二) 前言 上篇文章对Vue.js有了初步理解,接下来我们把Vue.js基础语法快速的过一遍,先混个脸熟留个印象就 ...
随机推荐
- FreeRTOS-为什么关中断之后切换进程？
https://mp.weixin.qq.com/s/S5HBH3RTo0B2irr8sGwDdw 一. 基本问题 FreeRTOS会在关键区即taskENTER_CRITICAL()和tas ...
- jchdl - GSL实例 - Register
https://mp.weixin.qq.com/s/uD5JVlAjTHQus2pnzPrdLg 多个D触发器可以组成一组寄存器. 摘自康华光<电子技术基础 · 数字部分>(第 ...
- Java实现 LeetCode 778 水位上升的泳池中游泳（二分+DFS）
778. 水位上升的泳池中游泳 在一个 N x N 的坐标方格 grid 中,每一个方格的值 grid[i][j] 表示在位置 (i,j) 的平台高度. 现在开始下雨了.当时间为 t 时,此时雨水导致 ...
- Java 第十一届 蓝桥杯 省模拟赛 小明植树（DFS）
小明植树 题目 问题描述 小明和朋友们一起去郊外植树,他们带了一些在自己实验室精心研究出的小树苗. 小明和朋友们一共有 n 个人,他们经过精心挑选,在一块空地上每个人挑选了一个适合植树的位置,总共 n ...
- Java实现蓝桥杯VIP 算法训练 阶乘末尾
试题 算法训练 阶乘末尾 资源限制 时间限制:1.0s 内存限制:256.0MB 问题描述 给定n和len,输出n!末尾len位. 输入格式 一行两个正整数n和len. 输出格式 一行一个字符串,表示 ...
- Java实现 蓝桥杯VIP 算法提高 铺地毯
算法提高 铺地毯 时间限制:1.0s 内存限制:256.0MB 问题描述 为了准备一个学生节,组织者在会场的一片矩形区域(可看做是平面直角坐标 系的第一象限)铺上一些矩形地毯.一共有n 张地毯,编号从 ...
- java实现漏掉的账目明细
某财务部门结账时发现总金额不对头.很可能是从明细上漏掉了某1笔或几笔.如果已知明细账目清单,能通过编程找到漏掉的是哪1笔或几笔吗? 如果有多种可能,则输出所有可能的情况. 我们规定:用户输入的第一行是 ...
- Java实现 蓝桥杯 历届试题 波动数列
问题描述 观察这个数列: 1 3 0 2 -1 1 -2 - 这个数列中后一项总是比前一项增加2或者减少3. 栋栋对这种数列很好奇,他想知道长度为 n 和为 s 而且后一项总是比前一项增加a或者减少b ...
- java实现第六届蓝桥杯生成回文数
生成回文数 所谓回文数就是左右对称的数字,比如: 585,5885,123321- 当然,单个的数字也可以算作是对称的. 小明发现了一种生成回文数的方法: 比如,取数字19,把它与自己的翻转数相加: ...
- 为.netcore助力--WebApiClient正式发布core版本
1 前言 WebApiClient已成熟稳定,发布了WebApiClient.JIT和WebApiClient.AOT两个nuget包,累计近10w次下载.我对它的高可扩展性设计相当满意和自豪,但We ...