第十三章——JavaScript事件机制

JavaScript的事件机制：事件是JavaScript和DOM交互的桥梁，常见的click，load，mouseover都是事件的名字，事件发生时调用它的处理函数执行相应的JavaScript代码并给出响应。

13.1 JavaScript事件的调用方式

13.1.1 在script标签中使用

<body>
<p>点击按钮执行<em>displayDate()</em>函数，显示当前时间信息</p>
<button id="myBtn">显示时间</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate(){
	document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>




//或者这样调用
document.addEventListener("event", function(event) {
	//内容
})

事件名称必须小写

13.1.2 在元素中调用

<body>
<p>点击按钮执行<em>displayDate()</em>函数，显示当前时间信息</p>
<button onclick="displayDate()">显示时间</button>
<script>
function displayDate(){
	document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>

13.2 JavaScript常用事件

13.2.1 鼠标相关事件

  • 鼠标单击事件：如上

  • 鼠标按下与松开事件

    • onmousedown
    • onmouseup

  • 鼠标移入与移出：

    • onmouseover
    • onmouseout

鼠标移入使图片变大，移出时图片变小：

<script>
function bigImg(x){
	x.style.height="64px";
	x.style.width="64px";
}
function normalImg(x){
	x.style.height="32px";
	x.style.width="32px";
}
</script>
</head>
<body>
<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="smiley.gif" alt="Smiley" width="32" height="32">
</body>

  • 鼠标移动事件：onmousemove

    当鼠标移动时，在状态栏显示鼠标的位置

<script language="javascript">
var x=0,y=0;
function MousePlace()
{
	x=window.event.x;
	y=window.event.y;
	window.status="X: "+x+" "+"Y: "+y;
}
document.onmousemove=MousePlace;
</script>
在状态栏中显示了鼠标在页面中的当前位置。
</body>

13.2.2 键盘相关事件

  • onkeydown事件

    应用实例：当用户按下enter时，自动跳入下一个文本输入框

<input type="text" name="txtInfo"
 onkeydown="if(event.keyCode==13) event.keyCode==9;">

按下一个按键时弹出提示信息：

<script>
function myFunction(){
	alert("你在文本框内按下一个键");
}
</script>
</head>
<body>
<p>当你在文本框内按下一个按键时，弹出一个信息提示框</p>
<input type="text" onkeydown="myFunction()">
</body>

  • onkeypress事件

    onkeypress和onkeydown的区别就是：onkeypress只有在按下（A-Z）的时候才会触发，而且后于onkeydown的触发时间。

<script>
function myFunction(){
	alert("你在文本框内按下一个键");
}
</script>
</head>
<body>
<p>当你在文本框内按下一个按键时，弹出一个信息提示框</p>
<input type="text" onkeypress="myFunction()">
</body>

  • onkeyup事件

    当键盘中的按键被按下然后松开时触发，比如将用户输入的字符转换为大写：

<script>
function myFunction(){
	var x=document.getElementById("fname");
	x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
<p>当用户在输入字段释放一个按键时触发函数，该函数将字符转换为大写。</p>
请输入你的英文名字: <input type="text" id="fname" onkeyup="myFunction()">
</body>

13.2.3 表单相关事件

  • 获得焦点与失去焦点的事件

    • onfocus
    • onblur 
<input type="text" name="textfield" onfocus="txtfocus()" onblur="txtblur()">

//使用event和SrcElement
function txtfocus(event){
	   var e=window.event;
	   var obj=e.srcElement;
	   obj.style.background="#F00066";
}

  • 失去焦点修改事件
    onchange，一般用于下拉文本框

  • 表单提交与重置事件

    • onsubmit：用来检验表单的正确性
    • onreset：用来清空表单中的文本框 
<form name="form1" 
	onReset="return AllReset()" 
	onsubmit="return AllSubmit()">


<script language="javascript">
function AllReset()
{
	if (window.confirm("是否进行重置？"))
		return true;
	else
		return false;
}
function AllSubmit()
{
	var T=true;
	var e=window.event;
	var obj=e.srcElement;
	for (var i=1;i<=7;i++)
	{
		if (eval("obj."+"txt"+i).value=="")
		{
			T=false;
			break;
		}
	}
	if (!T)
	{
		alert("提交信息不允许为空");
	}
	return T;
}
</script>

13.2.4 文本编辑事件

  • 复制事件
    oncopy事件是指用户复制内容时触发 
<body>
<p oncopy="myFunction()">oncopy复制事件的应用</p>
<script>
function myFunction() {
    alert("你复制了文本！");
}
</script>

实际应用中可以是提示：复制成功

  • 剪切事件

    • oncut

  • 粘贴事件

    • onpaste

实际应用可以是：CSDN等版权信息自动粘贴

  • 选择事件

    • onselect：在相应的文本中选择一个字符后触发

13.2.5 页面相关事件

页面相关的事件是在页面加载或改变浏览器的大小位置，和滚动条进行操作的时候触发的事件。

  • 页面加载事件：onload，会在页面或者图像加载完成后触发相应的事件处理程序 
<img src="01.jpg" name="img1" 
onload="blowup(this)" 	//缩小图片
onmouseout="blowup()" 	//缩小图片
onmouseover="reduce()">//还原图片

  • 页面大小事件：onresize，改变浏览器大小时触发的事件

  • 页面关闭事件：页面关闭时挽留用户

<body onbeforeunload="return myFunction()">
<p>关闭当前窗口，触发 onbeforeunload 事件。</p> 
<script>
function myFunction() {
    return "函数返回结果...";
}
</script>
</body>

13.2.6 拖动相关事件

  • 拖动对象事件
    拖动对象事件包括：

      - ondragstart     拖动开始时触发
  - ondrag          正在拖动时触发
  - ondragend       拖动完成时触发

    一般都要使用ondragend来结束拖动事件

  • 放置目标事件
    放置目标事件包括：

    • ondragenter：拖动对象进入范围触发
    • ondragover：拖动对象在另一容器范围内被拖动时触发
    • ondragleave：离开其容器范围内触发
    • ondrop：松开鼠标键时触发

被拖动元素每隔350毫秒会触发ondrag事件

<body>

    <p>在两个矩形框中来回拖动文本:</p>
    <div class="droptarget">
        <p draggable="true" id="dragtarget">拖动我!</p>
    </div>
    <div class="droptarget"></div>
    <p style="clear:both;">
        <p id="demo"></p>
        <script>
            /* 拖动时触发*/
            document.addEventListener("dragstart", function (event) {
                //dataTransfer.setData()方法设置数据类型和拖动的数据
                event.dataTransfer.setData("Text", event.target.id);
                // 拖动 p 元素时输出一些文本
                document.getElementById("demo").innerHTML = "开始拖动文本.";
                //修改拖动元素的透明度
                event.target.style.opacity = "0.4";
            });
            //在拖动p元素的同时,改变输出文本的颜色
            document.addEventListener("drag", function (event) {
                document.getElementById("demo").style.color = "red";
            });
            // 当拖完p元素输出一些文本元素和重置透明度
            document.addEventListener("dragend", function (event) {
                document.getElementById("demo").innerHTML = "完成文本的拖动";
                event.target.style.opacity = "1";
            });
            /* 拖动完成后触发 */
            // 当p元素完成拖动进入droptarget,改变div的边框样式
            document.addEventListener("dragenter", function (event) {
                if (event.target.className == "droptarget") {
                    event.target.style.border = "3px dotted red";
                }
            });
            // 默认情况下,数据/元素不能在其他元素中被拖放。对于drop我们必须防止元素的默认处理
            document.addEventListener("dragover", function (event) {
                event.preventDefault();
            });
            // 当可拖放的p元素离开droptarget，重置div的边框样式
            document.addEventListener("dragleave", function (event) {
                if (event.target.className == "droptarget") {
                    event.target.style.border = "";
                }
            });
            /*对于drop,防止浏览器的默认处理数据(在drop中链接是默认打开) 复位输出文本的颜色和DIV的边框颜色 利用dataTransfer.getData()方法获得拖放数据 拖拖的数据元素id(“drag1”) 拖拽元素附加到drop元素*/
            document.addEventListener("drop", function (event) {
                event.preventDefault();
                if (event.target.className == "droptarget") {
                    document.getElementById("demo").style.color = "";
                    event.target.style.border = "";
                    var data = event.dataTransfer.getData("Text");
                    event.target.appendChild(document.getElementById(data));
                }
            });
        </script>
</body>

13.3 JavaScript处理事件的方式

13.3.1 通过匿名函数处理

通过function对象构造匿名函数,将其方法赋值给事件，此时该匿名函数就是该事件的事件处理器。

13.3.2 通过显式声明处理

即给函数赋值，再调用

13.3.3 通过手工触发处理

//通过其他元素的方法来触发一个事件
<center>
    <form name=MyForm1 id=MyForm1 onsubmit="MyTest()" method=post action="haapyt.asp">
      <input type=button value="测试" onclick="document.all.MyForm1.submit();">
      <input type=submit value="确定">
  </center>

13.***对象Event

event代表事件的状态,一旦事件发生,便会生成Event对象

window.event引用,其中window可省略

常用方法:

  • type：返回表示的事件的名称
  • currentTarget
  • target
  • charCode

13.5 事件模拟

通过document.createEvent( " " ) 可以模拟事件
参数传入有:

  • UIEvent
  • MouseEvents
  • MutationEvents
  • HTMLEvents

第十四章——正则表达式

重点来了!
现在正式开始学习正则表达式-2020年2月7日14:33:14
以前也接触过，自己做项目的时候也用到过电话号码的校验，但是没有正式的系统的学过，今天把它补上。

别称：Regex，regexp，RE

格式：

/主体/i

14.1 基础知识

14.1.1 修饰符

i //执行对大小写不敏感的匹配
g //匹配所有而非一个就停
m //执行多行匹配，针对\n之后的也匹配

14.1.2 表达式

  • [abc]
  • 查找方括号之间的任何字符
  • [^abc]
  • 查找任何不在方括号之间的字符
  • [0-9]
  • 查找任何从零到9的数字
  • [a-z]
  • 查找小写字母
  • (red|blue|green)
  • 查找任何指定的选项

14.1.3 元字符

  • \w
  • 查找单词
  • \W
  • 查找非单词
  • \d
  • 查找数字
  • \D
  • 查找非数字
  • \s
  • 查找空白字符
  • \b
  • 匹配单词边界
  • \B
  • 匹配非单词边界 
//举例(.)
h.t匹配hat和hot
//举例(\d)
100.match(reg)
/\d/g 匹配1,0,0

14.1.4 量词

  • n+
  • 匹配任何至少包含一个n的字符串
  • n*
  • 匹配任何包含零个或多个n的字符串
  • n?
  • 匹配任何包含零个或一个n的字符串
  • n{X}
  • 匹配包含x个n的字符串
  • n{X,}
  • 匹配至少包含x个n的字符串
  • n{X,Y}
  • 匹配n至少出现X次,至多出现Y次
  • n$
  • 匹配任何结尾为n的字符串
  • ^n
  • 匹配任何以n开头的字符串
  • ?=n
  • 匹配任何其后紧接指定字符串为n的字符串

14.1.5 字符定位

  • ^

  • $

  • \b

    • 单词边界,就是说匹配order 而不匹配 verb
    • 因为er在单词的边界所以匹配

  • -B

    • 匹配非单词边界，匹配字符的两边必须是非字符类型

14.1.6 转义匹配

\可以转义一些字符

14.2 RegExp对象

14.2.1 创建对象的方法

  • new RegExp(“正则式”,“修饰符(可选)”)
  • /正则式/修饰符

14.2.2 常用的方法

  1. compile()
    传入正则表达式，进行重新编译
  2. exec()
    传入字符，检验是否匹配，输出匹配的字符或null
  3. test()
    检验是否匹配，输出布尔
  4. search()
    检索子字符串，返回位置
  5. match()
    匹配正则，返回数组或null
  6. replace()
    替换文本，前一个参数是规则，后一个参数是你想替换成什么
  7. split()
    分割，前一个参数是规则，后一个参数是可选的，指定数组的最大长度 
<script>
				/*是否带有小数*/
				function isDecimal(strValue) {
					var objRegExp = /^\d+\.\d+$/;
					return objRegExp.test(strValue);
				}
				/*校验是否中文名称组成 */
				function ischina(str) {
					var reg = /^[\u4E00-\u9FA5]{2,4}$/; /*定义验证表达式*/
					return reg.test(str); /*进行验证*/
				}
				/*校验是否全由8位数字组成 */
				function isStudentNo(str) {
					var reg = /^[0-9]{8}$/; /*定义验证表达式*/
					return reg.test(str); /*进行验证*/
				}
				/*校验电话码格式 */
				function isTelCode(str) {
					var reg = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
					return reg.test(str);
				}
				/*校验邮件地址是否合法 */
				function IsEmail(str) {
					var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
					return reg.test(str);
				}

				function fun1() {
					if (!isStudentNo(document.getElementById("sno").value)) {
						alert("学生编号是8位数字");
						document.getElementById("sno").focus();
						return false;
					}

					if (!ischina(document.getElementById("username").value)) {
						alert("学生姓名必须填写中文");
						document.getElementById("username").focus();
						return false;
					}

					if (!IsEmail(document.getElementById("email").value)) {
						alert("邮箱地址错误");
						document.getElementById("email").focus();
						return false;
					}

					if (!isTelCode(document.getElementById("tel").value)) {
						alert("电话号码不对");
						document.getElementById("tel").focus();
						return false;
					}

					/*运行到这里说明验证通过返回true submit提交按钮起作用提交表单*/
					alert("提交成功")
					return true;
				}
			</script>