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

来源：互联网发布：淘宝美工都需要做什么编辑：程序博客网时间：2024/05/01 07:04

鼠标事件

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>

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

事件冒泡与事件捕获：

 <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" onclick="stop(event)">百度</a></body>

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

阅读全文

0 0