JavaScript 可以处理的事件类型有很多，

常见的有UI事件、焦点事件、鼠标事件、滚轮事件、文本事件、键盘事件。

还有专门为触摸设备和移动设备准备的触摸事件、手势事件、屏幕方向改变等。

重点掌握的事件有：

1.load
2.scroll
3.resize
4.click
5.mouseover
6.mouseout

一. `UI`事件

1.1 `onload`事件

load事件会在页面或图像加载完成立即执行。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
//方法1：给window的onload属性设置函数。建议使用这种
window.onload = function () {    // 函数在页面执行完毕之后自动执行。
    alert("页面加载完毕")
};
</script>
</head >
<!--方法2： HTML事件处理： 给body 的onload属性直接设置 JavaScript代码， 也可以调用函数-->
<body onload="alert('你好')">:
</body>
</html>

1.2 `onunload`事件

onunload事件在用户退出页面时发生，当页面完全卸载后在window上面触发，或当框架集卸载后在框架集上触发。
只要用户从一个页面切换到另一个页面就会触发该事件
仅IE支持。所以实际较少使用。

<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onunload = function () {    //像这种事件注册性质的代码一般写在head中比较好。
    alert("你要抛弃我了么？");
}
</script>
<body>
<a href="http://www.baidu.com">百度一下吧</a>
</body>
</head >

1.3 `onresize`事件

当浏览器窗口被调整到一个新的高度或宽度时，就会触发 resize 事件。

这个事件在window（窗口）上面触发。所以也可以在body元素中使用 onresize 属性来指定事件处理程序

<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onresize = function () {
    alert("窗口发生了变化")
}
</script>
</head>

当窗口发生变化的时候，可以获取浏览器新的可视宽和高

<script type="text/javascript">
window.onresize = function () {
    //获取兼容模式下的可视宽和高
    //window.innerWidth ie浏览器不支持。document.documentElement.clientWidth ;所有的浏览器都支持
    var width = window.innerWidth || document.documentElement.clientWidth ;
    var height = window.innerHeight || document.documentElement.clientHeight;
    alert("窗口发生了变化\n" + "宽：" + width + "\n高：" + height);
}
</script>

1.4 `onscroll`事件

onscroll事件，当滚动条滚动式触发。事件在window上面或任意元素上面都可以触发。

由于滚动过程中，会重复多次调用，所以，处理逻辑和代码不能过于复杂，否则会影响用户滚动效果。

<script type="text/javascript">
window.onscroll = function () {
    console.log("开始滚动...");
    //获取滚动距离。
    //document.body.scrollTop: 只支持chorme，火狐和ie不支持， document.documentElement.scrollTop ie和火狐支持 chrome不支持
    //跨浏览器获得滚动的距离
    console.log(document.documentElement.scrollTop || document.body.scrollTop);
}
//如果事件绑定在普通的元素身上，可以直接通过这个元素的`scrollTop`属性来获取。
</script>

二. 焦点事件

焦点事件会在页面元素获得或失去焦点时触发。

利用这些事件并与 document.hasFocus() 方法及document.activeElement 属性配合，可以知晓用户在页面上的行踪。

主要有4常用焦点事件。

2.1 `onfocus`(获得焦点)事件

当元素获得焦点时触发。这个事件可以发生在任何的元素上。

而且这个事件不会冒泡( 也就是不会再往上层传递 )

<body>
<div>
<input type="text" name="user">
</div>
<p>上面的文本框获得焦点后会我会变成红色</p>
<script type="text/javascript">
var p1 = document.getElementsByTagName("p")[0];
var textInput = document.getElementsByTagName("input")[0];
textInput.onfocus = function () {
    p1.style.color = "red";
}
var div1 = document.getElementsByTagName("div")[0];
    //当div中input获取焦点后，并会冒泡到上层div，所以这个函数不会执行。
    div1.onfocus = function () {
    div1.style.backgroundColor = "#000";
}
</script>
</body>

2.2 `onblur`(失去焦点)事件

当元素失去焦点是触发。和onfucs对应。

这个事件也不冒泡

<body>
<div>
<input type="text" name="user">
</div>
<p>上面的文本框获得焦点后会我会变成红色,失去焦点会变成蓝色</p>
<script type="text/javascript">
var p1 = document.getElementsByTagName("p")[0];
var textInput = document.getElementsByTagName("input")[0];
textInput.onfocus = function () {
    p1.style.color = "red";
}
//失去焦点事件
textInput.onblur = function () {
    p1.style.color = "blue";
}
</script>
</body>

2.3 `onfocusin和onfocusout`

onfocusin是onfoucs的冒泡版本，onfocusout是onblur的冒泡版本。

三. 鼠标事件

3.1 `onclick`事件

鼠标单击事件，一般是鼠标左键。单按下鼠标左键或按下回车后触发

任何的元素都支持点击事件

3.2 `ondblclick`事件

鼠标双击事件

<body>
<div>点我们啊</div>
<script type="text/javascript">
var div1 = document.getElementsByTagName("div")[0];
div1.ondblclick = function () {
    alert("你双击了我，我很开心");
}
</script>
</body>

3.3 `onmousedown`事件

当用户 按下任意鼠标按钮 时触发。不能通过键盘触发

