响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 例5-1事件处理

代码

doctype html>
<html>
<head>
<meta charset="utf-8">
<title>事件处理title>
head>

<body>
<input id="btn" type="button" name="btn" value="提交" />
<script>
    var oBtn = document.getElementById('btn');
    oBtn.onclick = function(){
        alert('哎呀!点到我了!');
    };script>
body>
html>

上述代码中:
第9行代码定义了一个id为btn的button元素。
第11行代码中的getElementById()方法是通过元素的id属性来获取元素的,在这里表示获取id为btn的元素。第12行代码给oBtn注册事件,语法为“oBtn.on事件类型”,事件类型click表示鼠标单击事件,这步操作实际上是为btn的onclick属性赋值一个函数,这个函数就是事件处理程序。

运行效果

响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 例5-1事件处理_第1张图片
单击“提交”按钮,弹出警示框。
响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 例5-1事件处理_第2张图片
事件驱动是JavaScript语言的一个最基本的特征。所谓事件是指用户在访问页面时执行的操作。Event对象代表事件的状态,如发生事件的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。当浏览器探测到一个事件时,如单击鼠标或按钮,它可以触发与这个事件相关联的事件处理函数。事件通常与函数结合使用,函数不会在事件发生前被执行。

你可能感兴趣的:(前端,html5,css3)