The window events
5.1.onload event
When loaded trigger element, is used window.onload
window.onload = function(){
//等页面加载完成时执行这里的代码
}5.1.resize
When the browser window to change the trigger
window.onresize = function(){
alert(1)
}6.event objects
6.1. What is the event object?
Status event object represents the event, when the event happened detail records for the event, similar to aircraft black box.
In ie and chrome, the event object (event) is a built-in global objects, you must have a value at the time of the event called, if not call the event, event no value,
In firefox the event object is not defined, if a function is called an event, then the event function in the first parameter is the event object, which is handled under the standard browser in a non-standard, this approach is not use
Summary: In non-standard, using the built-in event object is defined using the first parameter of the event under standard function, assuming the first argument for EV, or can be made compatible with the logic, 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>ClientX property on 6.2.event objects, clientY
clientX event property is triggered when the event returns to the horizontal coordinates of the mouse pointer to the browser page (or client area) of. clientY event property is triggered when the event returns to the vertical coordinates of the mouse pointer to the browser page (client area) of.
<!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. Integrated Case 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>keycode attribute on the object 6.4.event
For keypress events, the property is declared Unicode character code is generated typed keys. For keydown and keyup event, which specifies the virtual keyboard is struck code keys. Virtual keyboard and the keyboard layout code may be used in relation.
<!DOCTYPE html>
// contrast onkeypress, what is the difference?
<! DOCTYPE html>
**总结：keycode主要是用来记录用户按下的是哪个键，onkeypress和onkeydown按下时，键盘码不同，常用于游戏中控制方向或者翻页，onkeypress事件在用户按下并放开任何字母数字键时发生。但是系统按钮（例如：箭头键、功能键）无法得到识别。 **
###6.5.综合案例3By controlling the direction of the keyboard //
<! DOCTYPE html>