Javascript—常用事件

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <link rel="stylesheet" type="text/css" href="event1.css">
</head>
<body onload="e8()" onunload="e9()">

      <button onclick="e1()">确定</button>
      <script>
          function e1() {
              alert("换家德真有趣");
          }
      </script>
      <!--点击事件-->
   
      <div class="d1" onmouseout="e2(this)"onmouseover="e3(this)"></div>
      <script>
          function e2(oot){
              oot.innerHTML = "还不错";
          }
          function e3(oor){
              oor.innerHTML = "香蜜沉沉浸如霜";
          }
      </script>
      <!--onmouseout表示鼠标移出，onmouseover表示鼠标经过-->
      
      <form>
          <input type="text" onchange="e4(this)">
      </form>
      
      <script>
          function e4() {
              alert("内容已改变 ");
          }
      </script>
      <!--onchange表示文本框输入的内容改变这里可以简单的写：
      <input type"text" onchange="alert('内容已改变')，要用单引号"-->

      <form>
          <input type="text" onselect="e5(this)" onfocus="e6(this)" onblur="e7(this)">
      </form>
      
      <script>
          function e5(bg) {
              bg.style.background="yellow";
          }
          function e6(bg) {
              bg.style.background="pink";
          }
          function e7(bg) {
              bg.style.background="green";
          }
      </script>
      <!--onselect是文本选择事件，onfocus光标聚集事件,onblur鼠标移出事件-->

      <script>
          function e8() {
              alert("已打开网页");
          }
          function e9(){
              alert("已离开网页");
          }
      </script>
      <!--onload加载网页时响应，onunload关闭时，调用这两个事件，需要在body标签中调用
      同时注意，onunload页面在销毁之后弹出，所以看不到文字-->
</body>
</html>

CSS代码

.d1{
    width: 150px;
    height: 150px;
    background-color: coral;
}

效果：

Javascript—常用事件

猜你喜欢