<body>
<div>点我们啊</div>
<script type="text/javascript">
var div1 = document.getElementsByTagName("div")[0];
div1.onmousedown = function () {
    alert("你按下鼠标键，你想干吗");
}
</script>
</body>

3.4 `onmouseup`事件

用户释放鼠标按钮时触发

<body>
<div>点我啊</div>
<script type="text/javascript">
var div1 = document.getElementsByTagName("div")[0];
div1.onmouseup = function () {
    alert("你松开了鼠标键，你想干吗");
}
</script>
</body>

3.5 `onmouseover`和`onmouseout`事件

onmouseover当鼠标移动到一个元素的上方时触发。

onmouseout当鼠标从一个元素的上方移走的时候触发。

这两个事件均冒泡。

注意:

从A元素的区域移入A元素的子元素的区域或者从A元素的子元素的区域移入A元素的区域都会同时触发onmouseover和onmouseout

<body>
<div>鼠标放上来我要变色</div>
<script type="text/javascript">
var div1 = document.getElementsByTagName("div")[0];
//当鼠标移动到div的上方
div1.onmouseover = function () {
    div1.style.backgroundColor = "blue";
}
//当鼠标从div的上方移走
div1.onmouseout = function () {
    div1.style.backgroundColor = "white";
}
</script>
</body>

3.6 `onmouseenter`和`onmouseleave`事件

onmouseenter：这个事件不冒泡。效果同onmouseover
onmouseleave ：这个事件不冒泡，效果同onmouseout

注意：

在A元素的区域和A元素的子元素的区域之间切换的时，不会触发onmouseenter和onmouseleave。这个与onmouseover和onmouseout不同

3.7 `onmousemove`事件

当鼠标在元素内部移动时触发，这个事件会重复触发。

注意：

即使没用onmousedown事件，也会触发onmousemove事件。

四. 键盘事件

有三个键盘事件：

keydown：当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件。(keydown监听到的字符不区分大小写)
keypress：当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件。(keypress监听到的字符区分大小写)
keyup：当用户释放键盘上的键时触发。

<body>
<div><input type="text" value="鼠标放上来我要变色"></input></div>
<script type="text/javascript">
var div1 = document.getElementsByTagName("div")[0];
/*div1.onkeydown = function () {
    console.log("你按下了任意键");
}*/
div1.onkeypress = function () {
    console.log("你按下了字符键");
}
div1.onkeyup = function () {
    console.log('你松开了键盘');
}
</script>
</body>

获取按下的具体键：

<body>
<div>
<input type="text" value="鼠标放上来我要变色"></input>
</div>
<script type="text/javascript">
var div1 = document.getElementsByTagName("div")[0];
//在键盘上每个键都有一个keyCode,可以通过如下方法获取每个键对应的keyCode
div1.onkeypress = function(e) {
    alert(e.keyCode);
}
// 判断是否按下alt键、shift键、ctrl键
/*div1.onkeydown = function (e) {
if(e.altKey){
    alert("alt");
}else if(e.shiftKey){
    alert("shift");
}else if(e.ctrlKey){
    alert("ctrl")
}
}*/
//判断是否同时按下了alt和ctrl键
div1.onkeydown= function(e){
    if(e.altKey&& e.ctrlKey){
        alert("alt和ctrl同时按下");
    }
}
</script>
</body>

3.常用事件类型

一. `UI`事件

1.1 `onload`事件

1.2 `onunload`事件

1.3 `onresize`事件

1.4 `onscroll`事件

二. 焦点事件

2.1 `onfocus`(获得焦点)事件

2.2 `onblur`(失去焦点)事件

2.3 `onfocusin和onfocusout`

三. 鼠标事件

3.1 `onclick`事件

3.2 `ondblclick`事件

3.3 `onmousedown`事件

3.4 `onmouseup`事件

3.5 `onmouseover`和`onmouseout`事件

注意:

3.6 `onmouseenter`和`onmouseleave`事件

3.7 `onmousemove`事件

四. 键盘事件

results matching ""

No results matching ""

一. UI事件

1.1 onload事件

1.2 onunload事件

1.3 onresize事件

1.4 onscroll事件

二. 焦点事件

2.1 onfocus(获得焦点)事件

2.2 onblur(失去焦点)事件

2.3 onfocusin和onfocusout

三. 鼠标事件

3.1 onclick事件

3.2 ondblclick事件

3.3 onmousedown事件

3.4 onmouseup事件

3.5 onmouseover和onmouseout事件

注意:

3.6 onmouseenter和onmouseleave事件

3.7 onmousemove事件

四. 键盘事件

results matching ""

No results matching ""

一. `UI`事件

1.1 `onload`事件

1.2 `onunload`事件

1.3 `onresize`事件

1.4 `onscroll`事件

2.1 `onfocus`(获得焦点)事件

2.2 `onblur`(失去焦点)事件

2.3 `onfocusin和onfocusout`

3.1 `onclick`事件

3.2 `ondblclick`事件

3.3 `onmousedown`事件

3.4 `onmouseup`事件

3.5 `onmouseover`和`onmouseout`事件

3.6 `onmouseenter`和`onmouseleave`事件

3.7 `onmousemove`事件