HTML事件属性--DOM
研究html的对象，事件和方法，从js的角度来思考，这个标签的属性是通过什么方法，触发什么事件来实现的
- 键盘鼠标事件
- 页面窗口事件
- 表单事件
一、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
当元素按下鼠标时触发的事件/鼠标释放时触发的事件
- 一个是按下去的瞬间就触发
- 一个是当鼠标被松开的时候触发
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不管在滑动还是拖动的时候，均生效
腾讯云开发者
