美文网首页
JS第六天

JS第六天

作者: knot98 | 来源:发表于2018-10-19 21:32 被阅读0次

    JS事件

    一、事件的两种绑定方式

    代码示例：

    <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>事件的两种绑定方式</title>
</head>
<body>
    <div class="div">12345</div>
</body>
<script type="text/javascript">
    var div = document.querySelector('.div');
    // on事件
    div.onclick = function () {
        console.log("点击1");
    }
    div.onclick = function () {
        console.log("点击2");
    }
    // 只打印"点击2",原因,只能绑定最后一个方法

    // 事件的移除
    div.onclick = null;


    // 非on事件的绑定 *
    // addEventListener('事件名', 回调函数, 冒泡方式)
    div.addEventListener('click', function() {
        console.log("点击1");
    });

    var fn = function() {
        console.log("点击2");
    }
    div.addEventListener('click', fn);
    // 存在重复绑定

    // 事件的移除
    // removeEventListener('事件名', 回调函数名)
    div.removeEventListener('click', fn)
    // 注:绑定与移除需要指向同一个方法(地址)

</script>
</html>

    1、on事件绑定方式

    document.onclick = function() {
    console.log("文档点击");
}
// on事件只能绑定一个方法，重复绑定保留最后一次绑定的方法

    document.onclick = function() {
    console.log("文档点击");
}
// 事件的移除
document.onclick = null;

    2、非on事件绑定方式

    document.addEventListener('click', function() {
     console.log("点击1");
})
document.addEventListener('click', function() {
     console.log("点击2");
})
// 非on事件可以同时绑定多个方法，被绑定的方法依次被执行
// addEventListener第三个参数(true|false)决定冒泡的方式

    function fn () {}
