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

  1. 键盘鼠标事件

  2. 页面窗口事件

  3. 表单事件

一、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()">

ononlineonoffline在网络断线或者连线时触发,可以控制电脑网络查看效果

9.onpagehide

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

刷新页面可以触发事件

demo 查看

10.onpageshow

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

demo 查看

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

第一次加载页面时,onpageshowie浏览器中不触发,其他情况都触发

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>

onchangeoninput有相似的地方,都是改变文本内容时触发事件
但是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

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

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

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

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

demo 查看

5.onmousemove

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

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

demo 查看

6.onmouseout

当鼠标离开元素时触发

demo 查看

7.onmouseover

当鼠标进入元素时触发

onmouseoveronmousemove都是鼠标进入元素触发
区别:
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不管在滑动还是拖动的时候,均生效