研究 html 的对象，事件和方法，从 js 的角度来思考，这个标签的属性是通过什么方法，触发什么事件来实现的

  1. 键盘鼠标事件

  2. 页面窗口事件

  3. 表单事件

一、window 事件属性

针对 window 对象触发的事件，在<body>中执行

1.onbeforeprint／onafterprint

在浏览器打印之间/后触发

<body onbeforeprint = print()>
<script>
    function print() {
        alert("打印之间！")
    }
</script>

打印前和打印后的事件方法类似，一个是在打印前触发事件，一个是在打印这个事件结束之后触发onafterprint这个事件

2.onbeforeunload/unload

离开页面之间触发的事件／之后触发的事件

打开 f12，然后刷新，或者关闭浏览器，可以在浏览器触发事件

<script>
    window.onbeforeunload = function(){
        return "提示"
        //返回的内容不会显示，
        //在刷新的时候触发，或者关闭浏览器，浏览会直接提示是否重新加载，不能直接返回return
    }
</script>

3.onerror

当图片出错是可以触发该事件，支持该事件的标签只有 <img>,<object>,<style>

<img src="1.gif" onerror = "myfun()">

<script>
    function myfun() {
        alert("图片出错")
    }
</script>

1.gif 不存在，因此触发了一个 myfun() 事件，弹出窗口

4.onhashchange

当文档改变时发生的脚本

5.onload

页面加载完成之后触发

6.onmessage

在消息被触发时运行 ???

7.onoffline

当浏览器离线时触发

<body onoffline="myfun()">

8.ononline

当浏览器在线工作时触发

<body ononline="myfun()">

ononline和onoffline在网络断线或者连线时触发，可以控制电脑网络查看效果

9.onpagehide

当用户从网页离开时触发，也可以理解成当窗口隐藏时运行的脚本

刷新页面可以触发事件

10.onpageshow

打开一个新页面或者刷新的时候触发

相当于onload，加载页面时触发，但是在不同浏览器触发的有所不同

第一次加载页面时，onpageshow在ie浏览器中不触发，其他情况都触发

11.onresize

当浏览器窗口被改变大小时触发事件

<body onresize="myfun()">
    <script>
        function myfun() {
            alert('浏览器窗口改变了')
        }
    </script>
</body>

12.onunload

页面被下载时触发，就是刷新或者关闭页面时触发

window.onunload = function() {
    return '确定关闭吗？'
}

13.onpopstate

当浏览器窗口记录改变时运行的脚本，

14.onredo

当文档执行撤销时触发的事件

二、form 事件属性

由 html 表单内触发的事件，通常使用在 form 元素中

1.onblur

失去焦点时运行的脚本

<input name="int" id="int" onblur="myfun()">
<script>
    function myfun() {
        var int = document.getElementById('int').value;
        document.getElementById('int').value = int.toUpperCase();
    }
</script>

给 input 绑定一个 onblur=myfun() 的事件，当 input 失去焦点的时候产生什么样的效果

2.onfocus

元素获得焦点时触发事件，和 onblur 相反

3.onchange

当元素值被改变的时候触发事件

<input type="text" id="int" name="int" onchange="myfun()">
<script>
    function myfun() {
        alert('我的元素被改变啦！')
    }
</script>

这个事件的意思就是，当我对 input 内容进行操作改变后，浏览器会弹出一个 alert

4.oncontextmenu

当用户右键操作时触发该事件

可以绑定在任意元素中触发，可以一直触发，不用刷新

<div oncontextmenu="myfun()">这是一个文本框！</div>
<script>
    function myfun() {
        alert('oncontentmenu事件触发')
    }
</script>

5.onformchange

当表单获得输入时可以触发事件

触发发不了脚本

6.onforminput

当表单获得用户输入时触发的事件，无法触发

浏览器不支持

6.oninput

当元素获得用户输入时触发的事件 当输入框输入或者删除时都会触发 oninput

<input type="text" oninput="myfun()">
<script>
    function myfun() {
        alert('oninput触发了')
    }
</script>

