js学习笔记----Day06js动态加载和event对象

JSON

• json一种轻量级的数据交换格式, json是一种数据传输的方式
• json是js对象的字符串表示法, json本质就是一个字符串
  格式:

var data = {
    width:'100px',
    height:'100px',
    background:'red',
    border:'10px solid #ccc'
};

JS对象表示法

1. 点语法

box.style.width = data.width;
box.style.height = data.height;
box.style.background = data.background;
box.style.border = data.border;

2. dom操作

box.style['width'] = data['width'];
box.style['height'] = data['height'];
box.style['background'] = data['background'];
box.style['border'] = data['border'];

遍历js对象

• 增强for循环

1. 遍历属性名

console.log(key, typeof key);

2. 遍历属性值

//此时的key是动态修改的

box.style[key] = data[key];

注意: 不能用点语法取属性值

//这个方法是错误的, 因为使用点语法取值的前提是key必须是data里的属性, 并不能动态修改. 所以这里无法取到, 只能使用[]中括号(dom操作)取属性值.

box.style.key = data.key;

自定义属性方法

• 赋值 setAttribute(键值对); 无返回值

• 取值 getAttribute(属性名); 返回属性值

注意: 使用多次set方法给同一个属性赋值, 后面会覆盖前面的

事件认识

• 事件也是对象
• 事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。

Event对象 !!!

• Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
• 事件通常与函数结合使用，函数不会在事件发生前被执行！

添加事件

• 需求: 获取点在box上的坐标点

• event.clientX //哪个元素响应事件, 就是哪个元素上的点坐标

• event.clientY

//onmousedown  鼠标按钮被按下。

//onmouseover  鼠标移到某元素之上

//onmousemove  鼠标被移动。
//onmouseup    鼠标按键被松开。
//event 对象, 只要添加事件, 系统就会传递一个event对象
box.onmousedown = function (event) {
    //console.log(1111);
    //获取box中鼠标点坐标
    console.log(event.clientX);
    console.log(event.clientY);
}

windows.event不支持火狐

• 鼠标点击event的兼容性写法

var eve = event || window.event;
console.log(eve.clientX);
console.log(eve.clientY);

offset

1.offsetHeight = height + padding + border
2.offsetWidth = width + padding + border
3.offsetLeft 相对于祖先元素定位的左边距离
4.offsetTop 相对于祖先元素定位的上边距离
5.offsetParent 获取祖先定位的元素的盒子

    //offsetWidth 获取当前元素的宽度
    //offsetWidth = width + padding *2 + border *2
    console.log(son.offsetWidth);

//获取定位父元素的顶部距离.
console.log(box.offsetTop);

• 不建议用js方式获取width的属性值

son.style.width = '200px';

console.log(son.style.width); //只有这一行不可拿到width值. reason: 非行内级

应用: 鼠标移动

<script>
    var box = document.getElementById('box');

    box.onmousedown = function (ev) {
        //注意: 不同触发事件中使用一次用一次
        var event = event || window.event;

        //当前鼠标点距离盒子左边的距离
        var x = event.clientX - box.offsetLeft;
        var y = event.clientY - box.offsetTop;


        document.onmousemove = function (ev) {
            //注意: 在哪使用事件对象, 就在哪获取事件对象
            var event = event || window.event;

            var top = event.clientY - y;
            var left = event.clientX - x;

            console.log(box.offsetTop);
            console.log(box.offsetLeft);


            box.style.top = top + 'px';
            box.style.left = left + 'px';
        }
        box.onmouseup = function (ev) {
            document.onmousemove = null;
        }
    }
</script>

滚动事件

• 滚动事件:在元素滚动条在滚动时触发
• 只要滚动条发生滚动,就会调用onscroll
• 可以获得滚动距离scrollTop : 向上滚出页面的长度.

// 兼容写法
var top = document.documentElement.scrollTop || document.body.scrollTop;

• 用于监听滚动事件, 对topbar进行定位.
• eg. https://sspai.com/

回调函数

var box = document.getElementById('box');
// var btnlist = document.getElementsByTagName('button');
var btnlist = box.children;

//将函数作为参数传入, 实现一个功能
function getEleColor(obj, color) {
    obj.style.backgroundColor = color;
}

function changeEleWidth(obj, width) {
    obj.style.width = width;
}

function changeStyle(btnlist, fn, item) {
    for(var i = 0; i < btnlist.length; i++){
        fn(btnlist[i], item);
    }

}

changeStyle(btnlist, changeEleWidth, '150px');
changeStyle(btnlist, getEleColor, 'orange');