HTML 事件属性--DOM

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

键盘鼠标事件
页面窗口事件
表单事件

一、window 事件属性

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

1.onbeforeprint／onafterprint

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

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

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

demo 查看

2.onbeforeunload/unload

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

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

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

demo 查看

3.onerror

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

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

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

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

demo 查看

4.onhashchange

当文档改变时发生的脚本？？？

5.onload

页面加载完成之后触发

demo 查看

6.onmessage

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

7.onoffline

当浏览器离线时触发

<body onoffline="myfun()">

8.ononline

当浏览器在线工作时触发

<body ononline="myfun()">

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

9.onpagehide

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

刷新页面可以触发事件

demo 查看

10.onpageshow

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

demo 查看

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

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

11.onresize

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

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

demo 查看

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 失去焦点的时候产生什么样的效果

demo 查看

2.onfocus

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

demo 查看

3.onchange

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

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

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

demo 查看

4.oncontextmenu

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

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

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

demo 查看

5.onformchange

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

触发发不了脚本

6.onforminput

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

浏览器不支持

6.oninput

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

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

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

demo 查看

7.oninvalid

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

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

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

demo 查看

8.onreset

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

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

demo 查看

9.onselect

文本被选中时触发

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

demo 查看

10.onsubmit

当表单被提交时触发

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

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

demo 查看

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

三、key 键盘事件

1.onkeydown

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

demo 查看

2.onkeypress

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

3.onkeyup

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

demo 查看

四、mouse 鼠标事件

利用鼠标触发的事件

1.onclick

鼠标点击元素触发的事件

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

demo 查看

2.ondblclick

鼠标双击时触发的事件

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

demo 查看

3.拖动事件

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

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

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

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

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

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

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

4.onmousedown/onmouseup

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

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

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

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

demo 查看

5.onmousemove

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

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

demo 查看

6.onmouseout

当鼠标离开元素时触发

demo 查看

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 上

demo 查看

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>

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

demo 查看

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