重点:
页面进行某些类型的交互时,事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定
元素或按下键盘上的某些按键。事件还可能是 Web 浏览器中发生的事情,比如说某个 Web 页面加载完
成,或者是用户滚动窗口或改变窗口大小。
应。
JavaScript可以处理的事件类型为:鼠标事件、键盘事件、HTML事件。
http://www.w3school.com.cn/tags/html_ref_eventattributes.asp 用+查
Window 事件属性:针对 window 对象触发的事件(应用到 标签)
Form 事件:由 HTML 表单内的动作触发的事件(应用到几乎所有 HTML 元素,但最常用在
form 元素中)
Keyboard 事件 : 键盘事件
Mouse 事件:由鼠标或类似用户动作触发的事件
Media 事件:由媒介(比如视频、图像和音频)触发的事件(适用于所有 HTML 元素,但常见于
媒介元素中,比如 、、、 以及)
几个常用的事件:
onclick 、onblur 、onfocus 、onload 、onchange
onmouseover、onmouseout、onkeyup、onkeydown
onload:当页面或图像加载完后立即触发
onblur:元素失去焦点
onchange:用户改变域的内容
onfocus:元素获得焦点
onclick:鼠标点击某个对象
onmouseover:鼠标移动到某个元素上
onmouseout:鼠标从某个元素上离开
onkeyup:某个键盘的键被松开
onkeydown:某个键盘的键被按下
HTML元素产生一个事件时,该事件会在元素节点与根节点之间按特定的顺序传播,路径所经过的节点
都会受到该事件,这个传播过程称为DOM事件流。
的事件流概念产生的。(事件流:是指页面接受事件的顺序)IE的事件流是事件冒泡,Netscape的事件
流是事件捕获流。
事件,而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。还
以前面的例子为例。那么单击元素就会按下列顺序触发click事件:document,html,body,div。
型。尽管“DOM2级事件”规范要求事件应该从document对象开始时传播,但这些浏览器都是从window
对象开始捕获的。
先发生的是事件捕获阶段,为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒
泡阶段,可以在这个阶段对事件做出响应。
响应某个事件的函数就叫做事件处理程序(或事件侦听器)。事件处理程序的名字以“on”开头,因此
click事件的事件处理程序就是onclick,为事件指定处理程序的方式有好几种。
某个元素支持的每种事件,都可以用一个与相应事件处理程序同名的HTML特性来指定。
直接绑定在html元素中
特点:
与元素标签耦合度过高
使用方式:
注意:alert不点击会阻止下面代码的运行
function fun1(){
alert('123');//alert不点击会阻止下面代码的运行
console.log('456');
}
<button type="button" onclick="fun1()" onmousemove="console.log('鼠标悬停')">HTML 事件处理程序button>
<button type="button" onclick="alert('123');">HTML 事件处理程序1button>
种方式被所有现代浏览器所支持。这种方式首先必须取得一个要操作的对象的引用,每个元素都有自己
的事件处理程序属性,这些属性通常全都小写,例如onclick,然后将这种属性的值设为一个函数,就可
以指定事件处理程序了。
特点:
不能为同一个元素绑定同一个事件的多个处理程序,会覆盖
以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理
使用方式
1.通过id获取元素对象
var 变量名 = document.getElementById("元素的id属性值");
2.通过元素对象绑定事件
变量名.on事件名 = function(){
//处理程序
}
通过删除DOM0级方法指定的事件处理程序,只要将属性值 设为null即可
报错Cannot set properties of null (setting ‘onmouseout’)
解决办法:将DOM的读取部分的script放在body后面。或者在script标签中添加window.onload,等页面加载结束后再执行这一部分代码。
//DOM0 级事件处理程序
//1.获取元素对象
var btn0 = document.getElementById("btn0");
//绑定事件
btn0.onmouseout = function(){
console.log("鼠标移开1");
}
btn0.onmousemove = function(){
console.log("鼠标移动");
}
/* btn0.onmouseout = function(){
console.log("鼠标移开2");
}//覆盖之前的 */
//删除DOM0级方法指定的事件处理程序
btn0.onmousemove = null;
<button type="button" id='btn0'>DOM0 级事件处理程序button>
和removeEventListener()。所有DOM节点都包含这两个方法,并且他们都接受3个参数:要处理的事件
名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true,则表示在捕获阶段调用
事件处理程序;如果是false则表示在冒泡阶段调用事件处理程序。 最后一个可以不写.
var btn3 = document.getElementById("btn3");
var btn4 = document.getElementById("btn4");
//添加事件的监听
btn3.addEventListener('click',function(){
console.log("DOM2 级事件处理程序 点击1");
},false)
btn3.addEventListener('click',click1,false);
function click1(){
console.log("DOM2 级事件处理程序 点击2");
}
//不写false也可以
btn3.addEventListener('mouseover',function(){
console.log("DOM2 级事件处理程序 悬停");
});
//按钮4点击删除按钮3的处理程序,需要有名字
btn4.addEventListener('click',function(){
btn3.removeEventListener('click',click1);
})
<button type="button" id="btn3">按钮3 DOM2 级事件处理程序button>
<button type="button" id="btn4">按钮4 删除按钮3的事件button>
BOM的核心对象是window,它表示浏览器的一个实例。window对象有双重角色,它既是通过 JavaScript访
问浏览器窗口的一个接口,又是ECMAScript规定的Global对象。这意味着在网页中定义的 任何一个对象、变
量和函数,都以window作为其Global对象,因此有权访问parseInt()等方法。如果页 面中包含框架,则每个
框架都拥有自己的window对象,并且保存在frames集合中。在frames集合中, 可以通过数值索引(从0开
始,从左至右,从上到下)或者框架的名称来访问相应的window对象。
框向用户显示消息。
消息框:alert, 常用。
alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。
输入框:prom返回提示框中的值。
prompt() 方法用于显示可提示用户进行输入的对话框。
参数(可选):
第一个参数:要在对话框中显示的纯文本。
第二个参数:默认的输入文本。
确认框:confirm,返回 true/false.
confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。
<body>
<button type="button" onclick="fun()">按钮button>
<script type="text/javascript">
function fun(){
//消息框
//alert('欢迎');
//输入框
//window加不加都可以
/* var uname = window.prompt('请输入用户名');
if(uname == 'admin'){
alert("欢迎超级用户:"+uname);
}else{
alert("欢迎普通用户:"+uname);
} */
// 确认框
var flag = confirm('确认删除这条记录吗?')
if(flag){
alert('删除成功');
}
}
script>
body>
<body>
<button type="button" onclick="fun()">按钮button>
<script type="text/javascript">
function fun(){
//打开一个空的窗口
//window.open();
//打开一个在线地址
// window.open("http://www.baidu.com");
//打开一个本地地址
//window.open("01 弹出框.html");
// 当前窗口打开在线地址
window.open("http://www.baidu.com","_self")
}
script>
body>
1 setTimeOut
2 setInteval()
来结束。该方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。
setInterval(function() {
console.log("setInteval 2 秒");
}, 2000)
3 时间例子
<button type="button" onclick="startTime()">开始button>
<button type="button" onclick="closeTime()">结束button>
<h2 id="h2">h2>
<script type="text/javascript">
//开启时间函数,循环的写出时间
function startTime(){
id = setInterval(writeTime,1000);
}
//时间停止
function closeTime(){
//清除时间函数
clearInterval(id);
}
//获取时间写出时间到页面中
function writeTime(){
//获取到当前时间
var date = new Date();
//格式化时间
var str = format(date);
//写出在页面中 设置元素的值/内容:对象.innerHTML = 值;
/* var h2 = document.getElementById("h2");
h2.innerHTML = str; */
//变色
if(date.getSeconds() == 0){
//设置样式
document.getElementById("h2").style.color = "red";
}else{
document.getElementById("h2").style.color = "black";
}
document.getElementById("h2").innerHTML = str;
}
//格式化时间的函数
function format(date){
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds() < 10 ? ("0"+date.getSeconds()) : date.getSeconds();
var str = year +"-"+ month +"-"+ day +" "+ hour +":"+ minute +":"+ second;
return str
}
script>
对象的一部分,可通过 window.history 属性对其进行访问。
<body>
head>
<h2>1号页面h2>
<a href="04 history2.html">跳转到2号页面a>
<button type="button" onclick="fun()">forward前进button>
<script type="text/javascript">
console.log(window.history.length);
function fun(){
window.history.forward();
}
script>
body>
<body>
<h2>2号页面h2>
<a href="04 history3.html">跳转到3号页面a>
<button type="button" onclick="fun1()">back后退button>
<button type="button" onclick="fun2()">forward前进button>
<script type="text/javascript">
console.log(window.history.length);
function fun1(){
window.history.back();
}
function fun2(){
window.history.forward();
}
script>
body>
<body>
<h2>3号页面h2>
<button type="button" onclick="fun1()">go跳转button>
<button type="button" onclick="fun2()">back后退button>
<script type="text/javascript">
console.log(window.history.length);
function fun1(){
window.history.go(-2);
}
function fun2(){
window.history.back();
}
script>
body>
导航功能。也可通过 window.location 属性来访问。
location 对象的属性
href:设置或返回完整的 URL
window.location.href 获取当前页面地址
location 对象的方法
reload():重新加载当前文档。
replace():用新的文档替换当前文档。
<body>
<button type="button">按钮button>
<button type="button" onclick="window.location.reload()">重新加载button>
<button type="button" onclick="location.replace('http://www.baidu.com')">替换button>
<script type="text/javascript">
console.log(window.location.href);
<!-- window.location.href="http://www.baidu.com"; -->
script>
body>
节点类型 | HTML内容 | 例如 |
---|---|---|
文档节点 | 文档本身 | 整个文档 document |
元素节点 | 所有的HTML元素 | , , |
属性节点 | HTML元素内的属性 | id、href、name、class |
文本节点 | 元素内的文本 | hello |
注释节点 | HTML中的注释 |
在进行增、删、改的操作时,都需要指定到一个位置,或者找到一个目标,此时我们就可以通过 Document对象提供的方法,查找、定位某个对象(也就是我们说的节点)。
注意:a标签正常会执行跳转的操作,设置href=“javascript:void(0)” 表示伪协议 将不会跳转
操作 dom 必须等节点初始化完毕后,才能执行。
处理方式两种:
把 script 调用标签移到html末尾即可;
使用onload事件来处理JS,等待html 加载完毕再加载 onload 事件里的 JS。
window.onload = function () { //预加载 html 后执行}; 1
<body>
<p id="p1" class="para">这是一个段落<span>文本span>p>
<p id="p1" class="para">这又是一个段落p>
<input type="text" name="txt" />
<input type="checkbox" name="hobby" value="游泳" />游泳
<input type="checkbox" name="hobby" value="篮球" />篮球
<input type="checkbox" name="hobby" value="足球" />足球
<hr />
<a href="javascript:testById()">按照id获取a>
<a href="javascript:void(0)" onclick="testByName()">按照name获取a>
<a href="javascript:void(0)" onclick="testByTagName()">按照标签名获取a>
<a href="javascript:void(0);" onclick="testByClass();">按照class获取a>
<script type="text/javascript">
//加载事件
/* window.onload = function(){
var p = document.getElementById("p1");
console.log(p);
} */
//按照id获取
function testById(){
var p1 = document.getElementById("p1");
console.log(p1);
}
//按照name获取
function testByName(){
var hobby = document.getElementsByName("hobby");
console.log(hobby);
//确定一个,可以后面加一个[0]
var txt = document.getElementsByName("txt")[0];
console.log(txt);
}
//按照标签名获取
function testByTagName(){
var input = document.getElementsByTagName("input");
console.log(input);
}
//按照class获取
function testByClass(){
var para = document.getElementsByClassName("para");
console.log(para);
}
script>
body>
很多时候我们想要在某个位置插入一个新的节点,此时我们首先需要有一个节点存在,可以通过
以下几种方式创建新节点。
创建节点
插入节点
write() 将任意的字符串插入到文档中
appendChild() 向元素中添加新的子节点,作为最后一个子节点 ,如果追加的元素不存在,则添加新的;如果追加的元素存在,则会将原有的元素添加到新的位置(剪切),需要的是节点
insertBefore() 向指定的已有的节点之前插入新的节点,前面写需要插入的节点,后面写被插入节点
parent.insertBefore(zjl,select);
newItem:要插入的节点
exsitingItem:参考节点 需要参考父节点
<body>
<button onclick="addPara();">添加段落button>
<button onclick="addImg();">添加图片button>
<button onclick="addTxt();">添加文本框button>
<button onclick="addOptions()">添加选项button>
<select name="music">
<option value="-1">你心内的一首歌option>
<option value="0">南山南option>
<option value="1">喜欢你option>
select>
<hr />
<div id="container">div>
<span>周杰伦span>
<script type="text/javascript">
//获取需要添加节点的位置
var div = document.getElementById("container");
//添加段落,设置内容
function addPara(){
//方式一
//创建元素节点
/* var p = document.createElement("p");
//创建文本节点
var text = document.createTextNode("段落标签");
//将文本节点追加到元素节点的内部
p.appendChild(text);
console.log(p);
//将元素追加到div的内部
div.appendChild(p); */
//方式二
/* var p = document.createElement("p");
p.innerHTML= "段落方式二";
console.log(p);
//将元素追加到div的内部
div.appendChild(p); */
//方式三
var p = "段落方式三
";
//给div设置内容
div.innerHTML += p;
}
//添加图片,要设置属性
function addImg(){
//方式一
//创建一个图片
/* var img = document.createElement("img");
//设置图片属性
img.src = "img/11.png";
img.width = "100";
img.height = "100";
//将图片追加到指定位置
div.appendChild(img); */
//方式二
//创建一个图片
/* var img = document.createElement("img");
//设置图片属性
img.setAttribute("src","img/11.png");
img.setAttribute("width","100");
img.setAttribute("height","100");
//将图片追加到指定位置
div.appendChild(img);
*/
//方式三
var str = "
";
div.innerHTML += str;
}
//添加文本框,要设置属性
function addTxt(){
//方式一
var input = document.createElement("input");
input.type = 'text';
input.name = 'uname';
div.appendChild(input);
//方式二
// setAttribute设置属性
/* input.setAttribute("type",'text');
div.appendChild(input);
*/
}
//添加选项
function addOptions(){
//用户输入歌曲名称
var sname = prompt("请输入歌曲名称");
//获取下拉框的节点
var select = document.getElementsByName("music")[0];
//方式一
//创建下拉选项
/* var option = document.createElement("option");
//设置下拉选项的内容
option.innerHTML = sname;
//设置属性
option.value = 2;
//将下拉选项追加到下拉框中
select.appendChild(option); */
/* //方式二
var options = select.options; //下拉框的所有下拉选项
//创建下拉选项
var newOption = document.createElement("option");
newOption.innerHTML = sname;
//将选项添加到下拉框数组中
options.add(newOption); */
//方式三
/* var options = select.options; //下拉框的所有下拉选项
//创建下拉选项
var newOption = new Option();//生成了一个标签
console.log(newOption);
newOption.innerHTML = sname;
//将选项添加到下拉框数组中
options.add(newOption); */
}
//将任意的字符串插入到文档中
// document.write("到爱打架欧艾斯");
//insertBefore
//获取目标位置
var select = document.getElementsByName("music")[0];
//获取需要移动的元素节点
var zjl = document.getElementsByTagName("span")[0];
//参考父节点
var parent = select.parentElement;
//前面写需要插入的节点,后面写被插入节点
parent.insertBefore(zjl,select);
script>
body>
<body>
<div id="div1">
<span>span 1号span><span>span 2号span>
<div>块级元素div>
div><span>兄弟节点span>
<script type="text/javascript">
var div1 = document.getElementById("div1");
//childNodes
var childNodes = div1.childNodes;
console.log(childNodes);//NodeList(6) [text, span, span, text, div, text]
//firstChild
console.log(div1.firstChild);//#text
//lastChild
console.log(div1.lastChild);//#text
//nextSibling
console.log(div1.nextSibling);//span,span下来就是#text
//parentNode
console.log(div1.parentNode);//body
//previousSibling
console.log(div1.previousSibling);//#text
script>
body>
<body>
<div>div元素div>
<button type="button" onclick="fun()">删除divbutton>
<script type="text/javascript">
function fun(){
//获取目标节点
var div = document.getElementsByTagName("div")[0];
//删除
div.parentElement.removeChild(div);
}
script>
body>
表单是我们页面向后台传输数据的一种非常常见的方式,在进行数据发送(请求发出)之前,我
们应该现在页面进行一系列数据合法性的验证,节省不必要的错误数据的传输,以及提高用户的体验
度。
会第一个就行
<body>
<form id='myform' name="myform" action="" method="post">form>
<form id='myform2' name="myform2" action="" method="post">form>
<script type="text/javascript">
//document.表单名称
var myform = document.myform;
console.log(myform);
//document.getElementById(表单 id);
var myform2 = document.getElementById("myform2");
console.log(myform2);
//document.forms[表单名称],不写[]是全部表单
var myform3 = document.forms["myform"];
console.log(myform3);
//document.forms[索引]; //从 0 开始
console.log(document.forms[1]);
script>
body>
如 text password hidden textarea等,前两种常用。
<body>
<form id='myform' name="myform" action="" method="get">
姓名:<input type="text" id="uname" name="uname" value="zs" /><br />
密码:<input type="password" id="upwd" name="upwd" value="1234" /><br />
<input type="hidden" id="uno" name="uno" value="隐藏域" />
个人说明:<textarea name="intro">textarea>
<button type="button" onclick="getTxt();">获取元素内容button>
form>
<script type="text/javascript">
//获取元素内容
function getTxt(){
//通过 id 获取:document.getElementById(元素 id);
var name = document.getElementById("uname");
console.log(name);
//通过 form.名称形式获取: myform.元素名称; name属性值
var form = document.myform;
console.log(form.upwd);
console.log(form.upwd.value);//1234
//通过 name 获取 :document.getElementsByName(name属性值)[索引] // 从0开始
var uno = document.getElementsByName("uno")[0];
console.log(uno.value);//隐藏域
//通过 tagName 数组 :document.getElementsByTagName('input')[索引] // 从0开始
var inputs = document.getElementsByTagName("input");
console.log(inputs[1].value);//1234
}
script>
<body>
<form action="" name="myform">
<input type="text" name="inputName" value="aaa" />
<input type="radio" name="rad" value="1" /> 1
<input type="radio" name="rad" value="2" /> 2
<button type="button" onclick="getRadio();">获取元素内容button>
form>
<script type="text/javascript">
//获取单选按钮选中项
function getRadio(){
var radios = document.getElementsByName("rad");
//必选第一个
//radios[0].checked = 'checked'
for(var i = 0; i < radios.length; i++){
if(radios[i].checked){
console.log(radios[i].value);
}
}
}
script>
body>
操作方式与单选同理,不同之处在于可以多选
<body>
<form action="" name="myform">
<input type="text" name="inputName" value="aaa" />
<input type="checkbox" name="hobby" value="1" /> 1
<input type="checkbox" name="hobby" value="2" /> 2
<input type="checkbox" name="hobby" value="3" /> 2
<button type="button" onclick="getCheckbox();">获取多选选中项button>
form>
<script type="text/javascript">
//获取多选按钮选中项
function getCheckbox(){
var hobbys = document.getElementsByName("hobby");
var str = '';
for(var i = 0; i < hobbys.length; i++){
if(hobbys[i].checked){
str += hobbys[i].value + ',';
}
}
console.log(str.substring(0,str.length-1));
}
script>
body>
获取 select 对象
var ufrom = document.getElementById("ufrom");
获取选中项的索引:
var idx = ufrom.selectedIndex;
获取选中项的索引
var val = ufrom.options[idx].value;
注意:当通过options获取选中项的value属性值时,
若没有value属性,则取option标签的内容
若存在value属性,则取value属性的值
获取选中项
var txt = ufrom.options[idx].text;
选中状态设定:selected=‘selected’、selected=true、selected
未选中状态设定:不设selected属性
<body>
<form id='myform' name="myform" action="" method="">
来自:
<select id="ufrom" name="ufrom">
<option value="-1" >请选择option>
<option value="0" selected="selected">北京option>
<option value="1">上海option>
select><br />
<button type="button" id="sub" name="sub">提交button>
form>
<script type="text/javascript">
//获取下拉选项
document.getElementById("sub").onclick = function(){
//获取下拉框
var select = document.getElementById("ufrom");
//获取下拉框的选项数组
var options = select.options;
//获取选中项的索引
var index = select.selectedIndex;
//获取选中项
var selectedOp1 = options[index].text;//获取值
var selectedOp2 = select.value; //通过下拉框对象获取选中项的value
console.log(selectedOp1);//北京
console.log(selectedOp2);//0
}
script>
body>
<body>
<form id='myform1' name="myform2" action="http://baidu.com" method="get">
<input name="test" id="uname"/> <span id="msg">span><br />
<input type="button" onclick="sub();" value="提交表单1" />
form>
<form id='myform1' name="myform3" action="http://baidu.com" method="get">
<input name="test" id="uname2"/> <span id="msg2">span><br />
<input type="submit" onclick="return sub2()" value="提交表单2" />
form>
<form id='myform1' name="myform4" action="http://baidu.com" onsubmit="return sub4()" method="get">
<input name="test" id="uname4"/> <span id="msg4">span><br />
<input type="submit" value="提交表单3" />
form>
<script type="text/javascript">
//使用普通button按钮+onclick事件+事件中编写代码:
function sub(){
//获取表单对象
var myform2 = document.myform2;
//获取用户输入的数据
var uname = document.getElementById("uname").value;
if(uname == undefined || uname.trim() == ""){
//提醒用户理由
document.getElementById("msg").innerHTML = "用户名不能为空";
document.getElementById("msg").style.color = "red";
//不能提交,阻止代码运行
return;
}
//手动提交表单
myform2.submit();
}
//使用submit按钮 + οnclick="return 函数()" +函数编写代码:
function sub2(){
//获取表单对象
var myform3 = document.myform3;
//获取用户输入的数据
var uname = document.getElementById("uname2").value;
if(uname == undefined || uname.trim() == ""){
//提醒用户理由
document.getElementById("msg2").innerHTML = "用户名不能为空";
document.getElementById("msg2").style.color = "red";
//不能提交,阻止代码运行
return false;
}
return true;
}
//使用submit按钮 + οnclick="return 函数()" +函数编写代码:
function sub4(){
//获取表单对象
var myform4 = document.myform4;
//获取用户输入的数据
var uname = document.getElementById("uname4").value;
if(uname == undefined || uname.trim() == ""){
//提醒用户理由
document.getElementById("msg4").innerHTML = "用户名不能为空";
document.getElementById("msg4").style.color = "red";
//不能提交,阻止代码运行
return false;
}
return true;
}
script>
body>