javascript的作用是动态修改html和css代码,发生某种事件后(比如点击网页上某个按钮或者下拉框),可以触发执行一段javascript代码,事件可以用于处理表单验证，用户输入，用户行为及浏览器动作
事件:点击网页的按钮叫做事件
事件源:被点击的按钮
响应行为:几点按钮后触发执行javascript代码段,叫做响应行为
常用事件:
onclick 点击html元素触发的事件
onchange HTML 元素被改变的事件
onfoucus 获得焦点事件,即鼠标点击html元素的事件
onblur失去焦点的事件,即鼠标从html元素松开
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout 鼠标从一个HTML元素上移开的事件
onkeydown 用户按下键盘按键
onload 浏览器已完成页面加载后执行的事件
事件绑定的方式
即在html中和事件相关联的方式
方式1
事件和响应行为都嵌入到html标签中
方式2
事件嵌入到html标签中,响应行为在js代码中编写,事件指向响应行为
方式3
事件和响应行为与html分离开,在js代码中编写事件的响应行为,html元素和事件的关联由系统控制
说明:每个html元素都有id属性,通过document文档对象的getElementById(id名称)的方法可以获取该id的标签对象
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
</head>
<body>
<!-- 方式1 事件和行为都嵌入到元素标签中 -->
<a href="http://www.baidu.com" onclick="alert('弹出通知框后再访问百度')"> 百度</a>
<!-- 方式2 事件在html元素中,行为在js代码块中 -->
<a href="http://www.163.com" onclick="invoke1()">网易</a>
<!-- 方式3 事件和行为都在js中定义 -->
<a href="http://www.qq.com" id="qq"> 腾讯</a>
</body>
<script type="text/javascript">
function invoke1(){
alert("弹出通知框后,再访问网易网")
}
var tenlink=document.getElementById(qq);
tenlink.onclick=function(){
alert("弹出通知框后,再访问腾讯网");
}
</script>
</html>this关键字
javascript中this只带当前对象,在元素标签中使用函数时,this可以作为参数传递html中的标签对象
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<a href="#" id="html" onclick="method1(this)">空网页链接</a>
<input type="button" id="btn" value="点我试试" onclick="method1(this)">
</body>
<script type="text/javascript">
function method1(x){
alert(x.value);
alert(x.id);
}
</script>
</html>示例中,在input标签中使用函数,this作为参数,将整个input标签传递到javascript中,在javascript中相关的代码就可以使用input标签的属性了
事件部分
1 onclick事件
当用户点击鼠标时触发的事件,上面的示例中已经说明了onclick的用法
说明: onclick 属性不适用以下元素：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>
2 onchange事件
html元素被改变的事件,下面示例模拟省市的选择框联动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>onchange</title>
</head>
<body>
<select id="province">
<option value="heb">河北 </option>
<option value="bj">北京 </option>
<option value="hen">河南 </option>
<option value="sd">山东 </option>
</select>
<select id="city">
<option >廊坊</option>
<option >保定</option>
<option >邯郸</option>
<option >邢台</option>
</select>
</body>
<script type="text/javascript">
var selectprov=document.getElementById("province");
selectprov.onchange=function(){
var city=document.getElementById("city");
var provValue=selectprov.value;
switch(provValue){
case "bj": city.innerHTML="<option >朝阳</option><option >海淀</option><option >丰台</option><option >东城</option>";break;
case "heb": city.innerHTML="<option >廊坊</option><option >保定</option><option >邯郸</option><option >邢台</option>";break;
case "hen": city.innerHTML="<option >郑州</option><option >洛阳</option><option >平顶山</option><option >开封</option>";break;
case "sd": city.innerHTML="<option >济南</option><option >青岛</option><option >聊城</option><option >齐鲁</option>";break;
default: alert("error");
};
}
</script>
</html>说明,用到innerHTML,下面介绍innerHTML的用法,和innerText
innerHTML可获取或设置指定元素标签内的 html内容，从该元素标签的起始位置到终止位置的全部内容(包含html标签)。
获取元素的内容：element.innerHTML;
给元素设置内容：element.innerHTML =htmlString;
innerText:从起始位置到终止位置的内容, 但它去除了Html标签,且只适用于IE浏览器,使用replace(/<.+?>/gim,'')来去除innerHTML获取到的内容中的标签
2 onfcous和onblur
onfocus 属性在元素获得焦点时触发,获得焦点事件。onfocus 常用于 <input>,<select> , <a>标签中,onblur 属性在元素失去焦点时触发,失去焦点属性,常用于表单验证代码（例如用户离开表单字段）
示例:input获得焦点和失去焦点分别给用户一个提示信息,并改变背景色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>onfocus和onblur</title>
</head>
<body>
<div >
<span >请输入用户名</span>
<span >
<input type="text" id="username" >
</span>
<span id="usertext"></span>
</div>
</body>
<script type="text/javascript">
var username=document.getElementById("username");
username.onfocus=function(){
usertext=document.getElementById("usertext");
usertext.innerHTML="请输入6-20位的字符";
usertext.style.color="green";
};
username.onblur=function(){
usertext=document.getElementById("usertext");
usertext.innerHTML="您输入的格式有误";
usertext.style.color="red";
};
</script>
</html>说明:onfocus 不适用于以下标签：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>。onblur当用户离开输入字段时对其进行验证
3 onmouseover和onmouseout
顾名思义onmouseover 用户在一个HTML元素上移动鼠标触发的事件,鼠标悬浮事件 onmouseout 鼠标从一个HTML元素上移开的事件,鼠标移开事件
onmouseover 属性可使用于所有 HTML 元素，除了: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>.
示例:实现一个p元素被鼠标悬浮时变为黑色 鼠标移走时变成灰色
<!DOCTYPE html>
<html>
<head>
<style type="text/css" >
#div1{
width:120px;
height:120px;
background-color:green;
margin: 10px;
padding:10px;
border-style: solid;
}
#p1{
width:100px;
height:100px;
background-color:red;
font-siez:18px;
}
</style>
<meta charset="UTF-8">
<title>onmouseover And onmouseout</title>
</head>
<body>
<div id="div1">
<p id="p1">
鹅鹅鹅<br>
曲项向天歌<br>
白毛浮绿水<br>
红掌拨青波<br>
</p>
</div>
</body>
<script type="text/javascript">
p1=document.getElementById("p1");
p1.onmouseover=function(){
//p1.style.backgroundColor="black";
this.style.backgroundColor="black";//可以用this都可以指代当前对象
}
p1.onmouseout=function(){
//p1.style.backgroundColor="grey";
this.style.backgroundColor="grey";//可以用this都可以指代当前对象
}
</script>
</html>说明,
1 html的每个元素(即标签)都有style属性 ,用来设置css内容,在js中可以通过对象.属性.属性的方式调用,可以获取该属性,也可以该该属性赋值,向上面说的innerHTML属性
2this关键字指代当前对象,可以在对象的属性(匿名函数中用this指代对象),当然使用对象名也是可以的
4 onload
当页面加载完毕后，执行的事件
onload,document都是window对象的属性,但是可以省略window这个名字,onload是属于高级别的,所以onload代码段放在html前面后面都一样
示例:实现加载完段落后设置段落的颜色,并将段落中的内容变成helloworld
<!DOCTYPE html>
<html>
<head>
<style type="text/css" >
#div1{
width:120px;
height:120px;
margin: 10px;
padding:10px;
border-style: solid;
}
#p1{
width:100px;
height:100px;
font-siez:18px;
}
</style>
<script type="text/javascript">
window.onload=function(){
p1=document.getElementById("p1");
p1.style.backgroundColor="red";
div1=document.getElementById("div1");
div1.style.backgroundColor="green";
p1.innerHTML="helloworld";
}
</script>
<meta charset="UTF-8">
<title>onload</title>
</head>
<body>
<div id="div1">
<p id="p1">
鹅鹅鹅<br>
曲项向天歌<br>
白毛浮绿水<br>
红掌拨青波<br>
</p>
</div>
</body>
</html>注:该示例的加载速度太快,可能难以看到效果
5 阻止事件的默认行为
html的<a></a>标签中有默认的onclick行为，这种行为叫做事件默认行为，可以通过js代码来阻止事件的默认行为
因为早期的IE不兼容W3C协议,使用自己特有的方式,所以编写代码时要注意区分浏览器种类
IE中阻止默认行为的语句:IE:window.event.returnValue = false;
W3C协议的语句:传递过来的对象.preventDefault();示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function func(e){
if(e&&e.preventDefault){
alert("这是使用w3c标准的浏览器");
e.preventDefault();
}else{
alert("这是IE");
window.event.returnValue=false;
}
}
</script>
<title>阻止事件默认行为</title>
</head>
<body>
<a href="18事件绑定.html" >点我</a>
<a href="http://www.baidu.com" onclick="func(event)">点我试试</a>
</body>
</html>说明:在标签中调用js方法阻止默认行为时,函数中传入的对象是event(事件),而不是this(标签对象), js代码的判断条件中,
对象.preventDefault没有括号
6 阻止事件的传播
比如盒子模型,大盒子里包有小盒子,小盒子覆盖了大盒子的一部分,当点击小盒子时,也会触发大盒子的onclick事件,如果不希望这种事件行为产生,需要用js代码来阻止
同样对于早期的IE浏览器使用阻止语句:window.event.cancelBubble = false;
对于支持W3C的浏览器:传递过来的对象.stopPropagation();示例:以<div></div>行标签里面有一个<p></p>标签为例,onclick事件设置为弹出通知元素的id值
<!DOCTYPE html>
<html>
<head>
<style type="text/css" >
#div1{
width:120px;
height:120px;
background-color:green;
margin: 10px;
padding:10px;
border-style: solid;
}
#p1{
width:100px;
height:100px;
background-color:red;
font-siez:18px;
}
</style>
<meta charset="UTF-8">
<title>阻止事件的传播</title>
</head>
<body>
<div id="div1" onclick="func1()" >
<p id="p1" onclick="func2(event)">
鹅鹅鹅<br>
曲项向天歌<br>
白毛浮绿水<br>
红掌拨青波<br>
</p>
</div>
</body>
<script type="text/javascript">
function func1(){
alert("我属于div1");
}
function func2(e){
alert("我属于p1");
if(e&&e.stopPropagation){
alert("这是w3c浏览器");//测试用
e.stopPropagation();
}else{
alert("这是IE浏览器");//测试用
window.event.calcelBubble=false;
}
}
</script>
</html>注意:html元素标签中使用js函数,函数中传入的对象是event(事件),在js的判断条件中, 对象.stopPropagation没有括号
参考:小猴子视频
扫一扫
3228
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
