第15天，JavaScript之事件介绍
本文共 10369 字，大约阅读时间需要 34 分钟。
目录
1、onload2、onsubmit3、onselect4、onchange5、onkeydown6、onmousemove、onmouseleave、onmouseout7、事件传播8、实例练习 8.1 select移动 8.2 二级联动 8.3 实现表格的正反选及全选 8.4 搜索框实现 8.5 跑马灯及tab切换
1、onload
onload事件会在页面内容加载完成后立即被触发；当有些事情我们希望页面加载完立即执行时，就可以使用该事件
Title 您好
正常情况下，JS代码上html标签之前的话，JS是找不到相应的标签的；将JS代码放在onload事件函数中后，会在页面全部加载完成后执行，就可以找到相应的html标签进行相关操作了。
2、onsubmit
onsubmit事件是在提交表单时触发，该事件只能给form元素使用。应用场景：在表单提交前验证用户输入是否正确，如果验证失败，在该方法中我们应该阻止表单的提交。
阻止默认事件有两种方式：一种是return false、另一种是e.preventDefault()
需求：验证用户输入的用户名长度必须大于5，小于20；不符合要求就阻止表单提交。
Title
注意：在使用第二种阻止默认事件方式时，必须给绑定的函数传一个参数，这个参数是默认的event对象。这个event对象中封装了该事件的一些相关属性。
3、onselect
用户选取文本时触发 ( 仅限于input 标签和 textarea标签)
Title
Paste_Image.png
如上图，选中input中的文本时，会弹出123.
4、onchange
该事件在表单元素的内容改变时触发( input, keygen, select, 和 textarea标签)
Title
5、onkeydown
Event 对象：Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.比如onkeydown,我们想知道哪个键被按下了，需要问下event对象的属性，这里就时KeyCode.
Title
6、onmousemove、onmouseleave、onmouseout
onmousemove 事件在鼠标移动到 div 元素上时触发。
onmouseleave 事件只在鼠标指针移出 div 元素时触发。onmouseout 事件在鼠标指针移出 div 元素及离开子元素时触发。 实例练习：
W3Cschool教程(w3cschool.cn) 以下实例演示了 onmousemove, onmouseleave 和 onmouseout 的区别。
onmousemove 事件在鼠标移动到 div 元素上时触发。
mouseleave 事件只在鼠标指针移出 div 元素时触发。
onmouseout 事件在鼠标指针移出 div 元素及离开子元素（p 和 span）时触发。
onmousemove:
鼠标移入和移出！onmouseleave:
鼠标移入和移出！onmouseout:
鼠标移入和移出！
7、事件传播
以上代码，div#abc_1是div#abc_2的父元素，两者分别都绑定了点击事件，当点击div#abc_2时，将会先触发alert("222")执行，再触发alert("111")执行。这就是事件传播。要想避免这种问题，就需要用事件对象event的stopPropagation()访求。
代码修改如下，给事件函数传一个event参数，再调用event.stopPropagation()方法。
再次点击子元素div#abc_2就不会再触发父元素div#abc_1的事件函数执行了。
8、实例练习
8.1 select移动
将左边的框中选中的对象移动右边的框中。
Title
8.2 二级联动
Title
8.3 实现表格的正反选及全选
Title
| 姓名 | 年龄 | 性别 | |
|---|---|---|---|
| alex | 29 | 男 | |
| yuan | 20 | 女 | |
| egon | 30 | 男 | |
| seven | 23 | 男 |
8.4 搜索框实现
需要用到以下两个事件：
-
onblur元素失去焦点时触发 -
onfocus元素获取焦点时触发
Title
8.5 跑马灯及tab切换
tab 京东商城欢迎您
家用电器 家具 汽车 食品 女鞋 医疗保健
转载地址：http://zlqwm.baihongyu.com/
你可能感兴趣的文章