文章/答案/技术大牛

发布

JavaScript学习笔记——基础篇

共 3 篇文章

JavaScript学习笔记（一）

JavaScript学习笔记（二）

JavaScript学习笔记（三）

清单首页JavaScript学习笔记——基础篇文章详情

清单「JavaScript学习笔记——基础篇」 02/03

JavaScript学习笔记（二）

wsuo

第十三章——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.4 事件对象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 常用的方法

compile() 传入正则表达式，进行重新编译
exec() 传入字符，检验是否匹配，输出匹配的字符或null
test() 检验是否匹配，输出布尔
search() 检索子字符串，返回位置
match() 匹配正则，返回数组或null
replace() 替换文本，前一个参数是规则，后一个参数是你想替换成什么
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>

JavaScript学习笔记——基础篇

JavaScript学习笔记（二）

第十三章——JavaScript事件机制

13.1 JavaScript事件的调用方式

13.1.1 在script标签中使用

13.1.2 在元素中调用

13.2 JavaScript常用事件

13.2.1 鼠标相关事件

13.2.2 键盘相关事件

13.2.3 表单相关事件

13.2.4 文本编辑事件

13.2.5 页面相关事件

13.2.6 拖动相关事件

13.3 JavaScript处理事件的方式

13.3.1 通过匿名函数处理

13.3.2 通过显式声明处理

13.3.3 通过手工触发处理

13.4 事件对象Event

13.5 事件模拟

第十四章——正则表达式

14.1 基础知识

14.1.1 修饰符

14.1.2 表达式

14.1.3 元字符

14.1.4 量词

14.1.5 字符定位

14.1.6 转义匹配

14.2 RegExp对象

14.2.1 创建对象的方法

14.2.2 常用的方法

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