系统学习Javaweb8----JavaScript4（结束）
学习内容：
1.DOM对象
1.2DOM对象--元素对象常见属性
2.JS事件
2.1JS事件--入门案例
2.2JS事件--驱动机制
2.3常见JS事件--点击事件
2.4常见JS事件--点击事件
2.5常见JS事件--焦点事件
2.6常见JS事件--域内容改变事件
2.7常见JS事件--加载完毕事件
2.8常见JS事件--表单提交事件
2.9常见JS事件--键位弹起事件
2.9.*常见JS事件--常用鼠标事件
2.9.-JS事件绑定方式-元素事件句柄绑定.
2.9.+JS事件绑定方式-DOM绑定方式
学习内容：
4.3元素对象常见属性（HTML元素）
4.3.1、value
元素对象.value 获取元素对象的value属性值。
元素对象.value=属性值 设置元素对象的value属性值。
4.3.2、className
元素对象.className 获取元素对象的class属性值。
元素对象.className=属性值 设置元素对象的class属性值。
示例：
<html>
<head>
<meta charset="UTF-8">
<title>demo1</title>
<style>
.ys1{
color:red;
}
.ys2{
color:blue;
}
</style>
</head>
<body>
<input type="text" id="t1" value="你好"/>
<span id="s1" class="ys1">今天天气好晴朗</span>
<script type="text/javascript">
var t1=document.getElementById("t1");
alert(t1.value);
t1.value="你好嘛";
var s1=document.getElementById("s1");
alert(t1.className);
s1.className="ys2";
</script>
</body>
</html>
运行结果：
4.3.3、checked
元素对象.checked 获取元素的checked属性值
元素对象.checked=属性值 设置元素对象的checked属性
注：HTML中checked=“checked”，JavaScript中返回true
4.3.4、innerHTML
元素对象.innerHTML 获取元素对象的内容体
元素对象.innerHTML=值 设置元素对象的内容体
作用：操作元素的内容体。
5.JS事件
5.1、JS事件是什么？ 有什么作用?
通常鼠标或者热键的动作我们称之为事件（Event）
（点击、表单提交、值发生变化、鼠标移入、鼠标移出。）
通过JS事件，我们可以完成页面的指定特效。
5.2、JS驱动事件机制简述
页面上的特效，我们可以理解在JS事件驱动机制下进行。
JS驱动机制： 例如：警察抓小偷
事件源 小偷
事件 小偷偷东西
监听器 警察
注册/绑定监听器 让警察时刻盯着小偷
事件源：专门产生事件的组件
事件：由事件源所产生的动作或者事情
监听器：专门处理 事件源 所产生的时间
注册/绑定监听器：让监听器时刻监听事件源是否有指定事件产生，如果事件源产生指定事件，则掉用监听器处理。
5.3、常见JS事件。
5.3.1、点击事件 onclick
点击事件：由鼠标或热键点击元素组件时触发。
例如：
<html>
<head>
<meta charset="UTF-8">
<title>demo1</title>
<script type="text/javascript">
function run1(){
alert("提交成功！");
}
</script>
</head>
<body>
<input type="button" value="点我啊" onclick="run1()"/>
</body>
</html>
5.3.2、焦点事件 onbulr onfoucs
焦点：整个页面的注意力。
默认一个正常页面最多仅有一个焦点。
例如：文本框中闪烁的小竖线。
通常焦点也能反映出用户目前的关注点，或者正在操作的组件。
5.3.2.1、获取焦点事件
获取焦点事件：当元素组件获取焦点时触发。
示例：
<html>
<head>
<meta charset="UTF-8">
<title>demo1</title>
<script type="text/javascript">
function run1(){
alert("获取焦点成功");
}
</script>
</head>
<body>
<input type="text" value="点击获取焦点" onfocus="run1()" />
</body>
</html>
5.3.2.2、失去焦点事件 onblur
失去焦点事件：元素组件失去焦点时触发。
示例：
<html>
<head>
<meta charset="UTF-8">
<title>demo1</title>
<script type="text/javascript">
function run1(){
alert("失去焦点了");
}
</script>
</head>
<body>
<input type="text" value="点击其他地方失去焦点" onblur="run1()" />
</body>
</html>
5.3.3、域内容改变事件 onchange
域内容改变事件：元素组件的值发生改变时。
示例：
<html>
<head>
<meta charset="UTF-8">
<title>demo1</title>
<script type="text/javascript">
function run1(){
alert("对话框");
}
</script>
</head>
<body>
<select onchange="run1()">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="tj">天津</option>
</select>
</body>
</html>
5.3.4、加载完毕事件 onload
加载完毕事件：元素组件加载完毕时触发。
获取元素对象，保证元素对象先加载，建议把获取元素对象代码放在最后，有了这个之后就不用了
示例：
<html>
<head>
<meta charset="UTF-8">
<title>demo1</title>
<script type="text/javascript">
function run1(){
alert("加载完毕");
}
</script>
</head>
<body onload="run1">
你好
</body>
</html>
5.3.5、表单提交事件 onsubmit
表单提交事件：表单的提交按钮被点击时触发
注意：该事件需要返回boolean类型的值来执行 提交/阻止 表单数据的操作。
事件得到true，提交表单数据。
事件得到false，阻止表单数据提交。
<form onsubmit=”return hanshu()”></form>
示例：<html>
<head>
<meta charset="UTF-8">
<title>demo1</title>
<script type="text/javascript">
function run1(){
alert("表单提交成功");
return true;
}
</script>
</head>
<body >
<form onsubmit="return run1()">
<input type="text" name="uname"/><br/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
5.3.6、键位弹起事件 onkeyup
键位弹起事件：当组件中输入某些内容时，键盘键位弹起时触发该事件。
5.3.7、常见鼠标事件
5.3.7.1鼠标移入事件 onmouseover
鼠标移入事件：鼠标移入某个元素组件时触发
5.3.7.2鼠标移出事件 onmouseout
鼠标移出事件：鼠标移出某个组件时触发。
5.4、JS事件的两种绑定方式。
5.4.1、元素事件句柄绑定
将事件以元素属性的方式写到标签内部，进而绑定对应函数。
示例1：为事件绑定一个无参函数。
看以前的例子。
示例2：为事件绑定一个有参函数，参数是一个字符串。
<input type="text" onclick="run1('你好啊')"/><br/>
注意：双引号里面得是单引号
示例3：为事件绑定一个有参函数，函数是一个元素对象。
<input type="text" value="111111" onclick="run2(this)"/><br>
注意：用this指代这个元素即可。
示例2、3：
<html>
<head>
<meta charset="UTF-8">
<title>demo1</title>
<script type="text/javascript">
function run1(str){
alert(str);
}
function run2(obj)
{
alert(obj.value);
}
</script>
</head>
<body >
<input type="text" onclick="run1('你好啊')"/><br/>
<input type="text" value="111111" onclick="run2(this)"/><br>
</body>
</html>
示例四：绑定多个函数，且按顺序执行。
<input type="text" value="德玛西亚" onclick="run1('你好啊'),run2(this)"/><br/>
只需要依次用逗号隔开就行，写的顺序就是执行顺序。
示例：
<html>
<head>
<meta charset="UTF-8">
<title>demo1</title>
<script type="text/javascript">
function run1(str){
alert(str);
}
function run2(obj)
{
alert(obj.value);
}
</script>
</head>
<body >
<input type="text" value="德玛西亚" onclick="run1('你好啊'),run2(this)"/><br/>
</body>
</html>
事件句柄绑定方式
优点：开发便捷
传参方便
可以绑定多个函数
缺点：JS和HTML代码高度糅合在一起，不利于多部门开发维护。
5.4.2、DOM绑定方式
使用DOM事件的属性方式绑定事件。
两种写法：
1. 对象.事件属性 一次只能绑定一个函数，不能传递参数。
例如：window.onload=run1（）
2. 匿名函数方式 可以绑定多个函数，可以传递参数。
例如：window.onload=function(){
run1();
run2();
}
示例：
<html>
<head>
<meta charset="UTF-8">
<title>demo1</title>
<script type="text/javascript">
function run1()
{
alert("加载完毕");
}
window.onload=run1();
window.onload=function(){
run1();
}
</script>
</head>
<body>
你好
</body>
</html>
