1.如何创建自定义对象

1.1直接量

  • var student = {"name":"zs","age":23};
  • {} 代表一个对象,内含多组键值对
  • key一般都是字符串,而value可以是任意类型的数据

采用直接量方式创建的对象也叫JSON对象

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义对象</title>
<script type="text/javascript">
    //1.采用直接量的方式创建对象
    function f1() {
        var student = 
            {"name":"张三","age":23,"work":function(){alert("我学Java");}};
        alert(student.name);
        alert(student.age);
        student.work();
    }
</script>
</head>
<body>
    <input type="button" value="按钮1" onclick="f1();"/>
</body>
</html>

1.2构造器

1)内置构造器(new的函数/首字母大写)

  • 特殊:Array,Date,RegExp,Function
  • 通用: Object
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义对象</title>
<script type="text/javascript">
    
    //2.采用内置构造器创建对象
    function f2() {
        var teacher = new Object();
        teacher.name = "王老师";
        teacher.age = 18;
        teacher.work = function(){
            alert("我教Java");
        }
        alert(teacher.name);
        alert(teacher.age);
        teacher.work();
    }
</script>
</head>
<body>
    <input type="button" value="按钮2" onclick="f2();"/>
</body>
</html>

2)自定义构造器

  • 声明一个函数,首字母要大写
  • 声明参数,让调用者清楚要传什么参数
  • 让对象记住这些参数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义对象</title>
<script type="text/javascript">
    //3.采用自定义构造器创建对象
    function Coder(name,age,work){ //定义一个程序员对象
        this.name = name;
        this.age = age;
        //this指代当前对象,.job是给此对象增加job属性 =work是将参数work赋值给此属性
        this.job = work;
    }
    function f3() {
        var coder = new Coder("李四",25,function(){alert("我写Java");})
        alert(coder.name);
        alert(coder.age);
        coder.job();
    }
</script>
</head>
<body>
    <input type="button" value="按钮3" onclick="f3();"/>
</body>
</html>

2.总结

  • 无论用哪种方式创建出来的对象都一样,都是Object
  • 若创建的对象给别人用,建议使用第3种(自定义构造器创建对象)方式
  • 若创建的对象给自己用,用第1(采用直接量)、2(采用内置构造器)都行
  • 若没有函数用第1种,否则建议用第2种

三.事件

1.事件的概述

1)什么是事件

  • 就是用户的动作,就是js调用的时机

2)事件的分类

  • 鼠标事件
  • 键盘事件
  • 状态事件:达到某个条件(状态)自动触发

2.事件的定义

1)直接定义事件

  • 在元素上通过事件属性(如:onclick)定义事件
  • 优点:很直观
  • 缺点:HTML和JavaScript耦合度高

2)后绑定事件(*)

  • 在页面加载后,使用js获取元素,并给他绑定事件
  • 优点:HTML和js耦合度低
  • 缺点:不直观

3)取消事件

  • 在事件内return false

演示:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    //1.直接定义事件
    function f1() {
        console.log("直接定义事件");
    }
    
    //2.后绑定事件
    window.onload = function() {
        var btn = document.getElementById("btn2");
        btn.onclick = function() {
            console.log("后绑定事件");       
        }
    }       
</script>
</head>
<body>
    <input type="button" value="按钮1" onclick="f1();">
    <input id="btn2" type="button" value="按钮2">
</body>
</html>

3.事件对象

1)什么是事件对象

  • 当事件被触发时,有一些信息被确定下来
  • 如:点击的是左键还是右键、点击的位置(坐标),按键
  • 开发项目时,可能需要使用这些信息(较少)
  • 浏览器为了方便开发者,将这些信息封装到一个对象里
  • 这个对象叫event事件对象

2)如何获取事件对象

直接定义事件

  • 在调用函数时直接传入event
  • 在写这个函数时加参数来接收它

后绑定事件

  • 触发事件时,浏览器会自动给函数传入event
  • 在写这个函数时加参数来接收它

事件对象演示

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    //1.直接定义事件
    function f1(e) {
        console.log("直接定义事件");
        console.log(e);
    }
    
    //2.后绑定事件
    window.onload = function() {
        var btn = document.getElementById("btn2");
        btn.onclick = function(e) {
            console.log("后绑定事件");
            console.log(e);
        }
    }       
</script>
</head>
<body>
    <input type="button" value="按钮1" onclick="f1(event);">
    <input id="btn2" type="button" value="按钮2">
</body>
</html>

4.事件处理机制

1)冒泡机制

  • 事件由内向外传播
  • 这种规律称之为冒泡机制

冒泡机制的作用

  • 可以简化事件的定义
  • 可以在父元素上定义一个事件,接收众多子元素的事件

需要知道事件源

3)事件源

  • 事件发生的具体位置
  • 事件发生的源头
  • 通过事件对象可以获取事件源

计算器案例

计算器案例效果.png

计算器案例效果.png
  • 源码如下:
<!DOCTYPE html>
<html>
  <head>
    <title>计算器</title>
    <meta charset="utf-8" />
    <style type="text/css">
      .panel {
        border: 4px solid #ddd;
        width: 192px;
        margin: 100px auto;
        /*border-radius: 6px;*/
      }
      .panel p, .panel input {
        font-family: "微软雅黑";
        font-size: 20px;
        margin: 4px;
        float: left;
        /*border-radius: 4px;*/
      }
      .panel p {
        width: 122px;
        height: 26px;
        border: 1px solid #ddd;
        padding: 6px;
        overflow: hidden;
      }
      .panel input {
        width: 40px;
        height: 40px;
        border:1px solid #ddd;
      }
    </style>
    <script type="text/javascript">
        window.onload = function() {
            var div = document.getElementById("jsq");
            div.onclick = function(e) {
                //获取事件源(input/p/div)
                var obj = e.srcElement||e.target;
                //只处理input
                if(obj.nodeName=="INPUT"){
                    var p = document.getElementById("screen");
                    if(obj.value=="C"){
                        //清空p
                        p.innerHTML="";
                    }else if(obj.value=="="){
                        //计算
                        try{
                            var v = eval("("+p.innerHTML+")");
                            p.innerHTML = v;
                        }catch(ex){
                            p.innerHTML = "Error";
                        }
                    }else{
                        //累加
                        p.innerHTML += obj.value;
                    }
                }
            }
        }
    </script>
  </head>
  <body>
    <div id="jsq" class="panel">
      <div>
        <p id="screen"></p>
        <input type="button" value="C">
        <div style="clear:both"></div>
      </div>
      <div>
        <input type="button" value="7">
        <input type="button" value="8">
        <input type="button" value="9">
        <input type="button" value="/">
        
        <input type="button" value="4">
        <input type="button" value="5">
        <input type="button" value="6">
        <input type="button" value="*">
        
        <input type="button" value="1">
        <input type="button" value="2">
        <input type="button" value="3">
        <input type="button" value="-">
        
        <input type="button" value="0">
        <input type="button" value=".">
        <input type="button" value="=">
        <input type="button" value="+">
        
        <div style="clear:both"></div>
      </div>
    </div>    
  </body>
</html>