HTML|JavaScript学习笔记一之事件

最新推荐文章于 2024-11-11 11:28:49 发布

News777

最新推荐文章于 2024-11-11 11:28:49 发布

阅读量642

点赞数 1

分类专栏： HTML JavaScript 文章标签： html javascript

本文链接：https://blog.csdn.net/News777/article/details/118962550

版权

HTML 同时被 2 个专栏收录

9 篇文章 5 订阅

订阅专栏

JavaScript

7 篇文章 0 订阅

订阅专栏

一、HTML事件

1.1 Window 事件属性

注：针对 window 对象触发的事件（应用到`<body>`标签）

1.1.1 语法

<element 事件名="script">

例：element为body（标签名），事件名为onafterprint（在页面设置打印及打印对话框出现后执行 JavaScript ），script为调用函数

<script>
function printdoc()
{
	alert("文档打印中");
}
<body onafterprint="printdoc()">
	<h1>打印文档</h1>
</body>
</script>

提示： 快捷键，如 Ctrl+P 设置打印页面。

注意： 目前只有 Internet Explorer 和 Firefox 浏览器支持 onafterprint 事件属性。

注意： 在 IE 浏览器中, onafterprint 属性在打印对话框之前执行Javascript而不是之后。

1.1.2 常用的window 事件

注：所有window 事件值均为调用JavaScript中的内容（script）

onafterprint: 文档打印之后运行的脚本。

<script>
function printdoc()
{
	alert("文档正在打印");
}
</script>
<body onafterprint="printdoc()">
<h1>打印文档</h1>
</body>

onbeforeprint: 文档打印之前运行的脚本。

<script>
function printdoc()
{
	alert("正要打印此文档");
}
</script>
<body onbeforeprint="printdoc()">
<h1>打印文档</h1>
</body>

onerror: 在错误发生时运行的脚本。

<script>
    function error(){
        alert("error");
    }
</script>
<body>
<img src="image.gif"
onerror="error()">
<p>当图片不存在时，会弹出一个提示框。</p>
</body>

onhaschange: 当文档已改变时运行的脚本。

<body onhashchange="mychange()">
<p>点击按钮修改当前 URL 的锚部分为 #demo1</p>
<button onclick="changehash()">点我</button>
<p id="demo"></p>
<script>
function changehash() {
    location.hash = "demo1";
}
//Location 对象的 hash 属性用于设置或取得 URL 中的锚部分(包括 # 标记)
function mychange() {
    alert("锚已修改！");
}
</script>
</body>

onload: 页面结束加载之后触发。

<script>
function load()
{
	alert("页面已经载入！");
}
</script>
<body onload="load()">
<h1>Hello World!</h1>
</body>

1.1.3 其余事件

onmessage： 在消息被触发时运行的脚本。
onpagehide： 当窗口隐藏时运行的脚本。
onofflineNew： 当文档离线时运行脚本
ononlineNew： 当文档上线时运行脚本
onpageshow： 当窗口成为可见时运行的脚本。
onpopstate： 当窗口历史记录改变时运行脚本。
onredo： 当文档执行撤销（redo）时运行的脚本。
onresize： 当浏览器窗口被调整大小时触发。
onunload： 一旦页面已下载时触发（或者浏览器窗口已被关闭）。

2.1 Form 事件

所有Form事件值均为调用JavaScript中的内容（script）
表单事件在HTML表单中触发 (适用于所有 HTML 元素, 但该HTML元素需在form表单内)

2.1.1 常见事件

onblur： 元素失去焦点时运行的脚本。

<script>
function upperCase()
{
	document.getElementById("demo").value=document.getElementById("demo").value.toUpperCase()
}
</script>
</head>
<body>
<p>失焦时将内容中小写单词转为大写</p>
<input type="text" id="demo" onblur="upperCase()">
</body>

onchange： 在元素值被改变时运行的脚本。

<script>
function checkField(val)
{
	alert("输入值已改变。新值为: " + val.value);
}
</script>
</head>
<body>
<p>修改输入域的文本，点击输入域外区域触发 onchange。</p>
<input type="text" value="Hello" onchange="checkField(this)">
</body>

onfocus: 当元素获得焦点时运行的脚本。

<script>
function setStyle(e)
{
	document.getElementById(e.id).style.background="blue";
}
</script>
</head>
<body>
<p>当输入域获得焦点时setStyle函数被触发。该函数改变输入域的背景色。</p>
第一个名字: <input type="text" id="fname" onfocus="setStyle(this)"><br>
</body>

