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" />
    <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" >
            <img src="img/1-small.jpg"  width="100px">
        </a>
        <a href="img/2.jpg" >
            <img src="img/2-small.jpg"  width="100px">
        </a>
        <a href="img/3.jpg" >
            <img src="img/3-small.jpg"  width="100px">
        </a>
        <a href="img/4.jpg" >
            <img src="img/4-small.jpg"  width="100px">
        </a>
    </div>
    <div style="clear: both;"></div>
    <img id = "image" src="img/placeholder.png"  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元素属性操作

非表单元素的属性

案例

获取和更改标签内部内容

获取标签内部内容的属性

更改标签内容

表单元素属性

案例

常见问题FAQ

掘金(Devil) SVIP

发表评论

如需帝国cms功能定制以及二次开发请联系我们

升级SVIP会员

工作时间

DOM事件

事件监听

常见事件监听方法

常见的鼠标事件类型

DOM元素属性操作

非表单元素的属性

案例

获取和更改标签内部内容

获取标签内部内容的属性

更改标签内容

表单元素属性

案例

常见问题FAQ

掘金(Devil) SVIP

相关推荐

发表评论

如需帝国cms功能定制以及二次开发请联系我们

升级SVIP会员

工作时间

请选择支付方式