JavaScript：自定义对象
2018-12-31 本文已影响0人
Deque
二.自定义对象
1.如何创建自定义对象
1.1直接量
var student = {"name":"zs","age":23};- {} 代表一个对象，内含多组键值对
- key一般都是字符串，而value可以是任意类型的数据
采用直接量方式创建的对象也叫JSON对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义对象</title>
<script type="text/javascript">
//1.采用直接量的方式创建对象
function f1() {
var student =
{"name":"张三","age":23,"work":function(){alert("我学Java");}};
alert(student.name);
alert(student.age);
student.work();
}
</script>
</head>
<body>
<input type="button" value="按钮1" onclick="f1();"/>
</body>
</html>
1.2构造器
1）内置构造器(new的函数/首字母大写)
- 特殊：Array,Date,RegExp,Function
- 通用: Object
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义对象</title>
<script type="text/javascript">
//2.采用内置构造器创建对象
function f2() {
var teacher = new Object();
teacher.name = "王老师";
teacher.age = 18;
teacher.work = function(){
alert("我教Java");
}
alert(teacher.name);
alert(teacher.age);
teacher.work();
}
</script>
</head>
<body>
<input type="button" value="按钮2" onclick="f2();"/>
</body>
</html>
2）自定义构造器
- 声明一个函数，首字母要大写
- 声明参数，让调用者清楚要传什么参数
- 让对象记住这些参数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义对象</title>
<script type="text/javascript">
//3.采用自定义构造器创建对象
function Coder(name,age,work){ //定义一个程序员对象
this.name = name;
this.age = age;
//this指代当前对象，.job是给此对象增加job属性 =work是将参数work赋值给此属性
this.job = work;
}
function f3() {
var coder = new Coder("李四",25,function(){alert("我写Java");})
alert(coder.name);
alert(coder.age);
coder.job();
}
</script>
</head>
<body>
<input type="button" value="按钮3" onclick="f3();"/>
</body>
</html>
2.总结
- 无论用哪种方式创建出来的对象都一样，都是Object
- 若创建的对象给别人用，建议使用第3种（自定义构造器创建对象）方式
- 若创建的对象给自己用，用第1（采用直接量）、2（采用内置构造器）都行
- 若没有函数用第1种，否则建议用第2种
三.事件
1.事件的概述
1）什么是事件
- 就是用户的动作，就是js调用的时机
2）事件的分类
- 鼠标事件
- 键盘事件
- 状态事件：达到某个条件（状态）自动触发
2.事件的定义
1）直接定义事件
- 在元素上通过事件属性（如：onclick）定义事件
- 优点：很直观
- 缺点：HTML和JavaScript耦合度高
2）后绑定事件（*）
- 在页面加载后，使用js获取元素，并给他绑定事件
- 优点：HTML和js耦合度低
- 缺点：不直观
3)取消事件
- 在事件内return false
演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//1.直接定义事件
function f1() {
console.log("直接定义事件");
}
//2.后绑定事件
window.onload = function() {
var btn = document.getElementById("btn2");
btn.onclick = function() {
console.log("后绑定事件");
}
}
</script>
</head>
<body>
<input type="button" value="按钮1" onclick="f1();">
<input id="btn2" type="button" value="按钮2">
</body>
</html>
3.事件对象
1）什么是事件对象
- 当事件被触发时，有一些信息被确定下来
- 如：点击的是左键还是右键、点击的位置（坐标），按键
- 开发项目时，可能需要使用这些信息（较少）
- 浏览器为了方便开发者，将这些信息封装到一个对象里
- 这个对象叫event事件对象
2）如何获取事件对象
直接定义事件
- 在调用函数时直接传入event
- 在写这个函数时加参数来接收它
后绑定事件
- 触发事件时，浏览器会自动给函数传入event
- 在写这个函数时加参数来接收它
事件对象演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//1.直接定义事件
function f1(e) {
console.log("直接定义事件");
console.log(e);
}
//2.后绑定事件
window.onload = function() {
var btn = document.getElementById("btn2");
btn.onclick = function(e) {
console.log("后绑定事件");
console.log(e);
}
}
</script>
</head>
<body>
<input type="button" value="按钮1" onclick="f1(event);">
<input id="btn2" type="button" value="按钮2">
</body>
</html>
4.事件处理机制
1)冒泡机制
- 事件由内向外传播
- 这种规律称之为冒泡机制
冒泡机制的作用
- 可以简化事件的定义
- 可以在父元素上定义一个事件，接收众多子元素的事件
需要知道事件源
3）事件源
- 事件发生的具体位置
- 事件发生的源头
- 通过事件对象可以获取事件源
计算器案例计算器案例效果.png
- 源码如下:
<!DOCTYPE html>
<html>
<head>
<title>计算器</title>
<meta charset="utf-8" />
<style type="text/css">
.panel {
border: 4px solid #ddd;
width: 192px;
margin: 100px auto;
/*border-radius: 6px;*/
}
.panel p, .panel input {
font-family: "微软雅黑";
font-size: 20px;
margin: 4px;
float: left;
/*border-radius: 4px;*/
}
.panel p {
width: 122px;
height: 26px;
border: 1px solid #ddd;
padding: 6px;
overflow: hidden;
}
.panel input {
width: 40px;
height: 40px;
border:1px solid #ddd;
}
</style>
<script type="text/javascript">
window.onload = function() {
var div = document.getElementById("jsq");
div.onclick = function(e) {
//获取事件源(input/p/div)
var obj = e.srcElement||e.target;
//只处理input
if(obj.nodeName=="INPUT"){
var p = document.getElementById("screen");
if(obj.value=="C"){
//清空p
p.innerHTML="";
}else if(obj.value=="="){
//计算
try{
var v = eval("("+p.innerHTML+")");
p.innerHTML = v;
}catch(ex){
p.innerHTML = "Error";
}
}else{
//累加
p.innerHTML += obj.value;
}
}
}
}
</script>
</head>
<body>
<div id="jsq" class="panel">
<div>
<p id="screen"></p>
<input type="button" value="C">
<div style="clear:both"></div>
</div>
<div>
<input type="button" value="7">
<input type="button" value="8">
<input type="button" value="9">
<input type="button" value="/">
<input type="button" value="4">
<input type="button" value="5">
<input type="button" value="6">
<input type="button" value="*">
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="-">
<input type="button" value="0">
<input type="button" value=".">
<input type="button" value="=">
<input type="button" value="+">
<div style="clear:both"></div>
</div>
</div>
</body>
</html>
