理解HTML与JavaScript事件-优快云博客

这里写图片描述

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>My JSP 'three.jsp' starting page</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <script type="text/javascript">
        //一般事件onfocus获得焦点   onblur失去焦点      onchange内容改变事件
        function onf(){
            alert("获得焦点");
        }
        function onb(){
            alert("失去焦点");
        }
        function onc(){
            alert("内容改变");
        }
        //鼠标事件 
        function oncl(){
            alert("点击事件");
        }
        function ondb(){
            alert("双击事件");
        }
        function ondo(){
            alert("鼠标按下事件");
        }
        function onup(){
            alert("鼠标抬起事件");
        }
        function onov(){
            alert("鼠标移上事件");
        }
        function onou(){
            alert("鼠标移开事件");    
        }
        function onmo(){
            alert("鼠标移动事件");
        }
        function onkd(){
            alert("键盘按下事件");
        }
        function onku(){
            alert("键盘抬起事件");
        }
        function onsb(){
            alert("表单提交事件");
        }
        function move(){
            alert("页面加载");
        }
    </script>
  </head>

  <body onload="move()">
    <h3>一般事件 获得焦点 失去焦点 内容改变</h3>
    <input type="text" onfocus="onf()">
    <input type="text" onblur="onb()">
    <input type="text" onchange="onc()">
    <br>
    <h3>鼠标事件 点击事件 双击事件 鼠标按下事件  鼠标抬起事件 鼠标移上事件 鼠标移开事件 鼠标移动事件</h3>
    <input type="text" onclick="oncl()">
    <input type="text" ondblclick="ondb()">
    <input type="text" onmousedown="ondo()">
    <input type="text" onmouseup="onup()"><br><br>
    <input type="text" onmouseover="onov()">
    <input type="text" onmouseout="onou()">
    <input type="text" onmousemove="onmo()">
    <h3>键盘事件 键盘按下事件 键盘抬起事件</h3>
    <input type="text" onkeydown="onkd()">
    <input type="text" onkeyup="onku()">
    <h3>表单事件</h3>
    <form action="" onsubmit="onsb()">
        <input type="submit" value="提交">
    </form>
    <h3>页面加载事件</h3><h3>页面卸载事件</h3>
  </body>
</html>

我们看到别人的孩子或伴侣,难免想比较:｢你为什么就不能像那个谁呢?｣。嗯,对家人一定有期许,但最好别比较,比较多了,彼此都学得嫉妒和怨怼,毫无养份。别人家的表象,那是展示的橱窗,造出橱窗里那些东西要多少代价,外人不知道。家人是要共度真实生活的,何必拿来和橱窗比较?
——蔡康永《给残酷社会的善意短信》