乐趣区

关于javascript:day12-事件监听事件委托拖拽JSON对象

5. 事件绑定的三种形式

(1) 通过 HTML 元素进行绑定

<button onclick="fun()"> 点击 </button>
var fun = function(){}

(2) 通过 JS 获取 HTML 元素进行绑定

var oBtn = document.querySelector('button');
oBtn.onclick = function(){} 

(3) 通过事件监听

语法:

元素.addEventListener(‘去掉 on 的事件’, 回调函数,[是否捕捉]);

  • 可选参数是否捕捉,默认是 false 冒泡
  • addEventListener() 支流高版本浏览器
  • 当冒泡与捕捉同时存在时: 先捕捉后冒泡

        document.addEventListener('click',function(){alert('document 冒泡');
        })     
        
        window.addEventListener('click', function(){alert('window 冒泡');
        })
        document.addEventListener('click',function(){alert('document 捕捉');
        },true)     
        
        window.addEventListener('click', function(){alert('window 捕捉');
        },true)
    // 后果:window 捕捉 -》document 捕捉 =》document 冒泡 =》window 冒泡

事件监听的益处:

(1)能够为一个元素,屡次绑定雷同的事件(相似于代码的合并)

    document.addEventListener("click",function(){alert(1);
    });
    
    document.addEventListener("click",function(){alert(2);
    });
// 后果: 1->2

(2) 程序员能够应用事件监听的形式 确定触发的过程是冒泡还是捕捉

    document.addEventListener("click",function(){alert("document");
    },true);
    
    window.addEventListener("click",function(){alert("window");
    },true);
// 后果: window->document

事件监听兼容:

IE 的事件监听:元素.attachEvent(“ 带 on 的事件 ”, 回调函数)

  • 没有第三个参数
  • 参数不省略 on
  • 默认冒泡

设计兼容函数(思考函数的性能,参数,返回值)

<script>    
    function addEvent(obj,type,callBack){if(obj.attachEvent){obj.attachEvent("on"+type,callBack);
        }else{obj.addEventListener(type,callBack);
        }
    }
    
    addEvent(document,"click",function(){alert("1");
    });
</script>

6. 事件委托

委托:让他人去做

事件委托:某个事件让其余元素来实现

例如:页面上有 1000 个 li,为每一个 li 增加单击事件。

解决办法:应用委托只须要在 li 父级上加一次事件就能够。

<script>    
    // 通过事件委托实现高亮
    var oUl = document.querySelector('ul');
    oUl.onclick = function(evt){
        // 委托中实在的元素不是 this 对象
        // this.style.backgroundColor = 'pink';// 谬误
        // 如何取得真正的操作元素
        var e = evt||event;
        var target = e.srcElement||e.target;
        // console.log(target.tagName);//'LI'
        if(target.tagName=='LI'){target.style.backgroundColor='pink';}
    }
</script>
// 委托的实现办法:父级元素. 事件 = function(){
    // 获取事件源  以后的操作元素
    var target = e.srcElement||e.target;
    console.log(target.tagName);//'LI'
}

事件委托的益处

1) 通过父元素实现子元素的事件响应,从而大大提高效率

2) 能够为新增加的元素,提前绑定事件

<script>    
    var oUl = document.querySelector('ul');
    oUl.onmousemove = function(evt){
        var e = evt|| event;
        var target = e.srcElement||e.target;
        if(target.tagName == 'LI'){target.style.backgroundColor='pink';}
    }
    oUl.onmouseout = function(evt){
        var e = evt|| event;
        var target = e.srcElement||e.target;
        if(target.tagName == 'LI'){target.style.backgroundColor='';}
    }
    
    var oInput = document.querySelector('input');
    var oBtn = document.querySelector('button');
    oBtn.onclick = function(){
        // 增加 li 元素
        var oLi = document.createElement('li');
        oLi.innerHTML = oInput.value;
        oUl.appendChild(oLi);
        oInput.value='';
    }
</script>

7. 拖拽

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #box{
                width: 100px;
                height: 100px;
                background-color: pink;
                position: absolute;
                left: 400px;
                top: 400px;
                cursor: move;
            }
        </style>
    </head>
    <body>
        <div id="box">
            
        </div>
    </body>
</html>
<script type="text/javascript">
    // 某个鼠标按键被按下 onmousedown
    // 某个鼠标按键被松开 onmouseup
    
    var oBox = document.querySelector('#box');
    oBox.onmousedown = function(evt){
        var e= evt||event;
        var offsetX = e.offsetX;
        var offsetY = e.offsetY;
        console.log('offset:' + offsetX,offsetY);
        document.onmousemove = function(evt){
            var e = evt|| event;
            oBox.style.left= e.pageX - offsetX + 'px';
            oBox.style.top = e.pageY - offsetY + 'px';
            console.log('page:' + e.pageX,e.pageY);
        }
    }
    document.onmouseup = function(){document.onmousemove = null;}
    
</script>

拖拽的边界问题??:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #box{
                width: 100px;
                height: 100px;
                background-color: pink;
                position: absolute;
                left: 400px;
                top: 400px;
                cursor: move;
            }
        </style>
    </head>
    <body>
        <div id="box">
            
        </div>
    </body>
</html>
<script type="text/javascript">
    // 某个鼠标按键被按下 onmousedown
    // 某个鼠标按键被松开 onmouseup
    
    var oBox = document.querySelector('#box');
    oBox.onmousedown = function(evt){
        var e= evt||event;
        var offsetX = e.offsetX;
        var offsetY = e.offsetY;
        document.onmousemove = function(evt){
            var e = evt|| event;
            // 判断规范
            var left = e.pageX - offsetX;
            var top = e.pageY - offsetY;
            console.log(left);
            
            if(left<0){left=0;}
            // window.innerWidth 浏览器的可视宽度
            var leftMax = window.innerWidth-oBox.offsetWidth;
            console.log('leftMax' + leftMax);
            if(left>leftMax){left = leftMax;}
            
            if(top<0){top=0;}
            // window.innerHeight 浏览器的可视高度
            var topMax = window.innerHeight-oBox.offsetHeight;
            if(top>topMax){top = topMax;}
            
            oBox.style.left= left + 'px';
            oBox.style.top = top + 'px';
        }
    }
    document.onmouseup = function(){document.onmousemove = null;}
    
</script>

8. JSON 对象

  • json: 轻量级存储工具,是一种跨平台的数据交互格局
  • 作用:存储数据
  • json 对象定义:

    var obj = {"key1":value1,..."keyN":valueN};

阐明: 严格的 json 对象 键必须用 双引号 引起来;json 的值能够是任意类型的

  • json 操作 赋值和取值

    • 取值:json. 键
    • 遍历取值 for in
  • JSON 对象 ->JSON 字符串 : 必须是严格模式的字符串和对象

    • JSON.stringify(json 对象)
    var json = {"name":"老王","age":"18"};
    var str = JSON.stringify(json);
    console.log(str,typeof str);//string
  • JSON 字符串 -> JSON 对象

    • JSON.parse(json 字符串)
    var str1 = '{"name":" 老王 ","age":"18"}';
    var json1 = JSON.parse(str1);
    console.log(json1,typeof json1);
退出移动版