JavaScript学习-事件

浏览器与用户操作交互产生事件。
Js有三种事件模型：内联、脚本、Dom2。

内联模型

事件处理函数作为HTML一个标签的属性存在。

实例一：

<input type="button" value = "按钮" onclick="alert(123);"/>

实例二：

<input type="button" value = "按钮" onclick="box();"/>

function box(){
    alert(123);
}

内联模型现在用的很少了。

脚本模型

将HTML与JS进行分离。
HTML中不再包含JS代码：

<input type="button" value ="按钮"/>

JS代码：

// HTML加载完成之后调用
window.onload = function(){
    var input = document.getElementsByTagName('input')[0];
    input.onclick = function(){
        alert(123);
    }
}

// HTML加载完成之后调用
window.onload = function(){
    var input = document.getElementsByTagName('input')[0];
    input.onclick = box;// 注意这里直接是函数名，不能加括号。
}
function box(){
    alert(123);
}

// HTML加载完成之后调用
window.onload = function(){
    var input = document.getElementsByTagName('input')[0];
    input.onclick = box;
    function box(){
        alert(123);
    }
}

事件处理函数

JS可以处理的事件类型为：鼠标事件、键盘事件、HTML事件。