DOM事件

事件:在什么时候做什么事情
执行机制:触发 - 响应机制
绑定事件(注册事件)三要素:
- 1.事件源:给谁绑定事件
- 2.事件类型:绑定什么类型的事件,例如: click单击
- 3.事件函数:事件发生后执行什么内容,写在函数内部

事件监听

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

常见事件监听方法

方法1:绑定HTML元素属性

  <input id = "btn" onclick = "alert('点我干嘛？');">

方法2:绑定DOM对象属性

  var btn = document.getElementById("btn");
  btn.onclick = function (){
    alert("点我干嘛？");
  };

常见的鼠标事件类型

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

DOM元素属性操作

非表单元素的属性

例如：href、title、id、src等
调用方式：元素对象打点调用属性名,例如：obj.href
部分的属性名跟关键字和保留字冲突，会更换写法。

  /* class → className
     for → htmlFor
     rowspan → rowSpan
  */

给元素属性赋值,等号右侧的赋值都是字符串格式。
特殊情况：元素的id不要随意修改

案例

点击按钮切换图片

<!-- 点击按钮切换图片 -->
    <input id = "btn" type="button" value="点击"><br>
    <img id = "pic" src="img/a.jpg" alt="美女"/>
    <script>
        //获取元素对象
        var btn = document.getElementById("btn");
        var pic = document.getElementById("pic");
        //绑定事件
        var num = 1;
        //1表示：当前是a图片 2表示：当前是b图片
        /*
          这里不能直接判断图片的路径是否相等
          是因为：pic.src 的输出结果是：
             file:///D:/nmyStudio/vscodeWorkspace/eight/img/a.jpg
        */
    //    console.log(pic.src);
        btn.onclick = function (){
            if(num == 1){
                pic.src = "img/b.jpg";
                num = 2;
            }else {
                pic.src = "img/a.jpg";
                num = 1;
            }
            
        }
    </script>

点击按钮显示隐藏div

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            height: 100px;
            width: 100px;
            background-color: antiquewhite;
        }
        .hide {
            display: none;
        }
        .show {
            display: block;
        }
    </style>
</head>
<body>
    <!-- 点击按钮隐藏div -->
    <input type="button" value="点击隐藏" id = "btn">
    <div id = "box"></div>
    <script>
       //获取元素
       var btn = document.getElementById("btn");
       var box = document.getElementById("box");
       //绑定事件
       btn.onclick = function (){
         if(btn.value === "点击隐藏"){
            //css样式的设置，可以通过js代码来调用
            box.className = "hide";
            btn.value = "点击显示";
         }else {
            box.className = "show";
            btn.value = "点击隐藏";
         }
       };
    </script>
</body>

美女相册

<body>
    <!-- 美女画廊 -->
    <h2>美女画廊</h2>
    <div id = "imagegallery">
        <a href="img/1.jpg" title="美女A">
            <img src="img/1-small.jpg" alt="美女1" width="100px">
        </a>
        <a href="img/2.jpg" title="美女B">
            <img src="img/2-small.jpg" alt="美女2" width="100px">
        </a>
        <a href="img/3.jpg" title="美女C">
            <img src="img/3-small.jpg" alt="美女3" width="100px">
        </a>
        <a href="img/4.jpg" title="美女D">
            <img src="img/4-small.jpg" alt="美女4" width="100px">
        </a>
    </div>
    <div style="clear: both;"></div>
    <img id = "image" src="img/placeholder.png" alt="" width="450px">
    <p id = "des">选择一张图片</p>
    <script>
        //1.获取元素
        var a = document.getElementById("imagegallery").getElementsByTagName("a"); 
        var img = document.getElementById("image");
        var des = document.getElementById("des");

        //2.遍历数组，添加点击事件
        for(var i = 0; i < a.length; i++){
            a[i].onclick = function(){
                //3. 换图片
                img.src = this.href;
                //4. 换文字
                des.innerText = this.title;
                //5. 返回false,取消a标签的默认跳转效果
                return false;
            };
        }   
    </script>
</body>

注意：
- for循环内部添加的绑定事件，在触发时，所有的批量添加事件已经成功，触发事件时都是在循环结束之后。
- 批量绑定的事件的事件函数内部，如果有变量i，要注意，函数执行时已经是在循环结束后。
- 循环内部定义的变量是一个全局变量，在循环后执行的i变量的值是i跳出循环时的值。

获取和更改标签内部内容

获取标签内部内容的属性

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

更改标签内容

还可以通过两个属性给双标签内部去更改内容：
- innerHTML 设置属性值，有标签的字符串，会按照 HTML 语法中的标签加载。
```
  box.innerHTML = "<h2>hello JS</h2>";
```
- innerText 设置属性值，有标签的字符串，会按照普通的字符加载。
对比使用场景
- innerText：在设置纯字符串时使用。
- innerHTML：在设置有内部子标签结构时使用。

表单元素属性

value 用于大部分表单元素的内容获取(option除外)
type 可以获取input标签的类型(输入框或复选框等)
disabled 禁用属性
checked 复选框选中属性
selected 下拉菜单选中属性,双标签元素，value和innerText的区别，反之单标签元素只有value

//双标签
<select id = "list">
  <option value = "beijing">北京</option>
  <option value = "shanghai">上海</option>
</select>

var opt = document.getElementById("list").getElementByTagName("option");
console.log(opt.innerText); //北京
console.log(opt.value); //beijing

注意：

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

<input type = "text" id = "txt">
// 获取元素
var txt = document.getElementById("txt");
// 表单元素特有的一些属性，属性名和属性值是一致的
txt.disabled = true;  //禁用：false

还可以通过js给文本框添加提示信息

  txt.value = "请输入用户名";

案例

检测用户名是否是3-6位，密码是否是6-8位，如果不满足要求高亮显示文本框
设置下拉框中的选中项
搜索文本框
全选反选

JavaScript网页编程之DOM事件

DOM事件

事件监听

常见事件监听方法

常见的鼠标事件类型

DOM元素属性操作

非表单元素的属性

案例

获取和更改标签内部内容

获取标签内部内容的属性

更改标签内容

表单元素属性

案例