JavaScript 事件学习-摩杜云开发者社区

文章目录

事件基础
事件进阶

事件基础

JavaScript 中一个事件由事件主角、事件类型、事件过程三部分组成

事件调用方式

script 标签中调用

<script></script>

obj.事件名 = function()
{
      
        
    ....;
};  // ; 是为了规范

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script> window.onload = function() {
        
           // 获取元素 var obtn = document.getElementById("btn"); // 为元素添加点击事件 obtn.onclick = function() {
        
           alert("学习网"); }; } </script>
	</head>
	<body>
		<input id="btn" type="button" value="弹出" />
	</body>
</html>

元素中调用事件

元素中调用事件是在 HTML 属性中来调用事件，即事件属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script> function alertMes() {
        
           alert("学习网"); } </script>
	</head>
	<body>
		<input type="button" onclick="alertMes()" value="弹出" />
	</body>
</html>

常见事件

鼠标事件

onclick：鼠标单击事件可以为任何元素添加单击事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script> window.onload = function() {
        
           var odiv = document.getElementById("btn"); odiv.onclick = function() {
        
           alert("学习网"); }; }; </script>
	</head>
	<body>
		<div id="btn">调式代码</div>
	</body>
</html>

obtn.onclick = alertMes;
function alertMes()
{
      
        
    alert("Hello Word");
};
/* 等价如下 */
obtn.onclick = function()
{
      
        
    alert("Hello Word");
};

onmouseover：鼠标移入事件
onmouseout：鼠标移出事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script> window.onload = function() {
        
           var op = document.getElementById("content"); op.onmouseover = function() {
        
           this.style.color = "red"; }; op.onmouseout = function() {
        
           this.style.color = "black"; }; }; </script>
	</head>
	<body>
		<p id="content">学习网</p>
	</body>
</html>

onmousedown：鼠标按下事件
onmouseup：鼠标松开事件
onmousemove：鼠标移动事件
当鼠标按下会触发 onmousedown 事件，当用户松开时会触发 onmouseup 事件，鼠标移动会触发 onmousemove 事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script> window.onload = function() {
        
           var odiv = document.getElementById("title"); var obtn = document.getElementById("btn"); obtn.onmousedown = function() {
        
           odiv.style.color="red"; }; obtn.onmouseup = function() {
        
           odiv.style.color = "black"; }; obtn.onmousemove = function() {
        
           odiv.style.color = "gold"; }; }; </script>
	</head>
	<body>
		<h1 id="title">学习网</h1>
		<hr />
		<input id="btn" type="button" value="button"/>
	</body>
</html>

键盘事件

onkeydown：键盘按下
onkeyup：键盘松开
统计输入字符串的长度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script> window.onload = function() {
        
           var otxt = document.getElementById("txt"); var onum = document.getElementById("num"); otxt.onkeyup = function() {
        
           var str = otxt.value; onum.innerHTML = str.length; }; }; </script>
	</head>
	<body>
		<input id="txt" type="text" />
		<div>字符串长度为:<span id="num">0</span></div>
	</body>
</html>

验证输入是否正确

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script> window.onload = function() {
        
           var otxt = document.getElementById("txt"); var odiv = document.getElementById("content"); var myregex = /^[0-9]*$/; otxt.onkeyup = function() {
        
           //判断输入是否是数字 if(myregex.test(otxt.value)){
        
           odiv.innerHTML = "输入正确"; }else{
        
           odiv.innerHTML = "必须输入数字"; } }; }; </script>
	</head>
	<body>
		<input id="txt" type="text" />
		<div id="content" style="color: red;"></div>
	</body>
</html>

表单事件

onfocus：获取焦点时触发的事件
onblur：失去焦点时触发的事件
用户准备在文本框中输入内容时，此时它会获得光标，触发 onfocus 事件；当文本框失去光标时，就会触发 onblur 事件；具有焦点事件地元素有：表单元素(单选框、复选框、单行文本框、多行文本框、下拉列表)、超链接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script> window.onload = function() {
        
           // 获取元素对象 var oSearch = document.getElementById("search"); // 获取焦点 oSearch.onfocus = function() {
        
           if(this.value == "百度一下，你就知道") this.value = ""; }; // 失去焦点 oSearch.onblur = function() {
        
           if(this.value == "") this.value = "百度一下，你就知道"; }; }; </script>
	</head>
	<body>
		<input id="search" type="text" value="百度一下，你就知道" />
		<input id="Button1" type="button" value="搜索" />
	</body>
</html>

