day12 事件监听/事件委托/拖拽/JSON对象

时间 2021-01-14

标签 javascript css html java 程序员 json 浏览器 app 函数工具栏目 JavaScript 繁體版

原文原文链接

5. 事件绑定的三种方式

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

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

}

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

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

(3) 经过事件监听

语法：

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

可选参数是否捕获，默认是false 冒泡
addEventListener() 主流高版本浏览器

当冒泡与捕获同时存在时:先捕获后冒泡css

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）能够为一个元素，屡次绑定相同的事件(相似于代码的合并)html

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

(2) 程序员可使用事件监听的方式肯定触发的过程是冒泡仍是捕获java

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

事件监听兼容:

IE的事件监听：元素.attachEvent("带on的事件",回调函数）程序员

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

设计兼容函数(考虑函数的功能，参数，返回值)json

<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. 事件委托

委托：让别人去作浏览器

事件委托：某个事件让其余元素来完成app

例如：页面上有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. 拖拽(考点)

拖拽思路： onmousedown onmousemove onmouseup

(1).首先为须要拖拽的对象添加一个onmousedown事件

记录：鼠标点击某个对象时的内部偏移量

e.offsetX e.offsetY

(2).鼠标在文档上移动

要想让操做的元素动起来，该元素必须有定位

移动的过程，实际上改变，元素的left和top

(3).中止移动，须要触发onmouseup鼠标抬起时，取消移动

document.onmousemove = null;

<!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;
            // 判断标准
            //e.pageX是鼠标的位置，因此鼠标位置再向左移动offsetX的距离，
            //来判断oBox左边是否到达边界
            var left = e.pageX - offsetX;
            var top = e.pageY - offsetY;
            //console.log(left);
            //(1) 左边界
            if(left<0){
                left=0;
            }
            //(3) 最大的宽
            // window.innerWidth浏览器的可视宽度
            var leftMax = window.innerWidth-oBox.offsetWidth;
            console.log('leftMax' + leftMax);
            if(left>leftMax){
                left = leftMax;
            }
            //(2)上边界
            if(top<0){
                top=0;
            }
            //(4)最大的高
            // 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);