研究 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
不管在滑动还是拖动的时候,均生效