focus() 仅仅用于让元素获取焦点
onselect：选中单行或者多行文本框中的内容时，就会触发 onselect 事件

每次点击搜索框，自动帮我们把文本框内的文本全部选中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script> window.onload = function() {
        
           var oSearch = document.getElementById("search"); oSearch.onclick = function() {
        
           this.select(); }; }; </script>
	</head>
	<body>
		<input id="search" type="text" value="百度一下，你就知道" />
	</body>
</html>

onchange：用于具有多个选项的表单元素；单选框选择某一项时触发；复选框选择某一项时触发；下拉列表选择某一项时触发
单选框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script> window.onload = function() {
        
           var ofruit = document.getElementsByName("fruit"); var op = document.getElementById("content"); for(var i = 0; i < ofruit.length; i++) {
        
           ofruit[i].onchange = function() {
        
           if(this.checked) op.innerHTML = "你选择的是：" + this.value; }; } } </script>
	</head>
	<body>
		<div>
			<label><input type="radio" name="fruit" value="苹果" />苹果</label>
			<label><input type="radio" name="fruit" value="香蕉" />香蕉</label>
			<label><input type="radio" name="fruit" value="西瓜" />西瓜</label>
		</div>
		<p id="content"></p>
	</body>
</html>

复选框的全选与反选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script> window.onload = function() {
        
           var oselectall = document.getElementById("selectAll"); var ofruit = document.getElementsByName("fruit"); oselectall.onchange = function() {
        
           // 如果选中，即 this.checked 返回 true if(this.checked){
        
           for(var i = 0; i < ofruit.length; i++) ofruit[i].checked = true; }else{
        
           for(var i = 0; i < ofruit.length; i++) ofruit[i].checked = false; } }; } </script>
	</head>
	<body>
		<div>
			<p><label><input id="selectAll" type="checkbox"/>全选/反选:</label></p>
			<label><input type="checkbox" name="fruit" value="苹果" />苹果</label>
			<label><input type="checkbox" name="fruit" value="香蕉" />香蕉</label>
			<label><input type="checkbox" name="fruit" value="西瓜" />西瓜</label>
		</div>
	</body>
</html>

下拉列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script> window.onload = function() {
        
           var olist = document.getElementById("list"); olist.onchange = function() {
        
           var link = this.options[this.selectedIndex].value; window.open(link); //打开一个新的窗口 }; } </script>
	</head>
	<body>
		<select id="list">
			<option value="http://www.baidu.com">百度</option>
			<option value="http://www.sina.com.cn">新浪</option>
			<option value="http://www.qq.com">腾讯</option>
			<option value="http://www.sohu.com">搜狐</option>
		</select>
	</body>
</html>

编辑事件

oncopy：防止页面内容被复制

document.body.oncopy = function()
{
      
        
    return false;
}

onselectstart：防止页面内容被选取

document.body.onselectstart = function()
{
      
        
    return false;
}

oncontextmenu：禁止鼠标右键

document.oncontextmenu = function()
{
      
        
    return false;
}

页面事件

onload：表示文档加载完成后再执行的一个事件

window.onload = function()
{
      
        
    ......
}

onbeforeunload：表示离开页面之前触发的一个事件

window.onbeforeunload = function()
{
      
        
    ......
}

一个函数仅仅是定义而没有被调用的话，则函数本身是不会执行的

事件进阶

在 JavaScript 中，想要给元素添加一个事件的两种方式是事件处理器和事件监听器

事件处理器

通过 HTML 属性的方式来给元素添加一个事件
事件处理器没办法为一个元素添加多个相同的事件

变量名.onclick = function()
{
      
        
    ......;
};

事件监听器

addEventListener()：为一个元素添加事件，可以为同一种元素添加多个相同的事件

obj.addEventListenner(type, fn, false)
/* obj是一个 DOM 对象，用 getElementById()、getElementsByTagName()等方法获取元素节点 type 是一个字符串，指的是事件类型 fn 是一个函数名，或者匿名函数 false 表示事件冒泡阶段的调用 */

// fn 是一个函数名
obtn.addEventListener("click", alertMes, false);
function alertMes()
{
      
        
    alert("JavaScript");
}
// 调用匿名函数
obtn.addEventListener("click", function(){
      
        
    alert("JavaScript");
}, false);

实际开发中，可能使用多次 window.onload，但是 JavaScript 只执行最后一次 window.onload

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript"> function addLoadEvent(func) {
        
           var oldonload = window.onload; if(typeof window.onload != "function"){
        
           window.onload = func; }else{
        
           window.onload = function() {
        
           oldonload(); func(); } } } addLoadEvent(function(){
        
           var obtn1 = document.getElementById("btn1"); obtn1.onclick = function() {
        
           alert("第一次"); }; }); addLoadEvent(function(){
        
           var obtn2 = document.getElementById("btn2"); obtn2.onclick = function() {
        
           alert("第二次"); }; }); addLoadEvent(function(){
        
           var obtn3 = document.getElementById("btn3"); obtn3.onclick = function() {
        
           alert("第三次"); }; }); </script>
	</head>
	<body>
		<input id="btn1" type="button" value="按钮1" /><br />
		<input id="btn2" type="button" value="按钮2" /><br />
		<input id="btn3" type="button" value="按钮3" /><br />
	</body>
</html>

removeEventListener()：为元素解绑某个事件

obj.removeEventListener(type, fn, false);
/* obj:是一个DOM对象, 使用 getElementById()、getElementsByTagName()等方法获取 type: 字符串, 指的是事件类型, fn 必须是一个函数名, 而不能是一个函数 */

解除事件监听器添加的事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script> window.onload = function(){
        
           var odiv = document.getElementById("content"); var obtn = document.getElementById("btn"); // 为 div 添加事件 odiv.addEventListener("click", changeColor, false); // 点击按钮后,为 div 解除事件 obtn.addEventListener("click",function(){
        
           odiv.removeEventListener("click", changeColor, false); }, false); function changeColor(){
        
           this.style.color = "hotpink"; } } </script>
	</head>
	<body>
		<p id="content">学习网</p>
		<input id="btn" type="button" value="解除" />
	</body>
