1.添加事件语法格式

  1. <标签 事件名称="JavaScript代码"></标签>

2.JS常用鼠标事件

事件名称 作用
onclick 鼠标单击
ondblclick 鼠标双击
onmousedown 按下鼠标按键
onmouseup 松开鼠标按键
onmouseover 鼠标指针移动到标签上
onmouseout 鼠标从标签上移开
onmousemove 鼠标被移动
onkeydown 按下键盘按键
onkeyup 松开键盘按键
onkeypress 敲击键盘按键
onchange 用户改变域的内容
onfocus 标签获得焦点
onblur 标签失去焦点
onsubmit 提交按扭被点击
onreset 重置按扭被点击
onresize 窗口尺寸被调整
onload 页面加载完成
onunload 用户退出页面

3.常用事件案例

（1) onclick事件

基本语法

<标签 onclick=”JavaScript代码”></标签>

功能

鼠标单击左键时执行JavaScript代码。

代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>JavaScript示例</title>
  5. <meta charset="utf-8" />
  6. <script type="text/javascript">
  7.       function hello(){
  8.         alert("hello呀！");
  9.       }
  10.     </script>
  11. </head>
  12. <body>
  13. <input type="button" value="按钮" style="width:100%;height:50px" onclick="hello()"/>
  14. </body>
  15. </html>

2、鼠标控制事件 - 图2 代码讲解


onclick=”hello()” 鼠标点击按钮执行hello函数

（2) onmousedown事件

基本语法

<标签 onmousedown=”JavaScript代码”></标签>

功能

鼠标按钮被按下时执行JavaScript代码。

代码

<!DOCTYPE html>
<html>
<head>
<title>JavaScript示例</title>
<meta charset="utf-8" /> 
<script type="text/javascript">
      function hello(){
        alert("hello呀！");
      }
    </script>
</head>
<body>
<input type="button" value="按钮" style="width:100%;height:50px" onmousedown="hello()"/>
</body>
</html>

代码讲解


onmousedown =”hello()” 按钮被按下时执行hello函数

（3）onmouseup事件

基本语法

<标签 onmouseup=”JavaScript代码”></标签>

功能

鼠标按钮被释放后执行JavaScript代码。

代码

<!DOCTYPE html>
<html>
<head>
<title>JavaScript示例</title>
<meta charset="utf-8" />  
<script type="text/javascript">
      function hello(){
        alert("hello呀！");
      }
    </script>
</head>
<body>
<input type="button" value="按钮" style="width:100%;height:50px" onmouseup="hello()"/>
</body>
</html>

代码讲解


onmousedown =”hello()” 按钮被按下鼠标松开后执行hello函数

（4) onmousemove事件

基本语法

<标签 onmousemove=”JavaScript代码”></标签>

功能

鼠标在元素内部移动时执行JavaScript代码。

代码

<!DOCTYPE html>
<html>
<head>
<title>JavaScript示例</title>
<meta charset="utf-8" /> 
<script type="text/javascript">
      function hello(){
        alert("hello呀！");
      }
    </script>
</head>
<body>
<input type="button" value="按钮" style="width:100%;height:50px" onmousemove="hello()"/>
</body>
</html>

代码讲解


onmousemove =”hello()” 鼠标在按钮内部移动时执行hello函数

（5) onmouseover事件

基本语法

<标签 onmouseover=”JavaScript代码”></标签>

功能

鼠标移入目标元素上方执行JavaScript代码。

代码

<!DOCTYPE html>
<html>
<head>
<title>JavaScript示例</title>
<meta charset="utf-8" />
<script type="text/javascript">
      function hello(){
        alert("hello呀！");
      }
    </script>
</head>
<body>
<input type="button" value="按钮" style="width:100%;height:50px" onmouseover="hello()"/>
</body>
</html>

代码讲解


onmouseover =”hello()” 鼠标移入按钮上方执行hello函数

（6) onmouseout事件

基本语法

<标签 onmouseout=”JavaScript代码”></标签>

功能

鼠标移出目标元素上方执行JavaScript代码。

代码

<!DOCTYPE html>
<html>
<head>
<title>JavaScript示例</title>
<meta charset="utf-8" />
<script type="text/javascript">
      function hello(){
        alert("hello呀！");
      }
    </script>
</head>
<body> 
<input type="button" value="按钮" style="width:100%;height:50px" onmouseout="hello()"/>
</body>
</html>

代码讲解


onmouseout =”hello()” 鼠标在按钮上方移出后执行hello函数

4.添加onclick事件,alert()方法

 <script type="text/javascript">
      function showImage(){
        alert("图片被点击了");
      }
    </script>

 <!-- 图片列表 -->
<div class="image_list">
<img src="http://www.yyfun001.com/res/htmlclassics/full/images/131.jpg" title="点击查看大图" onclick="showImage()" />

效果为：当点击该图片浏览器顶端会弹出对话框，对话框内文字内容为alert( )括号内的内容
image.png