oninput: 在表单改变时运行的脚本。

<script>
function setStyle(e)
{
	document.getElementById(e.id).style.background="blue";
}
</script>
</head>
<body>
<p>当输入域输入内容时setStyle函数被触发。该函数改变输入域的背景色。</p>
第一个名字: <input type="text" id="fname" oninput="setStyle(this)"><br>
</body>

onselect： 在元素中文本被选中后触发。

<script>
function showMsg()
{
	alert("你选取了一些文本信息!");
}
</script>
</head>
<body>
Some text: <input type="text" value="选取我!!" onselect="showMsg()">
<p>showMsg() 函数在选取输入域文本信息时触发。 该函数弹出了一些信息。</p>
</body>

onsubmit： 在提交表单时触发。

<script>
function checkForm()
{
	alert("提交表单");
}
</script>
</head>
<body>
<form action="demo_form.php" onsubmit="checkForm()">
<input type="text" name="fname"><br>
<input type="submit" value="提交">
</form>
<p> checkForm() 函数在提交按钮被点击时触发。该函数会弹出消息。</p>
</body>

2.2.2 其余事件

oncontextmenu： 当上下文菜单被触发时运行的脚本。
onformchange： 在表单改变时运行的脚本。
onforminput： 当表单获得用户输入时运行的脚本。
oninvalid： 当元素无效时运行的脚本。
onreset： 当表单中的重置按钮被点击时触发。HTML5 中不支持

3.1 键盘事件

所有键盘事件值均为调用JavaScript中的内容（script）

3.1.1 常见事件

注： onkeydown、 onkeypress 、onkeyup属性不能用于以下元素: `<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 或 <title>。`

onkeydown： 当按下按键时运行脚本
onkeypress： 当按下并松开按键时运行脚本

注： onkeypress 事件在所有浏览器中不能触发所有按键(例如：ALT, CTRL, SHIFT, ESC) 。如果只对用户是否已经按下一个按键检测，可以使用 onkeydown 取代, onkeydown被所有按键触发。

<script>
function displayResult()
{
	var x;
	if(window.event) // IE8 及更早IE版本
	{
		x=event.keyCode;
	}
	else if(event.which) // IE9/Firefox/Chrome/Opera/Safari
	{
		x=event.which;
	}
	var keychar=String.fromCharCode(x);
	alert("按键 " + keychar + " 被按下");
}
</script>
</head>
<body>
<p>当用户在输入域按下按键时触发函数。 该功能提醒按下的键。</p>
<input type="text" onkeydown="displayResult()">
</body>

onkeyup： 当松开按键时运行脚本