</html>

解除事件处理器添加的事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script> window.onload = function(){
        
           var odiv = document.getElementById("content"); var obtn = document.getElementById("btn"); // 为 div 添加事件 odiv.onclick = changeColor; // 点击按钮后,为 div 解除事件 obtn.addEventListener("click",function(){
        
           odiv.onclick = null; }, false); function changeColor(){
        
           this.style.color = "hotpink"; } } </script>
	</head>
	<body>
		<p id="content">学习网</p>
		<input id="btn" type="button" value="解除" />
	</body>
</html>

event 对象

event对象：事件有关的详细信息临时保存的指定的地方

属性	说明
$t y p e$	事件类型
$k e y C o d e$	键码值
$s h i f t K e y$	是否按下 $S h i f t$ 键
$c t r l K e y$	是否按下 $C t r l$ 键
$a l t K e y$	是否按下 $A l t$ 键

shiftKey、ctrlKey、altKey 返回的是布尔值

type

type：获取事件的类型， . 运算符访问

keyCode

keyCode：获取按下了键盘中的哪个键

event.keyCode;  // 返回的是一个数值

按键	键码
W(上)	87
S(下)	83
A(左)	65
D(右)	68
⬆	38
⬇	40
⬅	37
➡	39

获取上下左右方向键

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script> window.onload = function(){
        
           var ospan = document.getElementsByTagName("span")[0]; window.addEventListener("keydown", function(e){
        
           if(e.keyCode == 38 || e.keyCode == 68){
        
           ospan.innerHTML = "上"; }else if(e.keyCode == 39 || e.keyCode == 68){
        
           ospan.innerHTML = "右"; }else if(e.keyCode == 40 || e.keyCode == 83){
        
           ospan.innerHTML = "下"; }else if(e.keyCode == 37 || e.keyCode == 65){
        
           ospan.innerHTML = "左"; }else{
        
           ospan.innerHTML = ""; } }, false); } </script>
	</head>
	<body>
		<div>你控制的方向是:<span style="font-weight: bold; color: hotpink;"></span></div>
	</body>
</html>

this 对象

哪个 DOM 对象调用了 this 所在的函数，那么 this 指向的就是哪个 DOM 对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script> window.onload = function() {
        
           var btns = document.getElementsByTagName('button'); // btns得到的是伪数组 里面的每一个元素 btns[i] for (var i = 0; i < btns.length; i++) {
        
           btns[i].onclick = function() {
        
           // (1) 我们先把所有的按钮背景颜色去掉 干掉所有人 for (var i = 0; i < btns.length; i++) {
        
           btns[i].style.backgroundColor = ''; } // (2) 然后才让当前的元素背景颜色为pink 留下我自己 this.style.backgroundColor = 'pink'; } } } </script>
	</head>
	<body>
		<button>按钮1</button>
		<button>按钮2</button>
		<button>按钮3</button>
		<button>按钮4</button>
		<button>按钮5</button>
	</body>
</html>