blog
原创

JavaScript——事件Event对象

@[TOC]

事件

某些组件被执行某些操作之后触发某些代码的执行

  • 事件:某些操作 如单击 双击 键盘按下 鼠标移动
  • 事件源:某些组件 如 按钮 文本框
  • 监听器:某些代码
  • 注册监听:将事件,事件源和监听器绑定在一起,当事件源上发生某个事件,则触发监听器

注册监听方式

参考简单事件入门

  1. 使用标签体内属性
<div onclick="alert('click')"></div>
  1. 通过元素对象设置属性
var div = document.getElementById("div");
div.onclick = function(){
    alert("click");
}

常见事件

一. 点击事件

事件 描述
onclick 单击事件
ondbclick 双击事件
<div id="div1"></div>
<script>
    var div = document.getElementById("div1");
    /*
       div.onclick = function () {
          alert("div被单击");
       }
     */
    div.ondblclick = function () {
        alert("div被双击");
    }
</script>

二. 焦点事件

事件 描述
onblur 失去焦点
onfocus 获得焦点
var input = document.getElementById("input1");
input.onblur = function () {
    console.log("失去焦点");
}
input.onfocus = function () {
    console.log("获得焦点");
}

三. 加载事件

事件 描述
onload 页面或图片加载完成

在之前的JS学习中,我们知道JS代码可以插入到html文件的任何部分,但是在获取元素对象时,如果获取对象的代码在该对象之前,则会获取到null对象

<script>
    alert(document.getElementById("div"));  // 弹出null
</script>
<div id="div"></div>

这是因为在JS代码执行时,他下面的div元素并没有加载出来,当时我们通过将JS代码移到div元素之下解决,同样,我们可以使用onload方法在页面加载完成后执行JS代码

<script>
    window.onload = function () {
        alert(document.getElementById("div"));
    }
</script>
<div id="div"></div>

四. 鼠标事件

事件 描述
onmousedown 鼠标按键被按下
onmouseup 鼠标按键被松开
onmousemove 鼠标被移动
onmouseover 鼠标移到某元素之上
onmouseout 鼠标从某元素移开
var div = document.getElementById("div1");
div.onmouseover = function () {
    console.log("鼠标移动到div");
}
div.onmousedown = function () {
    console.log("鼠标点击div");
}
div.onmouseout = function () {
    console.log("鼠标离开div");
}
div.onmouseup = function () {
    console.log("鼠标松开");
}
div.onmousemove = function () {
    console.log("鼠标在div上移动");
}

五. 键盘事件

事件 描述
onkeydown 某个键盘按键被按下
onkeyup 某个键盘按键被松开
onkeypress 某个键盘按键被按下并松开
window.onkeydown = function () {
    console.log("键盘按键按下");
}
window.onkeyup = function () {
    console.log("键盘按键松开");
}
window.onkeypress = function () {
    console.log("键盘按键按下并松开");
}

六. 选中/改变事件

事件 描述
onchange 文本被改变
onselect 文本被选中
var input = document.getElementById("input1");
input.onchange = function () {
    console.log("内容改变");
}
input.onselect = function () {
    console.log("内容被选中");
}

该事件一般用于下拉选项框,实现联动事件

<select id="select">
    <option>请选择</option>
    <option>AAA</option>
    <option>BBB</option>
    <option>CCC</option>
</select>
<script>
    var selection = document.getElementById("select");
    selection.onchange = function () {
        console.log("选项改变");
    }
</script>

七. 表单事件

事件 描述
onsubmit 确认按钮被点击
onreset 重置按钮被点击
var form = document.getElementById("from");
form.onsubmit = function () {
    alert("表单提交");
}

onsubmit可以阻止表单提交,如果事件触发的方法返回true或无返回值,表单则被提交,如果返回false,则阻止表单提交

JavaScript
  • 作者:Melonico
  • 发表时间:2021-03-15 17:42
  • 更新时间:2021-03-15 17:42

评论

暂无评论,快来发表第一个评论吧!
留言
TOP