03-第三章 函数、自定义属性、事件

一、 变量与属性的区别

1.var a = 123;//此为变量
2.var object = document.getElementById('box'); //此时object 为节点对象（node）
3.object.abc = 888888; //为object自定义了abc属性，且此属性的值888888
4.object.abc； //888888 对象.属性名 可以获取属性值

属性分节点属性 和js属性
节点属性 :元素自带属性
js属性:js中自定义的属性

当js属性为合法节点属性的时候，可以修改节点属性的值

1.
2.var object.id = 'box';

---

二、自定义属性/自定义标签属性

1.自定义属性

        function fn(){};
        let obj = {};
        let arr = [];
        
        fn.chuxin = 123;
        console.log(fn.chuxin);

• 访问一个对象不存在的属性，那么就相当于这个对象默认值有一个 undefined

• . 操作符就是来获取一个对象的属性的

也可以使用 [] 里面不加 "" 获取的就是一个变量，加了获取的就是它的属性

        function fn(){};
        let obj = {
            a : 1,
            b : 2
        };
        let arr = [];
        let a = "b";

        console.log(obj[a]);

• 数值通过[]来访问属性的时候，[]里面加不加字符串都是表示拿到它的属性；

        //  还是拿到它的属性
        console.log(arr["0"]);

• 寄存在标签中的属性，叫做自定义标签属性

• 寄存在JS环境中的属性，叫做自定义属性

获取自定义属性：直接通过 . 来获取

    <div id="box" cx="123"></div>
    <script>
        let cx = "132";
        console.log(cx);  // 获取到的是 132
    </script>

获取自定义标签属性：通过 api . getAttribute("自定义属性名");

    <div id="box" cx="123"></div>
    <script>
        cx = "456";
        console.log( box.getAttribute("cx") );  //  获取到的是  123
    </script>

设置自定义标签属性 ：通过 api . setAttribute("自定义属性名","值");

    <div id="box" cx="123"></div>
    <script>
        cx="456";
        box.setAttribute("cx", "我爱你");
    </script>

image.png

删除自定义标签属性：api . removeAttribute("自定义属性名");

    <div id="box" cx="123"></div>
    <script>
        cx="456";
        box.removeAttribute("cx");
    </script>

    function fn(a, b) {
        let res = a + b;
        return res;

    }
    let num = fn(1,2);
    console.log(num);

函数执行结束，默认返回undefined;
函数里只能有一个return，遇到return就停止运行。并且把return后面的值返回出来

自定义获取ID方式

    <div id="box"></div>
    <script>

        let a = getId("box");
        function getId(str){
            return document.getElementById(str);
        }
        a.innerHTML = "132";

        //  通过设置一个函数  实参 box 
        //  调用这个函数，给它传一个形参
        //  返回值，就是找到这个Id本身
    </script>

---

---

三、函数/对象方法

对象可以自定义属性

2.对象的属性，如果赋值的是一个函数function(){}，我们称之为对象的方法

1.var object = document.getElementById('box'); //此时object 为节点对象（nodelist）
2.object.abc =function(){}; //为object自定义了方法

四、事件属性

事件:是当事人，在特定的时间在特定的地点发生了 某事

1、js中的事件: 元素.事件属性 = 事件函数

1.    var object = document.getElementById('box');
2.    object.onclick = function(){}

function(){}; 是一个固定的写法，在这个例子中，它被称之为事件函数。

1.var object = document.getElementById('box');
2.object.onclick =  function(){}//

我们也可以用有名函数

1.var object = document.getElementById('box');
2.object.onclick =  fn;//
3.function fn(){}
4.

2、javascript中的事件[ 鼠标事件, 键盘事件, 表单事件, 系统事件]

onclick —————— 点击（单击）事件
onmouseover ———– 鼠标滑入事件（会冒泡）
onmouseout—————鼠标离开事件（会冒泡）
onmouseenter————鼠标滑入事件（不会冒泡，区别后面讲）
onmouseleave————鼠标离开事件（不会冒泡，区别后面讲）
ondblclick ——————- 双击（单击）事件

更多参考http://www.w3school.com.cn/tags/html_ref_eventattributes.asp