JS中的事件入门讲解

小云云
Lepaskan: 2018-02-27 14:21:34
asal
1184 orang telah melayarinya

1 事件

事件可以理解为用户和浏览器的交互行为

2 事件函数绑定
  事件函数: 当事件发生了,用于处理该事件的具体应对方案就是事件处理函数
  表现出来就是一些代码块
  例如: 当鼠标点击(事件)— 做什么操作?就由事件处理函数来完成
         当键盘按下(按回车键)— 做什么操作?

总结:注意的就是 事件发生和事件处理函数是不同的概念
事件发生以后,可以有事件处理函数来做对应的事情,也可以没有
如果没有事件处理函数,不会影响事件的发生,该发生的还是会发生,
至于做什么事情,由事件处理函数来决定

3 如何去学习事件
   1 在js中规定了一些常用的事件,例如:鼠标点击、鼠标按下、鼠标抬起、鼠标移动
   、鼠标移入移出…
   事件要掌握的两部分: 1)事件名称(onclick\onmouseover) 2)对应的触发场景
   事件的名称和触发场景必须要记住(多做练习,手抄写)

2 事件处理函数(功能)
  需要根据具体业务场景来实现
Salin selepas log masuk

4 鼠标事件
   和鼠标相关的事件

事件名称        事件的触发场景

onmousedown     当鼠标按下的时候触发
onmouseup       当鼠标抬起的时候触发
onmouseover     当鼠标移入的时候触发
onmouseout      当鼠标移出的时候触发
onclick         当鼠标点击的时候触发
ondblclick      当鼠标双击的时候触发
onmousemove     当鼠标移动的时候触发
oncontextmenu   当鼠标右键的时候触发(可以自定义右键菜单)
Salin selepas log masuk

5 键盘事件
   和键盘有关的事件   键盘(按键)按下  键盘抬起
   onkeydown       当键盘按下的时候触发
   onkeyup         当键盘抬起的时候触发

6 表单事件
   和表单有关的事件   表单提交  获取焦点 失去焦点

onsubmit     当表单提交的时候触发
onchange     当修改表单字段的时候触发(内容改变就会触发)
onfocus      当获取到焦点的时候触发
onblur        当失去焦点的时候触发
Salin selepas log masuk

7 窗口事件
   和窗口有关的事件    窗口加载   窗口改变

onload      当对象加载完成以后触发
onresize    当窗口改变的时候触发
Salin selepas log masuk

8 事件对象 event  
  事件对象就是当事件发生的时候,用来记录事件的相关信息的对象
  事件对象理解为:飞机的黑匣子和汽车的行车记录仪

重点:记住兼容性解决方案  var ev = ev || event
  keyCode  键盘码   回车 13  空格 32   控制方向
  clientX、clientY  鼠标在浏览器可视区的坐标
  offsetLeft、offsetTop

9 事件冒泡
   事件冒泡机制–现象
   事件冒泡带来的影响
   阻止事件冒泡
   事件冒泡的应用

创建元素、添加子元素
事件源
事件委托
Salin selepas log masuk

相关推荐:

JS与Node.js中的事件循环详解

node.js中的事件处理机制详解

js中的事件捕捉模型与冒泡模型实例分析_javascript技巧

Atas ialah kandungan terperinci JS中的事件入门讲解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!