web事件

最新推荐文章于 2024-06-13 02:48:16 发布

m0_65470938

最新推荐文章于 2024-06-13 02:48:16 发布

阅读量474

点赞数 5

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_65470938/article/details/139062263

版权

一、事件处理程序

事件处理程序分为：

HTML事件处理
DOM0级事件处理
DOM2级事件处理

1.HTML事件处理

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>Js事件详解--事件处理</title>
    </head>
    <body>
        <div id="div">
            <button id="btn1" onclick="demo()">按钮</button>
        </div>
        <script>
            function demo(){
                alert("hello html事件处理");
            }
        </script>
    </body>
</html>

2.DOM0级事件处理

<body>
    <div id="div">
        <button id="btn1">按钮</button>
    </div>
    <script>
        var btn1=document.getElementById("btn1");
        btn1.onclick=function(){alert("Hello DOM0级事件处理程序1");}//被覆盖掉
        btn1.onclick=function(){alert("Hello DOM0级事件处理程序2");}
    </script>
</body>

3.DOM2级事件处理

<body>
    <div id="div">
        <button id="btn1">按钮</button>
    </div>
    <script>
        var btn1=document.getElementById("btn1");
        btn1.addEventListener("click",demo1);
        btn1.addEventListener("click",demo2);
        btn1.addEventListener("click",demo3);
        function demo1(){
            alert("DOM2级事件处理程序1")
        }
        function demo2(){
            alert("DOM2级事件处理程序2")
        }
        function demo3(){
            alert("DOM2级事件处理程序3")
        }
        btn1.removeEventListener("click",demo2);
    </script>
</body>

二、事件类型之鼠标事件

常用的事件：

mousedown：按下鼠标键时触发
mouseup：释放按下的鼠标键时触发
mousemove：当鼠标在节点内部移动时触发。当鼠标持续移动时，该事件会连触发。
mouseover：鼠标进入一个节点时触发，进入子节点会再一次触发这个事件
mouseout：鼠标离开一个节点时触发，离开父节点也会触发这个事件

绑定事件：

鼠标事件测试<br>
onMouseDown :<input type="text" name="" onMouseDown="omd(this)"/><br>
onMouseMove :<input type="text" name="" onMouseMove="omm(this)"/><br>
onMouseout :<input type="text" name=""  onMouse0ut="omout()” /><br>
onMouseOver :<input type="text" name="" onMouseOver="omover()”/><br>
onMouseUp :<input type="text" name="" onMouseUp="omu()"/><br>

处理函数：

//onMouseDown()按下
function omd(){
console.log("你按下鼠标要干吗?"
}
//onMouseMove()移动
function omm(inp){
inp.value =“不许动!"+ Math.random();
}
//onMouseout()移出
function omout(){
console.log("你要把鼠标拿哪去?")
}
//onMouseover()移入
function omover(){
console.log(“不要在我上面乱动?）"
}
//onMouseup()松开
function omu(){
console.log("你松开鼠标了?"）
}

三、事件类型之键盘事件

键盘事件由用户击打键盘触发，主要有keydown、keypress、keyup三个事件

keydown：按下键盘时触发。
keypress：按下有值的键时触发，即按下 Ctrl、Alt、Shift、Meta 这样无值的键，这个事件不会触发。对于有值的键，按下时先触发keydown事件，再触发这个事件。
keyup：松开键盘时触发该事件

//onKeyDown()
//键盘按下
function okd(event){
    console.log("onkeyDown:" + event .keycode)
}
//onKeyPress()//按键盘
function okp(event){
    console.log("onkeyPress:" + event.keycode)
}
//onKeyup()//键盘弹起
function oku(event){
    console.log("onkeyup:" + event.keyCode)
}

四、事件类型之表单事件

表单事件是在使用表单元素及输入框元素可以监听的一系列事件

input事件
select事件
Change事件
reset事件
submit事件

input事件

input事件当<input>、<select>、<textarea>的值发生变化时触发。对于复选框（<input type=checkbox>）或单选框（<input type=radio>），用户改变选项时，也会触发这个事件

input事件的一个特点，就是会连续触发，比如用户每按下一次按键，就会触发一次input事件。

var username = document.getElementById("username");
username.oninput = function(e){
    console.log(e.target.value);
}

select事件

select事件当在<input>、<textarea>里面选中文本时触发

// <input id="test" type="text" value="Select me!" />

var elem = document.getElementById('test');
elem.addEventListener('select', function (e) {
  console.log(e.type); // "select"
}, false);

Change 事件

Change事件当<input>、<select>、<textarea>的值发生变化时触发。它与input事件的最大不同，就是不会连续触发，只有当全部修改完成时才会触发

var email = document.getElementById("email");
email.onchange = function(e){
    console.log(e.target.value);
}

reset 事件，submit 事件

这两个事件发生在表单对象<form>上，而不是发生在表单的成员上。

reset事件当表单重置（所有表单成员变回默认值）时触发。

submit事件当表单数据向服务器提交时触发。注意，submit事件的发生对象是<form>元素，而不是<button>元素，因为提交的是表单，而不是按钮

<form id="myForm" onsubmit="submitHandle">
    <button onclick="resetHandle">重置数据</button>
    <button>提交</button>
</form>
var myForm = document.getElementById("myForm")
function resetHandle(){
    myForm.reset();
}
function submitHandle(){
    console.log("提交");
}

m0_65470938

关注

5
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
web事件

keypress：按下有值的键时触发，即按下 Ctrl、Alt、Shift、Meta 这样无值的键，这个事件不会触发。对于有值的键，按下时先触发keydown事件，再触发这个事件。它与input事件的最大不同，就是不会连续触发，只有当全部修改完成时才会触发。input事件的一个特点，就是会连续触发，比如用户每按下一次按键，就会触发一次input事件。mouseover：鼠标进入一个节点时触发，进入子节点会再一次触发这个事件。mouseout：鼠标离开一个节点时触发，离开父节点也会触发这个事件。
复制链接

扫一扫