web前端学习

概述

JavaScript允许对DOM事件做出反应，从而大大增强网页的互动功能。 DOM事件需要触发之后才能发生，事件发生之后会产生事件流，事件流的顺序有事件冒泡与捕获。 JS事件详解

1.鼠标事件

鼠标相关事件

事件	描述
onclick	鼠标单击事件
ondblclick	鼠标双击事件
mouseenter	鼠标移入事件 (进入子节点不会触发)
onmouseover	鼠标移入事件 (进入子节点会再次触发)
mouseleave	鼠标移出事件 (离开父节点不会触发)
onmouseout	鼠标移出事件 (离开父节点也会触发)
onmouseup	鼠标松开事件
onmousedown	鼠标按下事件
onmousemove	鼠标移动事件

2.键盘事件

键盘相关事件

事件	描述
onkeydown	键盘按下
onkeyup	键盘松开
onkeypress	键盘按下 (按下 Ctrl、Alt、Shift等无值键，不会触发。对有值的键，按下先触发keydown，再触发keypress)

3.表单事件

表单相关事件

事件	描述
onfocus	获取焦点时触发
onblur	失去焦点时触发
onselect	选中“单行文本框”或“多行文本框”中的内容时
onselectstart	开始一个新的选择时
oninput	输入时触发
onchange	输入完失去焦点或单选、多选、下拉等

4.编辑事件

编辑相关事件

事件	描述
oncopy	复制（拷贝）时触发
onselect	页面内容被选取时触发
oncontextmenu	按下鼠标右键时触发

5.页面事件

页面相关事件

事件	描述
onload	文档加载完成后触发
onunload	离开页面触发
onbeforeunload	离开页面之前触发

6.事件执行

触发DOM事件的形式有三种: 1）在元素头标签内触发DOM事件： 事件名称="调用函数名及实参"; 2）直接在JavaScript文件的页面加载事件中定义触发DOM事件： DOM元素.事件名称 = function(){ 事件触发时的响应; } 常见的DOM事件有框架/对象事件(页面加载事件onload、离开页面onunload)、鼠标事件、表单事件等。 3）addEventListener() 方法用于向指定元素添加监听事件。 DOM元素.addEventListener(事件名称,function(){ 事件触发时的响应; }) 同一元素目标可重复添加，不会覆盖之前相同事件。 removeEventListener() 方法来移除事件。

方式一：

方式二：

方式三：

方式一：

	
<button onclick="click_event()">点击事件</button>

	
function click_event(){
	alert("这是点击事件的弹窗！");
}

方式二：

	
<button id="event_btn2">点击事件</button>

	
var event_btn2 = document.getElementById("event_btn2");
event_btn2.onclick = function(){
	alert("这是方式二点击事件的弹窗！");
}

方式三：

	
<button id="event_btn3">点击事件</button>

	
var event_btn3 = document.getElementById("event_btn3");
event_btn3.addEventListener("click",function(){
	alert("这是方式三点击事件的弹窗！");
})