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

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

阅读量：2342 次

发布时间：2019-05-10

本文共 4458 字，大约阅读时间需要 14 分钟。

鼠标事件

click：单击

dblclick：双击

mousedown：鼠标按下

mouseup：鼠标抬起

mouseover：鼠标悬浮

mouseout：鼠标离开

mousemove：鼠标移动

mouseenter：鼠标进入

mouseleave：鼠标离开

[html]
 
 
<button onclick="myClick()">鼠标单击</button>  
<button ondblclick="myDBClick()">鼠标双击</button>  
<button onmousedown="myMouseDown()" onmouseup="myMouseUp()">鼠标按下和抬起</button>  
<button onmouseover="myMouseOver()" onmouseout="myMouseOut()">鼠标悬浮和离开</button>  
<button onmousemove="myMouseMove()">鼠标移动</button>  
<button onmouseenter="myMouseEnter()" onmouseleave="myMouseLeave()">鼠标进入和离开</button>  

[html]
 
 
<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：按键按下抬起

[html]
 
 
<body>  
<input id="name" type="text" onkeydown="myKeyDown(this.id)" onkeyup="myKeyUp(this.id)">  
</body>  

[javascript]
 
 
<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：滚动条移动

[html]
 
 
<body onload="loaded()">  
<div style="height: 3000px" ></div>  
<input type="text" id="name" onselect="mySelect(this.id)">  
<input type="text" id="name2" onchange="myChange(this.id)">  
<input type="text" id="name3" onfocus="myFocus()">  
</body>  

[html]
 
 
<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>  

事件模型：

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

[html]
 
 
<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>  

事件冒泡与事件捕获：

[css]
 
 
<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>  

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

[html]
 
 
<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>  

阻止默认事件：

[html]
 
 
<body>  
<a href="http://www.baidu.com" onclick="stop(event)">百度</a>  
</body>  

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