js事件简介

事件

文档或浏览器窗口中发生一些特定的交互瞬间,对于web应用而言,最具带标签的事件:点击某个元素,鼠标移动某个元素上,关闭弹窗等等。

js是以事件驱动为核心的语言,js与html之间的交互式通过事件实现的。

事件三要素:事件源、事件、事件驱动程序

手拨动开关:手是事件源         事件是按开关         驱动程序是开灯或者关灯

事件源:引发后续事件的html元素

事件:js已经全部定义好了

事件驱动程序:对样式和html的操作程序。

事件触发时执行程序改变样式或dom达到与用户交互的目的。

程序的书写步骤:

1.获取事件源

2.绑定事件

3.

事件存在形式

js事件简介

 

到控制台查看

js事件简介

点开后可以看到,onclick属性对应值为null,js已经为标签对象准备好了坑,等你往里面填写,当你设置后null就会换成事件函数。

on+动词表示当...的时候,onclick当点击的时候,触发的是函数调用。

js事件简介

为标签绑定事件函数
btn.onclick=function(){ alert("hello world") }

js事件简介

 

js事件简介

另一种绑定事件方式

知道onclick是btn的属性,那么可以直接写

js事件简介

致命的缺点是html与js混合在一起,写的时候会觉得我知道啊,但是过了一个月来维护或者交给别人的时候,维护难度大大提升。

事件对象

事件函数每次调用的时候,浏览器都会默认传入一个事件对象

btn.onclick=function(event){
      console.log(event)

}

点击的时候得到一个MouseEvent对象。

用来告诉你这个事件什么时候发生,由什么产生的,什么位置发生等,告诉你事件的信息。

例如里面的pageX,pageY属性,告诉你点击事件发生的位置。

还有屏幕的位置screenX,screenY属性。

上一篇:JavaFX Button和Scene点击事件代码示例


下一篇:【Android 】零基础到飞升 | Date & Time组件(上)