JavaScript——JS事件

胖虎不秃头

已于 2022-07-28 22:16:17 修改

阅读量536

点赞数 4

分类专栏： JavaScript 文章标签： javascript 前端 html

于 2022-07-28 22:15:56 首次发布

本文链接：https://blog.csdn.net/m0_61163395/article/details/126045230

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

05 JS事件

05 JS事件

任何一个事件都会对应一个事件句柄，事件句柄是在事件前添加on
onXXX这个事件句柄出现在一个标签的属性位置上。（事件句柄以属性的形式存在。）

5.1 常用事件

焦点是光标的获得与失去

blur失去焦点、
focus获得焦点

鼠标点击事件

click鼠标单击
dblclick鼠标双击

键盘事件

keydown键盘按下
keyup键盘弹起

鼠标事件

mousedown鼠标按下
mouseover鼠标经过
mousemove鼠标移动
mouseout鼠标离开
mouseup鼠标弹起

表单事件

reset表单重置
submit表单提交

其他事件

change下拉列表选中项改变，或文本框内容改变
select文本被选定
load页面加载完毕（整个HTML页面中所有的元素全部加载完毕之后发生。）

5.2 注册事件方式

回调函数的特点:由其他程序负责调用该函数

第一种方式，直接在标签中使用事件句柄

<script>
    function sayHello(){
       alert("hello js!");
    }
</script>
<!--以下代码的含义是：将sayHello函数注册到按钮上，等待click事件发生之后，该函数被浏览器调用。我们称这个函数为回调函数。-->
<input type="button" value="hello" onclick="sayHello()"/>

第二种方式，使用js代码完成事件注册

<input type="button" value="hello4" id="mybtn2" />
<script type="text/javascript">
	function doSome(){
		alert("do some!");
	}
// 第一步:先获取这个按钮对象(document是全部小写，内置对象，可以直接用，document就代表整个HTML页面)
var btnObj = document.getElementById("mybtn");
// 第二步:给按钮对象的onclick属性赋值
btnObj.onclick = doSome; 
// 注意:别加小括号. btnObj.onclick = doSome();这是错误的写法.
// 这行代码的含义是,将回调函数doSome注册到click事件上.
</script>

第三种注册方式，使用匿名函数

var mybtn1 = document.getElementById("mybtn");
mybtn1.onclick = function(){ // 匿名函数,这个匿名函数也是一个回调函数.
    alert("test.........."); // 这个函数在页面打开的时候只是注册上,不会被调用,在click事件发生之后才会调用.
}

将其合并

document.getElementById("mybtn").onclick = function(){
   alert("test22222222.........");
}

5.3 代码执行顺序

<script type="text/javascript">
    // 第一步:根据id获取节点对象
    var btn = document.getElementById("btn");
	// 返回null(因为代码执行到此处的时候id="btn"的元素还没有加载到内存)

    // 第二步:给节点对象绑定事件
    btn.onclick = function(){
        alert("hello js");
    }
</script>

<input type="button" value="hello" id="btn" />

执行错误，返回了null，因为还未获取到id元素，
所以我们添加上面的一个函数load()，页面加载完的时候才会发生

<!-- load事件什么时候发生？页面全部元素加载完毕之后才会发生。-->
<body onload="ready()">
    <script type="text/javascript">
    function ready(){
       var btn = document.getElementById("btn");
       btn.onclick = function(){
        alert("hello js");
       }
    }
    </script>
    <input type="button" value="hello" id="btn" />
</body>

<body onload="ready()">
//等同于
//需要写在script内
window.onload=ready;

总结

<script type="text/javascript">
	// 页面加载的过程中,将a函数注册给了load事件
	// 页面加载完毕之后,load事件发生了,此时执行回调函数a
	// 回调函数a执行的过程中,把b函数注册给了id="btn"的click事件
	// 当id="btn"的节点发生click事件之后,b函数被调用并执行.
	window.onload = function(){ // 这个回调函数叫做a
		document.getElementById("btn").onclick = function(){ // 这个回调函数叫做b
			alert("hello js..........");
		}
	}
</script>

<input type="button" value="hello" id="btn" />

总结模板

