JavaScript事件（上)
一、事件是什么？
在JavaScript中，事件往往是页面的一些动作引起的，例如当用户按下鼠标或者提交表单，甚至在页面移动鼠标时，事件都会出现。
二、JavaScript事件
在JavaScript中，调用事件的方式共有2种：
（1）在script标签中调用；
在script标签中调用事件，也就是在<script></script标签内部调用事件。
语法：
var 变量名 = document.getElementById("元素id");//获取某个元素，并赋值给某个变量
变量名.事件处理器 = function()
{
……
}
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<input id="btn" type="button" value="提交" />
<script type="text/javascript">
var e = document.getElementById("btn");
e.onclick = function () {
alert("绿叶学习网");
}
</script>
</body>
</html>在浏览器预览效果如下：
分析：
当点击了按钮之后，JavaScript就会调用鼠标的点击（onclick）事件，效果如下：
很多人觉得很奇怪，document.getElementById()获取的是一个元素，能赋值给一个变量吗？答案是可以的。那问题又来了，为什么要使用document.getElementById()来获取一个元素赋值给一个变量呢？用以下代码不行么？
<script type="text/javascript">
document.getElementById("btn").onclick = function{
alert("绿叶学习网");
}
</script>其实上述代码也是可行的，只不过呢，如果不使用document.getElementById()来获取一个元素赋值给一个变量，以后我们如果要对该元素进行多次不同操作，岂不是每次都要写document.getElementById()？这样的话，代码就会显得很冗余。
（2）在元素中调用；
在元素事件中引入JS，就是指在元素的某一个属性中直接编写JavaScript程序或调用JavaScript函数，这个属性指的是元素的“事件属性”。
举例1：（在元素事件属性中直接编写JavaScript）
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<input type="button" onclick="alert('绿叶学习网')" value="按钮"/>
<body>
</html>在浏览器预览效果如下（点击按钮后的效果）：
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function alertMessage()
{
alert("绿叶学习网");
}
</script>
</head>
<body>
<input type="button" onclick="alertMessage()" value="按钮"/>
<body>
</html>
在浏览器预览效果（点击按钮后的效果）如下：
分析：
那么这两种方法有什么本质的区别呢？其实，第2种方法不需要使用getElementById()等方法来获取DOM，然后才调用函数或方法。因为它是直接在JavaScript元素中调用的。
这2种调用JavaScript事件的方式，大家刚刚开始看不理解没关系，我们只是给大家说个语法，留个印象。在接下来的章节中，我们会经常接触。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。