JavaScript事件的总结

最新推荐文章于 2022-05-07 16:21:42 发布

外太空程序员

最新推荐文章于 2022-05-07 16:21:42 发布

阅读量508

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/qq_48516121/article/details/121140196

版权

一、基本的事件类型：

1.单击:onclick

2.双击事件:ondbclick

3.加载:onload

4.得到焦点：onfocus

5.失去焦点:onblur

6.改变事件:onchang

7.鼠标移入:onmoursover

8.鼠标移出:onmouseout

二、基本事件的应用与案

1、单击事件：onclick

2、双击事件：ondbclick

例题：

<body>

姓名：<input type="text" id="t1"><br/>

姓名：<input type="text" id="t2"><br/>

* 需求：单击事件的实现

* 单机复制文本，双击清楚文本内容

* 实现步骤：

* 1、根据id拿到框1的文本内容，再根据id把框1的内容赋值给到框2

* 2、只要把两个框的文本内容置空就可以了

* */

//匿名函数多数使用变量调用

document.getElementById("b1").οnclick=function (){

//复制文本内容，把t1的值赋值给t2

document.getElementById("t2").value=document.getElementById("t1").value;

};

//清空两个输入框

document.getElementById("b1").οndblclick=function () {

document.getElementById("t2").value="";

document.getElementById("t1").value="";

}

</script>

</body>

3、加载事件：onload

<head>

</head>

<body>

* 加载事件

* 需求：

* 有两个按钮，点第一个就弹出信息框，点第二个就弹出另一个信息框，分别使用两种不同的方式去激活事件

* 使用匿名函数去处理

* 使用命名函数去处理

* */

//定义一个命名函数

function clickME() {

alert("命名函数！");

}

//匿名函数，加载完毕后自动点击

window.οnlοad=function () {

document.getElementById("b2").οnclick=alert("匿名函数！");

}

</script>

</body>

总结：

事件的两种驱动方式

1、使用命名函数的处理方式

在标签上直接使用 on事件名=“处理函数名()”

2、使用匿名函数的处理方式

元素的对象.on事件名=funcation(){

}

4、得到焦点：onfocus

5、失去焦点：onblur

焦点事件demo

当文本框失去焦点，显示后面的文字，获取到焦点时，

<body>

用户名：<input type="text" id="user"><span id="information"style="color: red"></span>

<br/>

密   码：<input type="password" id="pass"><span id="infor"style="color: red"></span>

// Onload 作用：在执行脚本动作之前，先把网页上的所有元素先加载到内存当中，然后再脚本，

// 假如元素是写在script脚本之后，那这个时候代码是不会优先去加载元素，所以onload可以解决这个问题。

// οnlοad=function () {

// document.getElementById("b1").οnclick=function () {

// alert("加载完毕后才能发现元素。")

// }

//设置user获取到焦点的事件

document.getElementById("user").οnfοcus=function () { //得到焦点

document.getElementById("information").innerText=" ";

}

document.getElementById("user").οnblur=function () {

document.getElementById("information").innerText="用户名不能为空";

}

//设置密码框

document.getElementById("pass").οnfοcus=function () { //失去焦点

document.getElementById("infor").innerText=" ";

}

document.getElementById("pass").οnblur=function () {

document.getElementById("infor").innerText="密码不能为空";

}

</script>

</body>

6、改变事件：onchange

改变事件：

需求：选中不同的省份，出现一个信息显示选中的城市。

例题1：

<head>

</head>

<body>

</select>

</select>

function changee(value){

if (value=="广东"){

document.getElementById("one").innerText="东莞";

}else if (value=="湖南"){

document.getElementById("one").innerText="长沙";

}else if (value=="江西"){

document.getElementById("one").innerText="南昌";

//document.getElementById("city").append("<option></option>")

}

</script>

</body>

例题2：

<head>

</head>

<body>

用户名：<input type="text" id="eng" >

//转大写的属性

document.getElementById("eng").οnchange=function (){

//这里的this表示document.getElementById("eng")这个对象

//转大写字母

this.value=this.value.toUpperCase();

//上面的等价于：document.getElementById("eng").value=document.getElementById("eng").value.toUpperCase();

}

</script>

</body>

7、鼠标移入：onmouseover

当鼠标的指针移动到这个元素上面，激活的这个事件

8、鼠标移出：onmouseout

当鼠标移出这个元素

例题1：

<head>

<style>

body {

text-align: center;

}

</style>

</head>

<body>

* 需求

* 将鼠标移动到img上就显示图片，移出则显示另一张图片

* 图片设置一下边框，设置宽度

* */

//鼠标移入

// document.getElementById("imgg").οnmοuseοver=function () {

// this.src="./images/2.jpg";

// }

// //鼠标移出

document.getElementById("imgg").οnmοuseοut=function () {

this.src="./images/3.jpg";

}

//鼠标移入的第二种方法

function changePic(obje) {

obje.src="./images/2.jpg";

}

</script>

</body>

this关键字的作用

1、出现在元素的事件方法中：

这个作为调用的函数的传参，this能够把当前的元素作为对象 传给调用者。作用：省去了脚本当中去获取元素的代码。

2、出现在匿名函数的代码中：

document.getElementById("imgg").οnmοuseοut=function () {

this.src="./images/3.jpg";

}

这个this出现在匿名函数的代码中，相当于在定义函数时 获取到的对象，用this能够再次省略掉获取元素的方法。

this的作用就是：省略了获取元素对象的代码；

this出现在哪个位置，它都是代表是自己（当前元素的对象）

总结：

事件名	语法	说明
鼠标的单击	onclick
鼠标的双击事件	ondbaclick
加载完毕	onload	在执行函数前能提前加载完所有网页上的元素
得到焦点	onfoucs
失去焦点	onblur
改变事件	onchange
鼠标移入	onmouseover
鼠标移出	onmouserout