<script>
    window.onload = function(){
        document.getElementById("id属性").onclick = function(){
            //获得属性后 利用属性执行函数
        }
    }
</script>

<input type="button" value="框中的值" id="id属性" />

5.4 设置节点的属性

通过点击一个按钮狂，将其变为复选框

<script type="text/javascript">
	window.onload = function(){
		document.getElementById("btn").onclick = function(){
			var mytext = document.getElementById("mytext");
			// 一个节点对象中只要有的属性都可以"."
			mytext.type = "checkbox";
		}
	}
</script>

<input type="text" id="mytext"/>
<input type="button" value="将文本框修改为复选框" id="btn"/>

5.5 捕捉回车键

回车键的键值是13
ESC键的键值是27
按钮键是onclick
而回车键onkeydown

回调函数的参数可以有，有与没有都会调用回调函数

usernameElt.onkeydown = function(a, b, c){
	// 获取键值
	 alert(a); // [object KeyboardEvent]
	// alert(b);
	// alert(c);
}

回车键摁下，浏览器会new一个对象，用函数接收当前发生的事件，用当前事件调用属性获取值

usernameElt.onkeydown = function(event){
    // 获取键值
    // 对于“键盘事件对象"来说,都有keyCode属性用来获取键值.
    alert(event.keyCode);
}

如果捕获回车键，需要在事件函数中判断是否为键值

usernameElt.onkeydown = function(event){
  if(event.keyCode === 13){
	  alert("正在进行验证....");
  }
}

5.6 JS运算符

执行表达式，但不返回任何结果

javascript:void(0)其中javascript:作用是告诉浏览器后面是一段JS代码。

以下程序的javascript:是不能省略的

<a href="javascript:void(0)" onclick="window.alert('test code')">
	既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面还不能跳转。
</a>

void()这个小括号当中必须有表达式，且是数字几都可以

href=" " 默认空字符串或者是null或者false都是会跳转的，需要前面加个js标识

5.7 JS的控制语句

java数组的定义与使用

int[] arr = {1,2,3,4,5,6};
int[] arr2 = new int[5]; // 等同于：int[] arr2 = {0,0,0,0,0};
String[] arr3 = {"a","b","c"};
String[] arr4 = new String[3]; // 等同于：String[] arr4 = {null,null,null};

javascript中是定义为var，且类型可以不一致，可以不定义范围有多大，可自扩容

// 创建JS数组
var arr = [false,true,1,2,"abc",3.14]; // JS中数组中元素的类型随意.元素的个数随意.
// 遍历数组
for(var i = 0; i < arr.length; i++){
   alert(arr[i]);
}

对比以上代码的不同，可以增加一个与java不同的结构for in

5.7.1 for in结构

区分java中的for each结构，for each结构中是数组元素，for in是数组下标

// for..in
for(var i in arr){
   //alert(i);
   alert(arr[i]);
}

for in结构还可以遍历对象属性

// for..in语句可以遍历对象的属性
User = function(username,password){
   this.username = username;
   this.password = password;
}
var u = new User("张三", "444");
alert(u.username + "," + u.password);
alert(u["username"] + "," + u["password"]); // 另一种调用方式

for(var shuXingMing in u){
   //alert(shuXingMing) 输出的是username和password
   //alert(typeof shuXingMing) // shuXingMing是一个字符串
   alert(u[shuXingMing]);//不用加双引号
}

5.7.2 with结构

with语句的调用先放在()内，在里面调用属性即可

with(u){
   alert(username + "," + password);
}

胖虎不秃头

关注

4
点赞
踩
6

收藏

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

区分java中的foreach结构，foreach结构中是数组元素，forin是数组下标。回车键摁下，浏览器会new一个对象，用函数接收当前发生的事件，用当前事件调用属性获取值。javascript中是定义为var，且类型可以不一致，可以不定义范围有多大，可自扩容。所以我们添加上面的一个函数load()，页面加载完的时候才会发生。对比以上代码的不同，可以增加一个与java不同的结构forin。执行错误，返回了null，因为还未获取到id元素，回调函数的参数可以有，有与没有都会调用回调函数。......
复制链接

扫一扫