JavaScript

js事件基础

Nick · 1月27日 · 2020年本文6474字 · 阅读17分钟836

事件绑定

什么是事件绑定?
可以在一个事件上增加多个函数,详细如下

<body>
        <input type="button" name="" id="btn1" value="按钮" />
        <script type="text/javascript">
            var btn=document.getElementById("btn1");
            // 事件绑定方法:attachEvent(事件,函数):兼容火狐和IE
            /* btn.attachEvent(onclick,function(){
                alert("被点击了a")
            })
            btn.attachEvent(onclick,function(){
                alert("被点击了b")
            }) */

            //事件绑定方法:addEventListener(事件名,函数布尔值):兼容谷歌,360等
            btn.addEventListener("click",function(){
                alert("被点击了a")
            });
            btn.addEventListener("click",function(){
                alert("被点击了b")
            })

            //没有用事件绑定,前面一个事件被覆盖
            /* btn.onclick=function(){
                alert("被点击了a")
            }
            btn.onclick=function(){
                alert("被点击了b")
            } */
        </script>
    </body>

可以实现点击一次按钮,执行两个函数里面的内容,
需要注意的是attachEvent方法和addEventListener的使用,这是一个兼容性的问题
兼容性:IE支持attachEvent而不支持addEventListener,否则会报错;而谷歌火狐则支持addEventlistener。所以存在兼容性的问题。

事件冒泡

事件冒泡就是当事件的对象有父子级关系时,当执行子级事件后,父级事件也会因为事件冒泡,也会执行,因此,大多数时候,事件冒泡需要消除。
使用event.cancelBubble = true;方法来消除事件冒泡
案例如下

<body>
        <button type="button" id="btn">显示</button>
        <div id="box">

        </div>
        <script type="text/javascript">
            var btn = document.getElementById("btn");
            var div = document.getElementById("box")
            btn.onclick = function(e) {
                var oEvent = e || event;
                div.style.display = "block";
                // alert("按钮被点击了");

                //阻止事件冒泡
                oEvent.cancelBubble = true;
            }
            document.onclick = function() {
                div.style.display = "none";
                // alert("document被点击了");
            }
        </script>
    </body>

事件对象的兼容性

在火狐或者谷歌浏览器下,使用事件的方法是将函数中传进来的e;
而在IE浏览器下,使用事件不需要传进e,直接使用event。
所以为了避免事件的兼容性问题
var oEvent = e || event;
一般使用这样的方法来消除浏览器对事件的兼容

鼠标点击事件

鼠标的位置

oevent.clientX:返回鼠标的横坐标的位置
oevent.clientY:返回鼠标的纵坐标的位置

<body>
        <script type="text/javascript">
            document.onclick=function(e){
                //IE支持event
                //火狐不支持event,必须从函数中传进一个事件
                //所以一般避免兼容性,会使用var oevent=e||event;
                var oevent=e||event;
                alert("鼠标横坐标是:"+oevent.clientX+"  纵坐标是:"+oevent.clientY)
            }
        </script>
    </body>

鼠标跟踪

鼠标跟踪是实现对象跟着鼠标移动,其实就是在onmousemove函数中将改对象的横纵坐标都赋值为鼠标的横纵对象
实现如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            document.onclick=function(e){
                //IE支持event
                //火狐不支持event,必须从函数中传进一个事件
                //所以一般避免兼容性,会使用var oevent=e||event;
                var oevent=e||event;
                alert("鼠标横坐标是:"+oevent.clientX+"  纵坐标是:"+oevent.clientY)
            }
        </script>
    </body>
</html>

鼠标跟踪小案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div {
                width: 10px;
                height: 10px;
                background-color: #FF69B4;
                position: absolute;
            }
        </style>
    </head>
    <body>

        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>


        <script type="text/javascript">
            function getPos(e) {
                //避免鼠标滚动
                var scorllTop = document.documentElement.scrollTop || document.body.scrollTop;
                var scorllLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
                return {
                    x: e.clientX + scorllLeft,
                    y: e.clientY + scorllTop
                };
            }

            document.onmousemove = function(e) {
                var div = document.getElementsByTagName("div");
                var oEvent = e || event;
                var pos = getPos(oEvent);
                for (var i = div.length - 1; i > 0; i--) {
                    div[i].style.left = div[i - 1].offsetLeft + "px";
                    div[i].style.top = div[i - 1].offsetTop + "px";
                }
                div[0].style.left = pos.x + "px";
                div[0].style.top = pos.y + "px";

            }
        </script>
    </body>
</html>

实现效果如下
在这里插入图片描述

(ps:可以将div小方块换成自己喜欢的图片 ^ _ ^ )

小案例——自定义右菜单