onchange和oninput有相似的地方，都是改变文本内容时触发事件
但是onchange是在 input 失去焦点时才触发，oninput是立刻触发

7.oninvalid

oninvalid事件要搭配required属性来使用

required如果使用该属性，代表必填字段，oninvalid是当元素无效时触发的事件

<form>
    <input type="text" oninvalid="myfun()" required>
    <input type="submit">
</form>
    <script>
        function myfun() {
            alert('填写为空')
    }
</script>

8.onreset

表单中重置按钮被点击时触发

<form onreset="myfun()">
    <input type="text">
    <input type="reset" value="reset">
</form>
<script>
    function myfun(){
        alert('重置成功')
    }
</script>

9.onselect

文本被选中时触发

<input onselect="myfun()" value="选中我">
<script>
    function myfun() {
        alert('onselect被触发 ')
    }
</script>

10.onsubmit

当表单被提交时触发

要把事件绑定到 form 标签里面

<form onsubmit="myfun()">
    <!-- 注意：事件要绑定到form标签上面 -->
    <input type="text" name="name">
    <input type="submit" value="submit">
</form>
<script>
    function myfun() {
        alert('提交了')
    }
</script>

注意：提交了之后会自动刷新页面，document 和 console 的触发内容会立刻刷新，一闪而过，只有 alert 能停留在页面上，等待点击确定

三、key 键盘事件

1.onkeydown

按下任意键时触发，包括系统按钮，箭头和功能键

2.onkeypress

按下任意字母数字键时触发，但系统按钮，箭头和功能无法识别

3.onkeyup

松开任何之前按下的键盘时触发

四、mouse 鼠标事件

利用鼠标触发的事件

1.onclick

鼠标点击元素触发的事件

<p onclick="myfun()">点击我</p>
<script>
    function myfun() {
        alert('点击成功')
    }
</script>

2.ondblclick

鼠标双击时触发的事件

<div ondblclick="myfun()">测试文本！</div>
<script>
    function myfun() {
        alert('双击测试成功！')
    }
</script>

3.拖动事件

ondrag/ 元素被拖动时触发的事件

ondragstart/在拖动操作开端运行的脚本

ondrop/ 当元素正在被拖动时触发的事件

ondragend/在拖动操作末端运行的脚本

ondragenter/当元素元素已被拖动到有效拖放区域时运行的脚本

ondragleave/当元素离开有效拖放目标时运行的脚本

ondragover/当元素在有效拖放目标上正在被拖动时运行的脚本

4.onmousedown/onmouseup

当元素按下鼠标时触发的事件/鼠标释放时触发的事件

  1. 一个是按下去的瞬间就触发
  2. 一个是当鼠标被松开的时候触发

onmouseup效果和onclick一样，因为click也是点击过后触发

这两个事件加起来相当于一个click事件，但是并不能用这两个事件来做点击事件的效果

5.onmousemove

当鼠标移动到元素上时触发

相当于 css 里面的 :hover，但是作为事件拥有更灵活多变的用法

6.onmouseout

当鼠标离开元素时触发

7.onmouseover

当鼠标进入元素时触发

onmouseover和onmousemove都是鼠标进入元素触发
区别：
1.
over在进入元素时触发，但在元素内部移动时不触发
move是进入元素时和在元素里面移动时都触发
2.
over优先触发，然后才触发move

8.onmousewheel

当鼠标滚动被滚动时触发的事件

<style>
    div {
        height: 1000px;
    }
</style>

<body>
    <div onmousewheel="myfun()">测试</div>
    <script>
        function myfun() {
            alert('onmousewheel')
        }
    </script>
</body>

每次滚动时都可以触发，可以绑定到 body 上

9.onscroll

当元素滚动条被滚动时触发的事件

<div onscroll="myfun()">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</div>
<p>滑动了<span id="ci"></span>次</p>
<script>
x = 0
function myfun() {
  document.getElementById('ci').innerHTML = x += 1
}
</script>

这个案例－－－滑动滚动计数

区别：
1.wheel在滚轮滑动的时候有效，鼠标拖拽的时候无效
2.onscroll不管在滑动还是拖动的时候，均生效