JavaScript(2)

最新推荐文章于 2024-10-16 16:26:58 发布

哑笑

最新推荐文章于 2024-10-16 16:26:58 发布

阅读量690

点赞数 2

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_52994227/article/details/122769236

版权

js中的自定义对象

（1）Object形式的自定义参数

对象的定义：

var 变量名 = new Object（）；//对象实例（空对象）

变量名.属性名 = 值； //定义一个属性

变量名.函数名 = function（）{} //定义一个函数

对象的访问：

变量名.属性名/函数名（）；

  <script type="text/javascript">
//     对象的定义：
// var 变量名 = new Object（）；//对象实例（空对象）
//     变量名.属性名 = 值； //定义一个属性
//     变量名.函数名 = function（）{} //定义一个函数
var obj = new Object();
obj.name = "华仔";
obj.age = 18;
obj.fun = function (){
  alert("姓名："+this.name+",年龄；"+this.age);
}
//     对象的访问：
// 变量名.属性名/函数名（）；
obj.fun();

  </script>

JS中的事件

常用的事件：

onload加载完成事件：页面加载完成后，常用于做页面js代码初始化操作

onclick单机事件：常用于按钮的点击响应操作

onblur失去焦点事件：常用于输入框失去焦点后验证其输入内容是否合法

onchange内容发生改变事件：常用于下拉列表和输入框内容发生改变后操作

onsubmit表单提交事件：常用于表单提交前，验证所有表单项是否合法

事件的注册又分为静态注册和动态注册两种：

静态注册事件：通过html标签的事件属性直接赋予事件响应后的代码，成为静态注册

动态注册事件：是指先通过js代码得到标签的dom对象，然后再通过dom对象.事件名=function（）{}这种赋予事件响应后的代码，叫动态注册

动态注册的基本步骤：

1.获取标签对象

2.标签对象.事件名 = function（）{}

onload事件：

1.静态注册：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
      function onloadFun(){
        alert('静态注册onload事件，所有代码');
      }
    </script>
</head>
<!--静态注册onload事件
        onload事件是浏览器解析完页面之后就会自动触发的事件
-->
<body onload="onloadFun()">

</body>
</html>

2.动态注册：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    //onload事件动态注册，是固定写法
    window.onload = function (){
      alert("动态注册的onload事件");
    }
  </script>
</head>
<body>

</body>
</html>

onclick事件：

1.静态注册：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    function onclickFUn() {
      alert("静态注册onclick事件");
    }
  </script>
</head>
<body>
      <button onclick="onclickFUn()">按钮1</button>
</body>
</html>

2.动态注册：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    window.onload = function () {
      // 1.获取标签对象
      // document是JavaScript语言提供的一个对象（文档）
      // get   获取
      //Element   元素（就是标签）
      //By    通过、、由、、经、、、
      //Id    id属性
      var btn = document.getElementById("obj");
      // 2.通过标签对象.事件名 = function（）{}
      btn.onclick = function (){
        alert("动态注册事件");
      }

    }
  </script>
</head>
<body>
    <button id="obj">按钮1</button>
</body>
</html>

onblur事件：

1.静态注册失去焦点事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    function onblurFun() {
      //console是控制台对象，是由JavaScript语言提供，专门用来向浏览器的控制器打印输出，用于测试使用
      //log（）是打印的方法
      console.log("静态注册失去焦点事件")
    }
  </script>
</head>
<body>
    用户名：<input type="text" onblur="onblurFun();">
    密码：<input type="text" onblur="onblurFun()">
</body>
</html>

2.动态注册的焦点事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    window.onload = function (){
      // 1.获取标签对象
      var btn = document.getElementById("password");
      // alert(btn);
      // 2.通过标签对象.事件名 = function（）{}；
      btn.onblur = function (){
        console.log("动态事件注册成功");
      }
    }
  </script>
</head>
<body>
密码：<input id="password" type="text">
</body>
</html>

onchange事件：

1.静态注册事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    function onchangeFUn(){
      alert("女神已经注册");
    }
  </script>
</head>
<body>
      请选择你心中的女神
<!--      静态注册onchange事件-->
    <select onchange="onchangeFUn()">
      <option>-----女神------</option>
      <option>芳芳</option>
      <option>佳佳</option>
      <option>娘娘</option>
      <option>姑姑</option>
      <option>缓缓</option>
    </select>
</body>
</html>

2.动态注册事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
      window.onload = function (){
          //1.获取标签对象
          var change = document.getElementById("chang");
          //2.标签名.事件名 = function(){}
          change.onchange = function (){
             alert("男神已经注册");
          }
      }
  </script>
</head>
<body>
      请选择你心中的男神
<!--      动态注册onchange事件-->
    <select id="chang">
      <option>-----男神------</option>
      <option>芳芳</option>
      <option>佳佳</option>
      <option>娘娘</option>
      <option>姑姑</option>
      <option>缓缓</option>
    </select>
</body>
</html>

onsubmit表单提交事件

onsubmit静态注册：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    //静态注册表单提交事件
    function onsubmitFun(){
      // 要验证表单项是否合法，如果有一个不合法，就组织表单提交
      alert("静态注册表单提交事件");
    }
    
   <!-- function onsubmitFun(){
      alert("静态注册表单提交事件----不合法");
      return false;
    }-->
  </script>
</head>
<body>
    <form action="http://localhost:8080" method="get" onsubmit="onsubmitFun()">
      <input type="submit" value="静态注册">
    </form>
<!--    //return false 可以组织表单提交  
      <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun()">
      <input type="submit" value="静态注册">
    </form>-->
</body>
</html>

onsubmit动态事件注册：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    window.onload = function (){
        var onloadFun = document.getElementById("onloadFun");
        onloadFun.onsubmit = function (){
            alert("动态事件注册");
            return true;
            return false;//组织表单提交
        }
    }
  </script>
</head>
<body>
    <form action="http://localhost:8080" id="onloadFun">
      <input type="submit" value="动态注册">
    </form>

</body>
</html>