JavaScript起步(十七-事件)| 一起学系列

121 阅读2分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第15天,点击查看活动详情

  • 事件

    • 基本概念:在什么时候做什么事

    • 执行机制:触发—响应机制

    • 绑定事件(注册事件)三要素:

      • 事件源:给谁绑定元素

      • 事件类型:绑定什么类型的事件click单击

      • 事件函数:事件发生后执行什么内容,写在函数内部

  • 事件监听:

    JavaScript解析器会给有绑定事件的元素添加一个监听,解析器会一直监测这个元素,只要触发对应的绑定事件,会立刻执行事件函数

 

  • 常用事件监听方法:

    方法1:绑定HTML元素属性,图一

    方法2:绑定DOM对象属性,图二 image.png image.png

  • 非表单元素的属性

    • 例如:href、title、id、src等

    • 调用方式:元素对象打点调用属性名,例如obj.href

    • 注意:部分的属性名跟关键字和保留字冲突,会更换写法

      class→className  for→htmlFor  rowspan→rowSpan

    • 属性赋值:给元素属性赋值,等号右侧的赋值都是字符串格式

    • id属性只能进行读取,不能进行更改

  • 表单元素属性

    • value 用于大部分表单元素的内容获取(option除外,获取内容须用innerText或者innerHTML)

    • type 可以获取input表单的类型(输入框或复选框等)

    • disabled 禁用属性

    • checked 复选框选中属性

    • selected 下拉菜单选中属性

    • 注意:在DOM中元素对象的属性值只有一个时,会被转成布尔值显示。例如:txt.disabled = true;

  • 知识点:

    • 取消a标签默认跳转效果:return false;

    • for循环内部添加的绑定事件,在触发时,所有的批量添加的事件已经完成,触发事件时都是在循环结束之后。批量绑定的事件的事件函数内部如果有变量i,要注意,函数执行时已经是在循环结束后。循环内部定义的变量是一个全局变量,在循环后执行的i变量的值是i跳出循环时的值。建议使用this来代替。

 

  • this关键字

    • 在事件函数内部有一个this,指向事件源

    • 在普通函数内部的this,指向window对象

    • 在构造函数内部的this,指向生成的实例对象

    • 在对象的方法内部的this,指向的是对象本身