事件

事件：什么时候，做什么事
执行机制：触发——响应
绑定事件三要素
1.事件源：绑定给谁事件
2.事件类型：绑定什么类型的事件
比如：click单击
3.事件函数：事件发生后执行什么内容，写在函数内部

事件监听

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

常见事件监听方法

方法1：绑定HTML元素属性
方法2：绑定DOM对象属性
绑定HTML属性：

绑定DOM对象属性

常见鼠标事件类型

事件	说明
onclick	鼠标左键单击触发
ondbclick	鼠标左键双击触发
onmousedown	鼠标按键按下触发
onmouseup	鼠标按键放开时触发
onmousemove	鼠标在元素上移动触发
onmouseover	鼠标移动到元素上触发
onmouseout	鼠标移出元素边界触发

非表单元素属性操作

非表单元素的属性

例如：href，title，id，src等等
调用方式：元素对象打点调用属性名，例如obj.href
注意：部分的属性名跟关键字和保留字冲突，会更换写法。
属性赋值：给元素属性赋值,等号右侧的赋值都是字符串格式。
class → className
for → htmlFor
rowspan → rowSpan

    
    跳转

案例：div的显示或者隐藏




  
  
  Document

将hide类和show类放在css部分，需要调用的时候使用js代码控制显示

在事件函数内部有一个 this ，指向事件源
区分一下不同函数内部 this 的指向
普通函数 -> window 对象
构造函数 -> 指向的是生成的实例对象
对象的方法 -> 指向的是对象本身
事件函数 -> 指向的是事件源

上述案例代码可以优化为

案例：切换图片




  
  Document

使用一个中间变量进行控制，判断是什么图片，该换到什么图片

案例：画廊

获取标签内部内容的属性

获取标签内部内容的都属性有两个：innerHTML和innerText
innerHTML属性，在获取标签内部内容时，如果包含标签，获取的内容会包含标签，获取的内容包括空白换行等。
innerText属性，在获取标签内部内容时，如果包含标签，获取的内容会过滤标签，获取的内容会去掉换行和缩进等空白。

更改标签内容

还可以通过两个属性给双标签内部去更改内容：

innerHTML 设置属性值，有标签的字符串，会按照 HTML 语法中的标签加载。
innerText 设置属性值，有标签的字符串，会按照普通的字符加载。

对比使用场景

innerText：在设置纯字符串时使用。
innerHTML：在设置有内部子标签结构时使用


  
    这是一个 div 标签
    这是一个 span 标签

innerHTML

innerText

表单元素属性

value用于大部分表单元素的内容获取（option除外）
type可以获取input标签的类型（输入框，复选框等等）
disabled禁用属性
checked复选框选中属性
selected下拉菜单选中属性
注意：在DOM中元素对象的属性值只有一个时，会被转成布尔值显示

txt.disabled = true;

意思就是：disabled = "disabled"这种属性，打印出来的值为false or true。

    // 表单元素特有的一些属性，属性名和属性值是一致的，只有一种属性名
    console.log(txt.disabled);
    txt.disabled = false;
    console.log(txt.disabled);
    btn.disabled = true;

表单元素案例：用户名和密码检测

逻辑：两个输入框，一个提交按钮，id名分别是name，pw，btn
给按钮加一个点击事件，判断长度或者其他的条件是否满足，不满足就高亮显示




    
    
    
    Document

案例二：随机设置下拉菜单选中项

option里的选项，数组下标为随机数




    
    
    
    Document

案例三：搜索文本框

逻辑：没有进行输入的时候，是默认的字体，灰色字体，获得焦点的时候会进行输入，原来的内容清空，失去焦点的时候，同时没有内容的时候，就恢复到灰色字体默认的样子，有内容则保留内容





  
  Document

案例四：全选或者反选





    
    
    



  
      
          
            
                
                    
                
                商品
                价钱
            
          
          
            
                
                    
                
                iPhone8
                8000
            
            
                
                    
                
                iPad Pro
                5000
            
            
                
                    
                
                iPad Air
                2000
            
            
                
                    
                
                Apple Watch
                2000

	商品	价钱
	iPhone8	8000
	iPad Pro	5000
	iPad Air	2000
	Apple Watch	2000

自定义属性

getAttribute(name) 获取标签行内属性
setAttribute(name，value) 设置标签行内属性
removeAttribute(name) 移除标签行内属性
与element.属性的区别: 上述三个方法用于获取任意的行内属性，包括自定义的属性。




  
  
  Document


  小明

style样式属性操作

使用 style 属性方式设置的样式显示在标签行内。
element.style 属性的值，是所有行内样式组成的一个样式对象。
样式对象可以继续点语法调用或更改 css 的行内样式属性，例如 width、height 等属性。
注意1：类似 background-color 这种复合属性的单一属性写法，是由多个单词组成的，要修改为驼峰命名方式书写 backgroundColor。
注意2：通过样式属性设置宽高、位置的属性类型是字符串，需要加上 px 等单位


    文字

通过style样式属性操作的样式更改都是行内样式，唯独比important权重低，以后的JS代码更改样式都可以使用这种方式

className类名属性操作

修改元素的 className 属性相当于直接修改标签的类名。
如果需要修改多条 css 样式，可以提前将修改后的样式设置到一个类选择器中，后续通过修改类名的方式，批量修改 css 样式。

样式很多，类型很复杂的话，建议使用className类名属性操作

元素属性操作基本应用案例一：开关灯




  
  
  Document

元素属性操作基本应用案例二：图片切换二维码案例

元素属性操作基本应用案例三：排他思想——文本框高亮显示案例




    
    
    
    Document

元素属性操作基本应用案例四：设置元素的大小和位置案例




    
    
    
    Document

## 元素属性操作基本应用案例五：表格隔行变色和高亮显示




    
    
    
    Document

元素属性操作基本应用案例六：tab选项卡切换

DOM事件与元素属性操作基本应用

事件