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

头像
shasha
    阅读 6 分钟
    1

    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. 拖拽(考点)

    拖拽思路： 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);
    javascript
    shasha
    28 声望7 粉丝
    « 上一篇
    day11 鼠标/键盘事件/事件流
    下一篇 »
    day13 正则表达式

    引用和评论

    推荐阅读
    头像
    day34 gulp

    shasha阅读 1.4k

    头像
    2025年最新反编译微信小程序的教程及工具

    TANKING赞 9阅读 6.5k

    头像
    手写一个动态海洋和天空效果的vue hooks

    夕水赞 7阅读 1.9k

    头像
    你可能不知道的图片加载相关知识

    夕水赞 7阅读 5.2k

    头像
    原生JS大揭秘—JS代码执行原理解刨

    Damon赞 6阅读 5.8k评论 2

    头像
    原生electron起步-从零到一完成构建和打包

    兔子先森赞 3阅读 3.4k评论 1

    头像
    LRU算法，你别跑，我就要吃透你

    夕水赞 3阅读 4.7k

    0 条评论
    得票最新