JavaScript——事件

最新推荐文章于 2024-02-16 17:42:45 发布

时光·漫步zth

最新推荐文章于 2024-02-16 17:42:45 发布

阅读量361

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_41573234/article/details/84891066

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一. Event 对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

二. 事件句柄

1. onblur

定义和用法：

onblur 事件会在对象失去焦点时发生。

语法：

οnblur="SomeJavaScriptCode"

【例】定义三个框，当第1个框和第2个框都有数字内容后，并且第2个框失去了焦点时，第3个框显示前两个框中数字的和。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
</div>
<script>
    function f() {
        if(input1.value != "" && input2.value != ""){
            output.value =(+input1.value)+(+input2.value);
        }else {
            output.value = "Error";
        }
    }
</script>
    <input type="text" id = "input1" >+
    <input type="text" id = "input2"  onblur="f()">=
    <input type="text" disabled = disabled id="output">
</body>
</html>

执行结果：

2. onchange

定义和用法:

onchange 事件会在域的内容改变时发生。（该事件必须在改变框中内容之后，将光标点出框之外才能触发。）

语法:

onchange="SomeJavaScriptCode"

支持该事件的 HTML 标签：

<input type="text">, <select>, <textarea>

支持该事件的 JavaScript 对象：

fileUpload, select, text, textarea

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
</div>
<script>
    function upperCase(x) {
       var con = document.getElementById(x).value;
       document.getElementById(x).value = con.toUpperCase();
    }
</script>
    请输入你的姓名：
    <input type="text" id = "fname" onchange=" upperCase(this.id)" >
</body>
</html>

3. oninput

一旦改变框中的值，就会立刻触发，不需要将光标移出。

4. onclick

onclick 事件会在对象被点击时发生。

请注意， onclick 与 onmousedown 不同。单击事件是在同一元素上发生了鼠标按下事件之后又发生了鼠标放开事件时才发生的。

语法:

onclick="SomeJavaScriptCode"

【例】当按钮被单击时，第一个输入框中的文本会被拷贝到第二个输入框中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
</div>
<script>
    function copy() {
       var con = document.getElementById("in1").value;
       document.getElementById("in2").value = con;
    }
</script>

Field1:<input type="text" id = "in1"  ><br/><br/>
Field2:<input type="text" id = "in2"  ><br/><br/>
点击按钮，把 Field1 的内容复制到 Field2 中：<br/><br/>
    <button onclick = "copy()">copy text</button>
</body>
</html>

5. ondblclick

定义和用法:

ondblclick 事件会在对象被双击时发生。

语法:

ondblclick="SomeJavaScriptCode"

6. onfocus

定义和用法:

onfocus 事件在对象获得焦点时发生。

语法:

onfocus="SomeJavaScriptCode"

【例】当输入框获得焦点时，其背景颜色将改变，失去焦点时变回原来的颜色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
</div>
<script>
    function setStyle() {
       document.getElementById("name").style.backgroundColor = "#abcdef";
    }
    function setStyle1() {
        document.getElementById("name").style.backgroundColor = "#fff";
    }
</script>

name :<input type="text" id = "name" onfocus = "setStyle()" onblur="setStyle1()" ><br/><br/>

</body>
</html>

7. onkeydown

onkeydown 事件会在用户按下一个键盘按键时发生。

语法：

onkeydown="SomeJavaScriptCode"

8. onkeypress

onkeypress 事件会在键盘按键被按下并释放一个键时发生。

语法：

onkeypress="SomeJavaScriptCode"

9. onkeyup

onkeyup 事件会在键盘按键被松开时发生。

语法：

onkeyup="SomeJavaScriptCode"

onfocus	元素获得焦点。
onkeydown	某个键盘按键被按下。
onkeypress	某个键盘按键被按下并松开。
onkeyup	某个键盘按键被松开。
onload	一张页面或一幅图像完成加载。
onmousedown	鼠标按钮被按下。
onmousemove	鼠标被移动。
onmouseout	鼠标从某元素移开。
onmouseover	鼠标移到某元素之上。
onmouseup	鼠标按键被松开。
onreset	重置按钮被点击。
onresize	窗口或框架被重新调整大小。
onselect	文本被选中。
onsubmit	确认按钮被点击。
onunload	用户退出页面。

时光·漫步zth

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript——事件

一. Event 对象Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行！二.事件句柄1. onblur定义和用法：onblur 事件会在对象失去焦点时发生。语法：onblur="SomeJavaScriptCode"【例】定义三个框，当第1个框和第...
复制链接

扫一扫