js外链引入、JavaScript 元素操作、window.onload、鼠标事件

js外链引入

外链引入.js 
    通过script标签的src属性引入外部js文件
    在外部新建一个后缀名为js的文件
    注意：用于引入外部js文件的script标签，就不要再写其他的js代码,不会执行
​
<script src="./js/demo.js"></script>
​
​
<script src='./outer.js'>
    //此代码不执行
    // alert("对，你说的对!!!");
</script>
​
​
 <!-- 内部引入 -->
  <script>
    alert('hello world--内部引入');
  </script>

JavaScript 元素操作

元素操作可以分为：内容操作，属性操作，样式的操作等

每种操作都分为读（获取）和写（设置）的操作

1. 属性操作

什么是属性：为html元素提供附加信息，也就是html属性，以"属性名=属性值"得形式出现，而且属性在html的开始标签中定义；

• HTML属性 ：

  <div id='' class="" title="">
      开始标签中属性
  </div>

• 语法

属性操作
        获取：元素.属性名;
        设置：元素.属性名=值;
​
        注意：class是一个关键词，不能直接使用，要用className来实现
       

window.onload

当页面加载完成执行函数（页面加载完成：包含html标签、图片，flash,css,js等等页面引用的东西都要加载完成后才执行）

当我们把script标签放在head标签里去获取元素的时候，我们会发现获取到的值为null，是因为JavaScript代码是从上往下执行，当获取标签的时候，标签还没有被加载。

执行顺序：html文档是从上往下执行，遇到script标签会先进入script标签执行里面的js代码， 等js代码执行完以后，再继续往下执行

   //js的入口函数，等待html文档中的标签和资源（图片，视频，css文件）都加载完成后调用
window.onload = function () {}

​
加window.onload函数
​
        window.onload = function () {
             // [object HTMLButtonElement] 拿到了button 元素
                  // 因为js从上往下执行，html元素还没加载就获取元素，所有获取不到位null
           alert(document.getElementById('box')); //[object HTMLButtonElement
            console.log(document.getElementById('box'))
              //<div id="box"></div>
            document.getElementById('box').onclick = function () {
                alert('嘿，哥们，你点了我哦')
            }
​
​

鼠标事件

    鼠标点击事件：onclick
    鼠标双击事件：ondblclick
    鼠标滑入事件：onmouseover
    鼠标滑出事件：onmouseout
    鼠标在元素中移动事件:onmousemove
     鼠标按下事件:onmousedown
    鼠标抬起事件:onmouseup
    鼠标右键菜单事件:oncontextmenu