<script>
function displayResult()
{
	var x=document.getElementById("fname");
	x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
<p>在输入域松开按键时触发函数。该函数将小写字母转为大写字母。</p>
输入你的名字: <input type="text" id="fname" onkeyup="displayResult()">
</body>

4.1 鼠标事件

通过鼠标触发事件, 类似用户的行为

4.1.1 常见事件

onclick： 当单击鼠标时运行脚本

<body>
    <input type="text" id="t1">
    <button onclick="copy()">复制</button><br/>
    <input type="text" id="t2" readonly>
</body>
<script>
    function copy() {
        document.getElementById('t2').value = document.getElementById('t1').value;
    }
</script>

ondblclick： 当双击鼠标时运行脚本


<body>
    <input type="text" id="t1">
    <button ondblclick="copy()">双击复制</button><br/>
    <input type="text" id="t2" readonly>
</body>
<script>
    function copy() {
        document.getElementById('t2').value = document.getElementById('t1').value;
    }
</script>

onmousedown： 当按下鼠标按钮时运行脚本
onmounseup： 当松开鼠标按钮时运行脚本

<body>
    <span id="mousechange" onmousedown="mousedown()" onmouseup="mouseup()">点击更换背景</span>
</body>
<script>
    function mousedown() {
        document.getElementById('mousechange').style.background = "blue";
    }

    function mouseup() {
        document.getElementById('mousechange').style.background = "red";
    }
</script>

onmousemove： 当鼠标指针移动时运行脚本
onmouseover： 当鼠标指针移至元素之上时运行脚本
onmouseout： 当鼠标指针移出元素时运行脚本

<body>
    <span id="ct" onmouseover="mouseover()" onmouseout="mouseout()">点击更换背景</span>
    <span id="bc" onmousemove="mousemove()" onmouseout="mouseout1()">鼠标移动变化背景</span>
</body>
<script>
    function mouseover() {
        document.getElementById('ct').style.background = "blue";
    }

    function mouseout() {
        document.getElementById('ct').style.background = "white";
    }

    function mousemove() {
        document.getElementById('bc').style.background = "yellow";
    }

    function mouseout1() {
        document.getElementById('bc').style.background = "white";
    }
</script>

4.2.1 其余事件

ondrag： 当拖动元素时运行脚本
ondragend： 当拖动操作结束时运行脚本
ondragenter： 当元素被拖动至有效的拖放目标时运行脚本
ondragleave： 当元素离开有效拖放目标时运行脚本
ondragover： 当元素被拖动至有效拖放目标上方时运行脚本
ondragstart： 当拖动操作开始时运行脚本
ondrop： 当被拖动元素正在被拖放时运行脚本
onmousewheel： 当转动鼠标滚轮时运行脚本
onscroll： 当滚动元素的滚动条时运行脚本

5.1 多媒体事件

属性	描述
onabort	当发生中止事件时运行脚本
oncanplay	当媒介能够开始播放但可能因缓冲而需要停止时运行脚本
oncanplaythrough	当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本
ondurationchange	当媒介长度改变时运行脚本
onemptied	当媒介资源元素突然为空时（网络错误、加载错误等）运行脚本
onended	当媒介已抵达结尾时运行脚本
onerror	当在元素加载期间发生错误时运行脚本
onloadeddata	当加载媒介数据时运行脚本
onloadedmetadata	当媒介元素的持续时间以及其他媒介数据已加载时运行脚本
onloadstart	当浏览器开始加载媒介数据时运行脚本
onpause	当媒介数据暂停时运行脚本
onplay	当媒介数据将要开始播放时运行脚本
onplaying	当媒介数据已开始播放时运行脚本
onprogress	当浏览器正在取媒介数据时运行脚本
onratechange	当媒介数据的播放速率改变时运行脚本
onreadystatechange	当就绪状态（ready-state）改变时运行脚本
onseeked	当媒介元素的定位属性 [1] 不再为真且定位已结束时运行脚本
onseeking	当媒介元素的定位属性为真且定位已开始时运行脚本
onstalled	当取回媒介数据过程中（延迟）存在错误时运行脚本
onsuspend	当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本
ontimeupdate	当媒介改变其播放位置时运行脚本
onvolumechange	当媒介改变音量亦或当音量被设置为静音时运行脚本
onwaiting	当媒介已停止播放但打算继续播放时运行脚本

二、JavaScript 事件

HTML 事件是发生在 HTML 元素上的“事情”，JavaScript 则是能够“应对”这些“事情”。

JavaScript 允许在事件被侦测到时执行代码。通过 JavaScript 代码，HTML 允许您向 HTML 元素添加事件处理程序。

6.1 事件处理的3种方式

事件传递有两种方式：冒泡与捕获。事件传递即是元素事件触发的顺序。
- 例：div元素中包含p元素，用户点击p元素，哪个元素的click事件先被触发呢？
- 在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即：p元素的点击事件先触发，然后会触发div元素的点击事件。
- 在捕获中，外部元素会先被触发，然后才会触发内部元素的事件，即：div元素的点击事件先触发，然后再触发p元素的点击事件。
HTML事件处理

    <button onclick="this.innerHTML=Date()">显示时间</button>

    <button onclick="document.getElementById('date').innerText=Date()">显示时间</button>
    <p id="date"></p>

    <button onclick="showdate(this)">显示时间</button>
    <script>
        function showdate(that) {
            that.innerText = Date();
        }
    </script>

DOM0级事件处理程序

    <button id="btn_date">显示时间</button>
    <script>
        var btn_date = document.getElementById('btn_date');
        btn_date.onclick = function() {
            btn_date.innerText = Date();
        }
    </script>

DOM2级事件处理程序

`addEventListener( event, function, useCapture)`

addEventListener()方法可以指定 useCapture 参数来设置传递类型
默认值为false, 即冒泡传递，当值为true时, 事件使用捕获传递。

  <button id="btn_date">显示时间</button>
    <script>
        var btn_date = document.getElementById('btn_date');
        btn_date.addEventListener("click", function() {
            this.innerText = Date();
        }, false);
    </script>

7.1 使用Jquery对事件进行处理

<head>
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function() {
            $('button').click(function() {
                $(this).text(Date())
            })
        })
    </script>
</head>
<body>
    <button>显示时间</button>
</body>

Event 函数	绑定函数至
$(document).ready(function)	将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)	触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)	触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)	触发或将函数绑定到被选元素的鼠标悬停事件