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

今天药忘吃喽~ 2021-06-26 16:06 717阅读 0赞

## 鼠标事件 ##

click：单击
    dblclick：双击
    mousedown：鼠标按下
    mouseup：鼠标抬起
    mouseover：鼠标悬浮
    mouseout：鼠标离开
    mousemove：鼠标移动
    mouseenter：鼠标进入
    mouseleave：鼠标离开

<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>

## 键盘事件 ##

keydown：按键按下
    keyup：按键抬起
    keypress：按键按下抬起

<body>
        <input id="name" type="text" onkeydown="myKeyDown(this.id)" onkeyup="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 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>
    
        <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 onclick="alert('hello')">hello</button>
        
        <button onclick="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>

## 事件冒泡与事件捕获： ##

## 阻止默认事件： ##

<body>
        <a href="http://www.baidu.com" onclick="stop(event)">百度</a>
        </body>
    
        <script> function stop(event) { if (event.preventDefault()) { event.preventDefault(); } else { event.returnValue = false; } alert("不跳转！") } </script>