document.addEventListener('click', fn);
// 事件的移除
document.removeEventListener('click', fn);

    二、事件参数event *********

    • 存放事件信息的回调参数

    三、事件的冒泡与默认事件

    代码示例：

    <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>冒泡和默认事件</title>
    <style type="text/css">
        .sub {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 50px;
            top: 50px;
        }
        .sup {
            width: 200px;
            height: 200px;
            background-color: orange;
            position: relative;
            /*position: absolute;
            top: 50px;
            left: 100px;*/
            margin: 50px auto;
        }
        body {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="sup">
        <div class="sub"></div>
    </div>
</body>
<script type="text/javascript">
    var sub = document.querySelector('.sub');
    var sup = document.querySelector('.sup');
    var body = document.querySelector('body');

    // 冒泡: 父子级拥有同一的事件,在子级区域触发子级事件,父级也能捕获并响应
    sub.onclick = function (ev) {
        ev.stopPropagation();
        console.log("sub click");
    };
    sup.onclick = function (ev) {
        ev.cancelBubble = true;
        console.log("sup click");
    };
    body.onclick = function (ev) {
        // 事件的兼容
        // ev = ev | event;

        // 点击传过来的是 MouseEvent,存储着鼠标触发事件的一系列信息
        console.log(ev);
        console.log("body click");
    };


    // 默认事件: 鼠标右键 oncontextmenu
    sub.oncontextmenu = function (ev) {
        // ev.preventDefault();
        console.log("sub menu click");
    };

    // 父级取消了默认事件,子级都被取消掉了
    body.oncontextmenu = function (ev) {
        console.log("body menu click");
        return false;
    };


</script>
</html>
    • 事件的冒泡：父子都具有点击事件，不处理的话，点击子级也会出发父级的点击事件
    <body id="body">
    <div id="sup">
        <div id="sub"></div>
    </div>
</body>

<script>
sub.onclick = function (ev) {
    // 方式一
    ev.stopPropagation();
    console.log("sub click");
}
sup.onclick = function (ev) {
    // 方式二
    ev.cancelBubble = true;
    console.log("sup click");
}
body.onclick = function (ev) {
    console.log("body click");
}
</script>
    • 默认事件：取消默认的事件动作，如鼠标右键菜单
    <body id="body">
    <div id="sup">
        <div id="sub"></div>
    </div>
</body>

<script>
sub.oncontextmenu = function (ev) {
    // 方式一
    ev.preventDefault();
    console.log("sub menu click");
}
sup.oncontextmenu = function (ev) {
    console.log("sup menu click");
    // 方式二
    return false;
}
body.oncontextmenu = function (ev) {
    console.log("body menu click");
}
</script>

    四、鼠标事件

    代码示例：

    <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>鼠标事件</title>
    <style type="text/css">
        .div {
            width: 200px;
            height: 200px;
            background-color: orange;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <div class="div"></div>
</body>
<script type="text/javascript">
    var div = document.querySelector('.div');

    // 双击
    div.ondblclick = function () {
        console.log("双击了");
    }

    // 鼠标按下
    div.onmousedown = function () {
        console.log("按下");
    }
    // 鼠标抬起
    div.onmouseup = function () {
        console.log("抬起");
    }
    // 鼠标移动
    div.onmousemove = function (ev) {
        // 鼠标在页面中的位置
        console.log("x的坐标:", ev.clientX);
        console.log("y的坐标:", ev.clientY);
        console.log("移动");
    }


</script>
</html>
    • 鼠标事件
    onclick：鼠标点击
ondblclick：鼠标双击
onmousedown：鼠标按下
onmousemove：鼠标移动
onmouseup：鼠标抬起
onmouseover：鼠标悬浮
onmouseout：鼠标移开
oncontextmenu：鼠标右键
    • 事件参数ev
    ev.clientX：点击点X坐标
ev.clientY：点击点Y坐标

    五、键盘事件

    代码示例：

    <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
    <style type="text/css">
        .div {
            width: 200px;
            height: 200px;
            background-color: red;
            /*margin: 50px auto;*/
            position: absolute;
            top: 0;
            left: 100px;
        }
    </style>
</head>
<body>
    <div class="div"></div>
</body>
<script type="text/javascript">
    var div = document.querySelector('.div');
    // 操作一般标签,键盘事件绑定给document
    // 表单标签(可以录入文本),键盘事件绑定给表单标签
    document.onkeydown = function (ev) {
        // console.log(ev.keyCode);
        switch(ev.keyCode) {
            case 37: 
                console.log("左");
                div.style.left = div.offsetLeft - 3 + "px";
                break;
            case 38: 
                console.log("上");
                div.style.top = div.offsetTop - 3 + "px";
                break;
            case 39: 
                console.log("右");
                div.style.left = div.offsetLeft + 3 + "px";
                break;
            case 40: 
                console.log("下");
                div.style.top = div.offsetTop + 3 + "px";
                break;
        }
    }
</script>
</html>
    • 键盘事件
    onkeydown：键盘按下
onkeyup：键盘抬起
    • 事件参数ev
    ev.keyCode：按键编号
ev.altKey：alt特殊按键
ev.ctrlKey：ctrl特殊按键
ev.shiftKey：shift特殊按键

    键盘控制平滑运动：

    <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>键盘控制平滑运动</title>
    <style type="text/css">
        .div {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 120px;
            left: 100px;
        }
    </style>
</head>
<body>
    <div class="div"></div>
</body>
<script type="text/javascript">
    var div = document.querySelector('.div');

    // 能否向左|右|上|下运动
    var l_able = false;
    var t_able = false;
    var r_able = false;
    var b_able = false;
    setInterval(function () {
        // l_able为假,则后者短路,可以实现if的简写
        l_able && (div.style.left = div.offsetLeft - 3 + 'px');  // 左
        t_able && (div.style.top = div.offsetTop - 3 + 'px');  // 上
        if (r_able == true) {
            div.style.left = div.offsetLeft + 3 + 'px';  // 右
        }
        b_able && (div.style.top = div.offsetTop + 3 + 'px');  // 下

    }, 16);

    document.onkeydown = function (ev) {
        switch(ev.keyCode) {
            case 37: l_able = true; break;
            case 38: t_able = true; break;
            case 39: r_able = true; break;
            case 40: b_able = true; break;
        }
    }

    document.onkeyup = function (ev) {
        console.log(ev);
        switch(ev.keyCode) {
            case 37: l_able = false; break;
            case 38: t_able = false; break;
            case 39: r_able = false; break;
            case 40: b_able = false; break;
        }
    }
</script>
</html>

    六、表单事件

    代码示例：

    <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>表单事件</title>
</head>
<body>
    <form action="">
        <input type="text" name="usr">
        <button type="submit">提交</button>
    </form>
    <div></div>
</body>
<script type="text/javascript">
    var form = document.querySelector('form');
    var ipt = document.querySelector('input');
    var btn = document.querySelector('button');
    var div = document.querySelector('div');

    ipt.onselect = function () {
        console.log("文本被选中了");
    }
    // 值改变就触发
    ipt.oninput = function () {
        console.log("值在改变");
        div.innerText = this.value;
    }
    // 键盘抬起触发
    ipt.onkeyup = function () {
        console.log("值在改变");
        div.innerText = this.value;
    }

    // 丢失焦点触发
    ipt.onchange = function () {
        console.log("值在改变");
        div.innerText = this.value;
    }
    // form的专有事件
    form.onsubmit = function () {
        console.log("提交");
        return false;
    }

</script>
</html>

    onfocus：获取焦点
onblur：失去焦点
onselect：文本被选中
oninput：值改变
onchange：值改变，且需要在失去焦点后才能触发
onsubmit：表单默认提交事件

    七、文档事件

    代码示例：

    <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>文档事件</title>
    <!-- 代码自身至下解析 -->
    <script type="text/javascript">
        var div = document.querySelector('div');
        console.log(div);  // null
    </script>
    <script type="text/javascript">
        // 文档加载完毕,触发
        window.onload = function () {
            var div = document.querySelector('div');
            console.log(div);
        }
    </script>
</head>
<body>
    <div class="div"></div>
</body>
<script type="text/javascript">
    window.onbeforeunload = function () {
        return false;
    }
</script>
</html>
    • 文档事件由window调用
    onload：页面加载成功
onbeforeunload：页面退出或刷新警告，需要设置回调函数返回值，返回值随意

    八、图片事件

    代码示例：

    <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>图片事件</title>
</head>
<body>
    <img src="img/001.png" alt="">
</body>
<script type="text/javascript">
    var img = document.querySelector('img');
    img.onerror = function () {
        console.log("图片加载失败了");
    }
</script>
</html>

    onerror：图片加载失败

    九、页面事件

    代码示例：

    <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>页面事件</title>
    <script type="text/javascript">
        window.onload = function () {
            window.onscroll = function () {
                console.log(window.scrollY);
            }
            window.onresize = function () {
                console.log(window);
            }

        }
    </script>
</head>
<body>
    br*100
</body>
</html>

    onscroll：页面滚动
onresize：页面尺寸调整

    window.scrollY：页面下滚距离

    相关文章

      网友评论

          本文标题：JS第六天

          本文链接：https://www.haomeiwen.com/subject/aaguzftx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|JS第六天|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！