亲宝软件园·资讯

展开

JS事件监听器

斯文~ 人气:0

什么是事件

HTML 事件是发生在 HTML 元素上的“行为 ”。比如:页面上的 按钮被点击鼠标移动到元素之上按下键盘按键 等都是事件。

事件监听就是JavaScript 可以在某一事件被触发时,执行一段预设的逻辑代码。如我们点击开灯、关灯时页面做出的相应反应其实就是通过事件监听来更换图片。

1. 事件绑定

JavaScript 提供了两种事件绑定方式:

方式一:通过 HTML标签中的事件属性进行绑定;
如下面代码,有一个按钮元素,我们是在该标签上定义 事件属性,在事件属性中绑定函数。onclick 就是 单击事件 的事件属性。onclick='on()' 表示该点击事件绑定了一个名为 on() 的函数。

<input type="button" onclick='on()'>

下面是点击事件绑定的 on() 函数

function on(){
	alert("我被点了");
}

方式二:通过 DOM 元素属性绑定
如下面代码是按钮标签,在该标签上我们并没有使用 事件属性,绑定事件的操作需要在 js 代码中实现。

<input type="button" id="btn">

下面 js 代码是获取了 id='btn' 的元素对象,然后将 onclick 作为该对象的属性,并且绑定匿名函数。该函数是在事件触发后自动执行。

document.getElementById("btn").onclick = function (){
    alert("我被点了");
}

代码示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--方式1:在下面input标签上添加 onclick 属性,并绑定 on() 函数-->
    <input type="button" value="点我" onclick="on()"> <br>
    <input type="button" value="再点我" id="btn">

    <script>
        function on(){
            alert("我被点了");
        }
      	//方式2:获取 id="btn" 元素对象,通过调用 onclick 属性 绑定点击事件
        document.getElementById("btn").onclick = function (){
            alert("我被点了");
        }
    </script>
</body>
</html>

2. 常见事件

事件属性名说明
onclick鼠标单击事件
onblur元素失去焦点
onfocus元素获得焦点
onload某个页面或图像被完成加载
onsubmit当表单提交时触发该事件
onmouseover鼠标被移到某元素之上
onmouseout鼠标从某元素移开
键盘事件可阅读官方文档了解

onfocus 获得焦点事件。

如下图,当点击了输入框后,输入框就获得了焦点。而下图示例是当获取焦点后会更改输入框的背景颜色。

onblur 失去焦点事件

如下图,当点击了输入框后,输入框就获得了焦点;再点击页面其他位置,那输入框就失去焦点了。下图示例是将输入的文本转换为大写。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form id="register" action="#" >
        <input type="text" name="username" />
        <input type="submit" value="提交">
    </form>
    <script>
        
    </script>
</body>
</html>

如上代码的表单,当我们点击 提交 按钮后,表单就会提交,此处默认使用的是 GET 提交方式,会将提交的数据拼接到 URL 后。现需要通过 js 代码实现阻止表单提交的功能,js 代码实现如下:

document.getElementById("register").onsubmit = function (){
    //onsubmit 返回true,则表单会被提交,返回false,则表单不提交
    return true;
}

加载全部内容

相关教程
猜你喜欢
用户评论