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);

 

 

 

 

 

 

 

 

 

 

posted @ 2018-12-31 21:22  淡然微笑_Steven  阅读(179)  评论(0)  编辑  收藏  举报