1.实现点击鼠标右键弹出自己的菜单
2.实现点击空白时,菜单消失
3.实现点击菜单时,菜单不会消失(事件冒泡)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            ul{
                width: 100px;
                height: 150px;
                background: #ADD8E6;
                list-style: none;
                position: absolute;
                padding-left: 5px;
                display: none;
            }
            li{

            }
        </style>
    </head>
    <body>
        <ul>
            <li>abc</li>
            <li>abc</li>
            <li>abc</li>
            <li>abc</li>
        </ul>

        <script type="text/javascript">
            //点击鼠标右键弹出自己的菜单
            document.oncontextmenu=function(e){
                var oEvent=e|| event;

                ull[0].style.display="block";
                ull[0].style.left=oEvent.clientX+"px";
                ull[0].style.top=oEvent.clientY+"px";
                //阻止默认行为
                return false;



            }
            //点击空白时,菜单消失
            document.onclick=function(){
                var ull=document.getElementsByTagName("ul");
                ull[0].style.display="none";
            }
            //点击菜单时,菜单不会消失
            var ull=document.getElementsByTagName("ul");
            ull[0].onclick=function(e){
                var oEvent=e|| event;
                //阻止冒泡
                oEvent.cancelBubble = true;
            }

        </script>
    </body>
</html>

效果如下
在这里插入图片描述

键盘事件

键盘控制移动

使用 oEvent.keyCode=="数字" 来监听按下了键盘的哪一个键
数字是ASCII码值

<body>
        <div id="box">

        </div>

        <script type="text/javascript">
            document.onkeydown=function(e){
                var oEvent=e|| event;
                var div =document.getElementById("box");
                if(oEvent.keyCode==37){
                    div.style.left=div.offsetLeft-10+"px";
                }
                else if(oEvent.keyCode==39){
                    div.style.left=div.offsetLeft+10+"px";
                }
            }

        </script>
    </body>

可以控制div方块左右移动

键盘提交

就是按下 回车 或者 ctr + 回车 键,来对信息进行提交
本案例借用了前几篇文档中的运动封装:animate.js
代码如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            .ull {
                width: 300px;
                height: 400px;
                background-color: lightblue;
                /* 超出部分显示滚动条 */
                margin: 20px auto;
                border: 5px solid #8A2BE2;
                overflow-y: auto;
                /* 让字符换行显示 */
                word-wrap: break-word;


            }

            .ull li {
                border-bottom: 1px dashed #999;
                list-style: none;
                padding: 4px;
                padding-left: 20px;
                /* overflow: hidden; */
                opacity: 0;

            }

            .txt {
                margin: 20px 10px;
            }
        </style>
        <script src="封装animate.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <textarea rows="4" cols="40" class="txt"></textarea>
        <button type="button" class="btn">发布</button>
        <ul class="ull">

        </ul>

        <script type="text/javascript">
            //获取各个元素的节点
            var Otext = document.querySelector(".txt");
            var Obtn = document.querySelector(".btn");
            var Oul = document.querySelector(".ull");

            // 点击发布按钮,就将文本框的内容插入到容器中
            Obtn.onclick = function() {
                var Oli = document.createElement("li");
                Oli.innerHTML = Otext.value;
                Otext.value = "";
                if (Oul.children.length > 0) {
                    Oul.insertBefore(Oli, Oul.children[0]);
                } else {
                    Oul.appendChild(Oli);
                }
                //运动
                var iHeight = Oli.offsetHeight;
                Oli.style.height = "0";
                animate(Oli, {
                    height: iHeight
                }, function() {
                    animate(Oli, {
                        opacity: 100
                    })
                })
            }

            //实现键盘提交
            Otext.onkeydown = function(e) {
                var oEvent = e || event;
                //按ctrl加回车提交
                if (oEvent.keyCode == 13 && oEvent.ctrlKey) {
                    var Oli = document.createElement("li");
                    Oli.innerHTML = Otext.value;
                    Otext.value = "";
                    if (Oul.children.length > 0) {
                        Oul.insertBefore(Oli, Oul.children[0]);
                    } else {
                        Oul.appendChild(Oli);
                    }
                    //运动
                    var iHeight = Oli.offsetHeight;
                    Oli.style.height = "0";
                    animate(Oli, {
                        height: iHeight
                    }, function() {
                        animate(Oli, {
                            opacity: 100
                        })
                    })
                }
            }
        </script>

    </body>
</html>

实现效果如下
在这里插入图片描述

只能输入数字的文本框

该文本框要实现
1.只能输入数字:可以按大键盘上的数字,也可以按小键盘的数字
2.可以进行回删,按backspace键
3.按方向键可以移动光标位置
实现代码如下

<body>
        <input type="text" name="" id="txt" value="" />
        <script type="text/javascript">
            var otxt = document.getElementById("txt");
            otxt.onkeydown = function(e) {
                var oEvent = e || event;
                // alert(oEvent.keyCode)
                //只能输入数字
                if (oEvent.keyCode != 8 && oEvent.keyCode != 37 && oEvent.keyCode != 39 && (oEvent.keyCode < 48 || oEvent.keyCode >
                        57) && (oEvent.keyCode < 96 || oEvent.keyCode > 105)) {
                    //阻止默认事件
                    return false;
                }
            }
        </script>
    </body>
0 条回应
在线人数:1人 来访统计
说谎
林宥嘉
隐藏