JavaScript事件笔记 | 青训营

在JavaScript中，一个事件包括三个部分：

• 事件主角：是按钮，div元素或是其他元素。
• 事件类型：点击，移动或是其他。
• 事件过程：发生了什么。

常见的JavaScript事件共五种：鼠标事件，键盘事件，表单事件，编辑事件，页面事件。

鼠标事件：

鼠标单击：

onclick

我们可以为任何元素添加鼠标单击事件.

Dom.onclick = function(){};

鼠标移入和移出：

onmouseover、onmouseout

当用户将鼠标移入到某个元素上时，就会触发onmouseover事件；而将鼠标移出某个元素时，就会触发onmouseout事件。

鼠标按下和松开：

onmousedown、onmouseup

当用户按下鼠标时，会触发onmousedown事件；当用户松开鼠标时，则会触发onmouseup事件。onmousedown表示鼠标按下的一瞬间所触发的事件，而onmouseup表示鼠标松开的一瞬间触发的事件。

键盘事件：

onkeydown,onkeyup

表单事件：

onfocus、onblur、onselect、onchange

onfocus表示获取焦点时触发的事件，而onblur表示失去焦点时触发的事件。

具有焦点特点的元素有：表单元素（单选框，复选框，单行文本框，多行文本框，下拉列表）、超链接。

//获取元素对象
var oSearch = document.getElementbyId("search");

//获取焦点
oSearch.onfocus = function()
{
    if(this.value == "百度一下，你就知道")
    {
        this.value="";
    }
};
//失去焦点
oSearch.onblur = function()
{
    if(this.value == "")
    {
        this.value="百度一下，你就知道";
    }
};

focus()方法，仅仅让元素获取焦点，而onfocus是一个属性，用于事件操作。

onselect：当我们选中“单行文本框”或“多行文本框”中的内容时，就会触发onselect事件。select()方法用于全选文本。

onchange：onchange事件常用于“具有多个选项的表单元素”的操作

• 单选框选择某一项是触发。
• 复选框选择某一项时触发。
• 下拉列表选择某一项时触发。

编辑事件：

oncopy、onselect、oncontextmenu。

可以使用oncopy事件来防止页面内容被复制：

document.body.oncopy = function()
{
    return false;
}

可以使用onselectstart事件来防止页面内容被选取。

document.body.onselectstart = function()
{
    return false;
}

可以使用oncontextmenu事件来禁止使用鼠标右键。

document.oncontextmenu = function()
{
    return false;
}

页面事件：

onload、onbeforeload。

onload表示文档加载完成后再执行的一个事件。

window.onload = function(){
    ......
}

onbeforeload表示页面离开前触发的一个事件。