Js-三大事件（鼠标事件、键盘事件、html事件）

最新推荐文章于 2024-05-13 15:06:53 发布

a_z_and_A_Z

最新推荐文章于 2024-05-13 15:06:53 发布

阅读量9.6w

点赞数 30

分类专栏： JavaScript 文章标签： javascript 鼠标移动

本文链接：https://blog.csdn.net/qwer_df_b/article/details/77509859

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

 
 鼠标事件 

 
 click：单击 

 
 dblclick：双击 

 
 mousedown：鼠标按下 

 
 mouseup：鼠标抬起 

 
 mouseover：鼠标悬浮 

 
 mouseout：鼠标离开 

 
 mousemove：鼠标移动 

 
 mouseenter：鼠标进入 

 
 mouseleave：鼠标离开 

<button οnclick="myClick()">鼠标单击</button>
<button οndblclick="myDBClick()">鼠标双击</button>
<button οnmοusedοwn="myMouseDown()" οnmοuseup="myMouseUp()">鼠标按下和抬起</button>
<button οnmοuseοver="myMouseOver()" οnmοuseοut="myMouseOut()">鼠标悬浮和离开</button>
<button οnmοusemοve="myMouseMove()">鼠标移动</button>
<button οnmοuseenter="myMouseEnter()" οnmοuseleave="myMouseLeave()">鼠标进入和离开</button>

<script>
    function myClick() {
        console.log("你单击了按钮！");
    }
    function myDBClick() {
        console.log("你双击了按钮！");
    }
    function myMouseDown() {
        console.log("鼠标按下了！");
    }
    function myMouseUp() {
        console.log("鼠标抬起了！");
    }
    function myMouseOver() {
        console.log("鼠标悬浮！");
    }
    function myMouseOut() {
        console.log("鼠标离开！")
    }
    function myMouseMove() {
        console.log("鼠标移动！")
    }
    function myMouseEnter() {
        console.log("鼠标进入！")
    }
    function myMouseLeave() {
        console.log("鼠标离开！")
    }

 
 键盘事件 

 
 keydown：按键按下 

 
 keyup：按键抬起 

 
 keypress：按键按下抬起 

<body>
<input id="name" type="text" οnkeydοwn="myKeyDown(this.id)" οnkeyup="myKeyUp(this.id)">
</body>

<script>
    /*输出输入的字符*/
    function myKeyDown(id) {
        console.log(document.getElementById(id).value);
    }
    /*按键结束，字体转换为大写*/
    function myKeyUp(id) {
        var text = document.getElementById(id).value;
        document.getElementById(id).value = text.toUpperCase();
    }
</script>

 
 HTML事件 

 
 load：文档加载完成 

 
 select：被选中的时候 

 
 change：内容被改变 

 
 focus：得到光标 

 
 resize：窗口尺寸变化 

 
 scroll：滚动条移动 

<body οnlοad="loaded()">
<div style="height: 3000px" ></div>
<input type="text" id="name" οnselect="mySelect(this.id)">
<input type="text" id="name2" οnchange="myChange(this.id)">
<input type="text" id="name3" οnfοcus="myFocus()">
</body>

<script>
    window.onload = function () {
        console.log("文档加载完毕！");
    };
    /*window.onunload = function () {
     alert("文档被关闭！");
     };*/
    /*打印选中的文本*/
    function mySelect(id) {
        var text = document.getElementById(id).value;
        console.log(text);
    }
    /*内容被改变时*/
    function myChange(id) {
        var text = document.getElementById(id).value;
        console.log(text);
    }
    /*得到光标*/
    function myFocus() {
        console.log("得到光标！");
    }
    /*窗口尺寸变化*/
    window.onresize = function () {
        console.log("窗口变化！")
    };
    /*滚动条移动*/
    window.onscroll = function () {
        console.log("滚动");
    }
</script>

 
 事件模型： 

<body>
<!--脚本模型：行内绑定-->
<button οnclick="alert('hello')">hello</button>
<!--内联模型-->
<button οnclick="showHello()">hello2</button>
<!--动态绑定-->
<button id="btn">hello3</button>
</body>

<script>
    function showHello() {
        alert("hello");
    }
    /*DOM0：同一个元素只能添加一个同类事件
     * 如果添加多个，后面的会把前面的覆盖掉*/
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        alert("hello");
    };
    btn.onclick = function () {
        alert("hello world");
    };
    /*DOM2:可以给一个元素添加多个同类事件*/
    btn.addEventListener("click", function () {
        alert("hello1");
    });
    btn.addEventListener("click", function () {
        alert("hello2");
    });
    /*不同浏览器的兼容写法*/
    /*IE*/
    if (btn.attachEvent) {
        btn.attachEvent("onclick", function () {
            alert("hello3");
        });
    /*W3C*/
    } else {
        btn.addEventListener("click", function () {
            alert("hello4");
        })
    }
</script>

 
 事件冒泡与事件捕获： 

 <style>
        #div1{
            width: 400px;
            height: 400px;
            background-color: #0dfaff;
        }
        #div2{
            width: 300px;
            height: 300px;
            background-color: #33ff66;
        }
        #div3{
            width: 200px;
            height: 200px;
            background-color: #fff24a;
        }
        #div4{
            width: 100px;
            height: 100px;
            background-color: #ff4968;
        }
    </style>

 <title>事件冒泡、事件捕获</title>
</head>
<body>
<div id="div1">
    <div id="div2">
        <div id="div3">
            <div id="div4">

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

<script>
    var div1 = document.getElementById("div1");
    div1.addEventListener("click",function (event) {
        /*阻止事件冒泡*/
        event.stopPropagation();
        alert("div1");
    },false);
    var div2 = document.getElementById("div2");
    div2.addEventListener("click",function (event) {
        /*阻止事件冒泡*/
        event.stopPropagation();
        alert("div2");
    },false);
    var div3 = document.getElementById("div3");
    div3.addEventListener("click",function (event) {
        /*阻止事件冒泡*/
        event.stopPropagation();
        alert("div3");
    },false);
    var div4 = document.getElementById("div4");
    div4.addEventListener("click",function (event) {
        /*阻止事件冒泡*/
        event.stopPropagation();
        alert("div4");
    },false);
</script>

 
 阻止默认事件： 

<body>
<a href="http://www.baidu.com" οnclick="stop(event)">百度</a>
</body>

<script>
    function stop(event) {
        if (event.preventDefault()) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
        alert("不跳转！")
    }
</script>