JavaScript-07-JS中常见的事件

Posted 2021-01-31 淡然微笑

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript-07-JS中常见的事件相关的知识，希望对你有一定的参考价值。

JS中常见的事件

1.当页面加载完毕

    <script type="text/javascript">
        //当页面加载完毕
        window.onload = function () {
           alert(‘页面加载完毕‘);
        }
    </script>

2.监听鼠标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS常见的事件</title>
</head>
<body>
    <img src="./image/icon_01.png" alt="">
    <input type="text" placeholder="请输入密码">
    <script type="text/javascript">
        //当页面加载完毕
        window.onload = function () {
           alert(‘页面加载完毕‘);
           var img = document.getElementsByTagName(‘img‘)[0];
           var input = document.getElementsByTagName(‘input‘)[0];

           //监听鼠标??
            //1.1鼠标进入图片
            img.onmouseover = function () {
                console.log(‘鼠标进入图片‘);
            }

            //1.2鼠标在图片上移动
            img.onmousemove = function () {
                console.log(‘鼠标在图片上移动‘);
            }

            //1.3鼠标离开图片
            img.onmouseout = function () {
                console.log(‘鼠标离开图片‘);
            }

            // 2.当输入框获得焦点
            input.onfocus = function () {
                input.style.width = ‘500px‘;
                input.style.height = ‘60px‘;
            }
        }

    </script>
</body>
</html>

3.JS增删改查

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS增删该查</title>
    <style>
        #main {
            background-color: red;
            width: 400px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div id="main">
        <p>我是描述图片的</p>
    </div>
    <script src="./js/index.js">
        // alert(0);//不会执行
    </script>
    <script type="text/javascript">
        // alert(0);//会执行
    </script>
</body>
</html>

index.js

// JS增删改查

// 增
  document.write(‘Hello,world‘);
// 在main Div 中插入一个图片
  //拿到div
  var main = document.getElementById(‘main‘);
  //1.1 创建图像标签
  var img = document.createElement("img");
  img.src = ‘./image/icon_01.png‘;
  //1.2添加
  main.appendChild(img);

// 删除
  img.remove();

// 改(修改大小)

//查
   //document.getElementById、ClassName、Name、TagName(控件名称)四种
   //打印所有元素(子标签)
   console.log(main.childNodes);

以上是关于JavaScript-07-JS中常见的事件的主要内容，如果未能解决你的问题，请参考以下文章

Android 高性能音频Oboe 音频流打开后耳机 / 音箱插拔事件处理 ( 设置 Oboe 音频设备 ID | setDeviceId 函数原型 | AudioStream 音频流 )(代码片

java面试Java后端开发岗面试中操作系统相关的常见问题

Java并发----线程常见方法总结

Android Parcelable反序列化报错笔记：java.lang.RuntimeException: Unmarshalling unknown type code at offset(代码片

常见的XSS攻击代码

事件查看器常见ID代码解释