入门 - 事件简介

本文导航

  1. 事件属性名称
  2. 常见事件

  • 作者：KK

  • 发表日期：2016.2.17

先看下面的代码,button标签有一个onclick属性,里面写了一句JS代码,复制代码到你的测试文件后,你试下点击这个button看看

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>JS事件学习</title>
</head>
<body>
<button type="button" onclick="alert('哇我被点了!')">点我看看</button>
</body>
</html>

点击后就弹窗提示"哇我被点了!" 聪明的你一定能看得出,就是点击之后执行了onclick里面的代码,而这就是事件

这是点击事件,你没点击的时候什么都不会发生,你点击之后就发生了点击事件,在计算机中有很多事件发生,比如开机事件,关机事件,点击事件,键盘按下事件,鼠标滚轮滚动事件,屏幕滚动事件,拖动事件等,还有更多事件暂时不一一说明了,反正你在电脑上做的每一种操作都是一种事件

事件属性名称

上面button标签的onclick属性就是点击事件的事件属性名称,属性的值就是事件发生时要执行的JS代码,来多几个点击事件看看:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>JS事件学习</title>
<script type="text/javascript">
function haha(){
	alert('你点击了按钮2');
}
</script>
</head>
<body>

<button type="button" onclick="alert('按钮1被点击')">按钮1</button><br/><br/>
<button type="button" onclick="haha()">按钮2,这个点击后会调用定义了的JS函数</button><br/><br/>
<button type="button" onclick="bbb()">按钮3,只要你定义了就行,不管你的函数放在哪里定义,都可以用onclick属性执行</button><br/><br/>
<button type="button" onclick="say('万岁万岁')">按钮4,可以向函数传递参数,反正就像普通JS代码一样</button><br/><br/>
<button type="button" onclick="var message = '一岁'; message += '2221'; say(message + 'qqq')">按钮5,事件属性可以执行多句代码,而不只是一个函数语句,这时候就要用分号隔开每个语句了</button>

<script type="text/javascript">
function bbb(){
	alert('你点击了按钮3');
}

function say(message){
	message += '!!!';
	alert(message);
}
</script>

</body>
</html>

常见事件

除了onclick事件,还有其它一些常见的事件,接下来我一一介绍

其实单击事件不应该叫做onclick而是叫做click事件,on只是一个描述时机的词,比如还有mouseover事件(鼠标划过),它的属性名也是在前面加一个on变成onmouseover

好了切正题

  • 双击事件(dblclick),当鼠标双击这个元素的时候才会触发,比如:

    <button type="button" ondblclick="alert('双击了')">单击不行的,双击一下看看吧</button>

  • 鼠标划过事件(mouseover),当鼠标在屏幕上划过这个元素的时候就会执行脚本代码

    <button type="button" onmouseover="alert('哦!看到鼠标路过我身边了!')">@_@</button>

  • 鼠标按下事件(mousedown),当鼠标的左键对着元素按下去的时候就会执行脚本:

    <button type="button" onmousedown="alert('你按下了鼠标')">点我点我</button>

    虽然看上去效果和单击相似,但实际上与单击是不同的,单击事件必须是鼠标弹起来后才会发生,不然就不是单击,还有弹起来时必须在元素的区域内弹起按钮才算单击.而鼠标按下事件则是在你按下去的那一刻就会发生了,而另外还有个鼠标弹起事件mouseup你自己试一下吧

  • 获取焦点事件(focus)以及失去焦点事件(blur)这两个事件一般用在输入框里:

    <input type="text" id="in1" onfocus="this.value='有焦点了'" onblur="this.value='失去焦点了'" placeholder="鼠标点我看看" size="23" /><br/><br/>
<input type="text" value="点这,上面会发生blur事件" /><br/><br/>
<button type="button">点我也会让#in1失焦,反正点别的都会让它失去焦点</button>

    这里出现了一些陌生代码this.value,暂时不讲解,反正它们可以实现input的输入值被改变

  • 加载完毕事件(load),这个事件一般放在body标签里,当页面的代码都被浏览器加载完毕后(除了CSS和图片)就会发生这个事件,不严谨地说,一般程序员都称为页面加载完毕事件:

    <!DOCTYPE HTML>
<html lang="en-US">
<head>
<script type="text/javascript">
alert('网页开始被加载,现在开始解析head标签,但是title标签还没有被解析,所以你不会看到网页标题,也看不到网页内容,更加不会触发body的load事件');
</script>
<meta charset="UTF-8">
<title>onload事件测试</title>
</head>
<body onload="alert('标题出来了,而且网页内容也显示出来了,说明网页内容被解析完毕,load事件现在才发生,只要整个网页的HTML代码被加载后才会发生这个事件');">
网页内容
</body>
</html>

    而关于load事件你最好再看看下面这个例子掌握一下它的加载顺序,所有JS脚本没有加载完毕都不会触发load事件,只要最后一个script也被加载了(或者超时)才会发生load事件:

    <!DOCTYPE HTML>
<html lang="en-US">
<head>
<script type="text/javascript">
//#1
alert('网页开始被加载,现在开始解析head标签,但是title标签还没有被解析,所以你不会看到网页标题');
alert('并且,下一个script标签引用了外部脚本,加载成功后才会执行再下一个script标签');
</script>
<script type="text/javascript" src="http://www.kkh86.com/js/jquery-1.11.1.min.js"></script>

<link rel="stylesheet" href="http://www.xxx.com/yy_fjfjwhw.css" />
<!--虽然这里有个CSS加载,但是我乱写的网址,不会加载成功,之所以这么写,是为了向你证明只有JS文件才会阻塞load事件的发生,而CSS加载成功或失败都不会影响load事件的发生-->

<script type="text/javascript">
//#2
alert('外部脚本加载完毕,为了证明加载完毕,后面会显示 "function" ===> ' + typeof(window.jQuery));
</script>
<meta charset="UTF-8">
<title>onload事件测试</title>
<script type="text/javascript">
//#3
alert('title标签已经被加载,你可以看到网页标题了,即将跳出head标签的解析,准备加载body标签');
</script>
</head>
<body>
	<script type="text/javascript">
	//#4
	alert('现在开始加载body标签,下面又开始加载一个外部脚本');
	</script>
		
	网页内容
		
	<script type="text/javascript" src="http://www.kkh86.com/mylife/js/jquery_toast.js"></script>
	<script type="text/javascript">
	alert('第2个外部脚本加载完毕,');
	</script>
</body>
</html>

还有,onclick的属性是可以写JS代码的,而上面的演示代码中又调用了全局函数alert,所以就验证了我之前在变量作用域所提到的全局变量/函数可以被任何地方调用的说法,再看看代码:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>通过事件调用全局变量</title>
<script type="text/javascript">
var a = 111;
</script>
</head>
<body>
<button type="button" onclick="alert(a)">点我看看</button>
</body>
</html>

上例中click事件调用了全局函数alert,而且还将全局变量a作为参数传了进去

并且你要记住我接下来说的这句话,以后想起也回来看这句:HTML标签中的onxxx事件属性中所调用的函数和变量都必须是全局作用域的

搞清楚这个对你以后写JS插件或者封装些代码很有意义,不然你的插件就会封装得不漂亮不好维护,代码混乱

事件就先介绍到这里了,你以后看到别人的代码有一些没见过的事件名称,比如onbeforeunload这样,你只要上网搜索"JS onbeforeunload事件"就会有好多文章帮你解答了