自定义对象
自定义对象概述
-
是一种特殊的数据类型，由属性和方法封装而成
-
属性是指与对象有关的值：对象名.属性名
-
方法是指对象可以执行的行为或可以完成的功能：对象名.方法名()
创建对象
直接创建对象
-
使用构造器创建对象
-
使用JSON创建对象
JavaScript Object Notation是一种轻量级的数据交换格式
创建的方式
-
a)直接量（JSON），使用名/值对的方式定义
{“name”: “zs”, “age”:23 }{ }代表一个对象，内含多组键值对
key一般是字符串
value可以是任何类型变量
-
b) 构造器（new的函数/首字母大写）
-
内置构造器：
特殊：String(), Date(), RegExp(), Function()
通用：Object()
-
自定义构造器：
声明函数，首字母大写
声明参数，明确指示调用者传入参数
对象要记录这些参数
<script> //采用直接量的方式创建对象 function f1() { var student = { "name": "Zhangsan", "age": 23, "work": function() { alert("I am a java learner"); } }; alert(student.name); alert(student.age); student.work(); } //采用内置构造器创建对象 function f2() { var teacher = new Object(); teacher.name = "Mr. Li"; teacher.age = 18; teacher.work = function(){ alert("I am teaching java"); }; alert(teacher.name); alert(teacher.age); teacher.work(); } //采用自定义构造器创建对象——大写 function Coder(name, age, work) { this.name = name; this.age = age; this.job = work; } function f3() { var coder = new Coder( "List", 28, function() { alert("I am coding"); } ); alert(coder.name); alert(coder.age); coder.job(); } </script> <body> <input type="button" value="button1" onclick="f1()"> <input type="button" value="button2" onclick="f2()"> <input type="button" value="button3" onclick="f3()"> </body>
-
总结：
无论采用哪种方式创建出来的对象本质只是方式不同
如果对象需要给其他人使用，使用自定义方式。若只是自己使用，建议使用直接量或者内置构造器方法。
事件
事件概述：
事件概述、事件属性、事件定义
- event对象
event对象、获取event对象、使用event对象
事件处理机制
事件处理机制
-
事件概述：
用户的操作、动作，即JS调用的时机
-
事件属性：
通过一个事件属性，可以在某个事件发生时对某个元素进行某种操作
-
鼠标事件
onclick ondblclick onmouseover onmouseout
-
键盘事件
onkeydown onkeyup
-
状态事件:达到某条件自动触发
onload onchange onblur onsubmit
-
onchange()事件一般用于用户表单中，例如：当文本框内容发生改变时触发的事件，或者下拉列表框内容发生改变时触发的事件等。
-
onblur:当输入域失去焦点时————未选中
-
onfocus:当输入域获取焦点时————选中
<script> $(document).ready(function(){ $("input").focus(function(){ $("input").css("background-color","#FF0000"); }); $("input").blur(function(){ $("input").css("background-color","#0000FF"); }); }); </script> <body> Enter your name: <input type="text" /> <p>请在上面的输入域中点击，使其获得焦点，然后在输入域外面点击，使其失去焦点。</p> </body>
-
事件定义：
-
直接绑定
在元素上通过事件属性定义事件，如οnclick="f1();"
优点:直观
缺点:耦合度高
-
后绑定
在页面加载后获取节点，使用js给它追加一个事件
优点:耦合度低
缺点:不直观
event对象
任何事件触发后将会产生一个event对象
-
event对象记录事件发生时的鼠标位置、键盘按键状态和触发对象等信息
获得event对象
使用event对象获得相关信息，如单击位置、触发对象等
-
常用属性：
clientX/ clientY/ cancelBubble等
获取event对象：需要考虑浏览器兼容性
-
a) IE浏览器:JS或者HTML代码中直接使用event
<p onlick=”alert(event.client);”>p text</p> <div onclick=”f1();”>div text</div> function f1() { alert(event.clientX+”: ”+event.clientY); } -
b) Firefox浏览器
HTML代码中直接使用event HTML代码中直接使用event <p onclick=”alert(event.clientX);”>p text</p> JS代码中直接使用event关键字————不能直接使用 <div onclick=”f1();”>div text</div> function f1() { alert(event.clientX+”: ”+event.clientY); }ReferenceError: event is not defined
在HTML代码中，在事件句柄定义时，使用event关键字将事件对象作为参数传入
<div onclick=”f1(event);”>div text</div>
function f1(e) {
alert(e.clientX+”: ”+e.clientY);
}
<script>
//直接绑定事件
function f1(e) {
console.log(“direct”);
console.log(e);
}
//页面加载后
window.onload = function(){
//给button2绑定单击事件
var btn = document.getElementById(“btn2”);
btn.onclick = function(e) {
console.log(“indirect”);
console.log(e);
};
}
</script>
<body>
<input type=”button” value=”button1” onclick=”f1(event);”/>
<input type=”button” value=”button2” id=”btn2”/>
</body>
case:calculate
功能实现：按钮输入数字及表达式
<style>
.panel {
border: 4px solid #ddd; width: 192px; margin: 100px auto;
}
.panel p, .panel input {
font-family: “微软雅黑”; font-size: 20px; margin: 4px; float: left;
}
.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>
window.onload = function() {
//给div绑定单击事件
var div = document.getElementById(“calculate”);
div.onclick = function(e) {
//获取事件源
var obj = e.srcElement || e.target;
if( obj.nodeName == “INPUT” ) {
var p = document.getElementById(“screen”);
if( obj.value == “=” ) {
//计算
try {
p.innerHTML = eval(p.innerHTML);
} catch(e) {
p.innerHTML = “Error”;
}
} else if( obj.value == “C”) {
//清空
p.innerHTML = “”;
} else {
//累加
p.innerHTML += obj.value;
}
}
};
}
</script>
<body>
<div class=”panel” id=”calculate”>
<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>
取消事件:
return false;
事件对象：
什么是事件对象：
在某些特定情况下，需要获取事件发生时的鼠标坐标，键盘按键等信息
这些和时间相关的特殊信息被浏览器封装在一个对象里：event
这个由浏览器提供、和事件相关的对象，称为时间对象
##如何获得事件对象：
-
直接绑定事件时
调用函数时，直接传入event对象，函数增加参数获取该对象
-
后绑定事件时
调用函数时，浏览器会自动传入event，函数增加参数接收该对象
事件冒泡：
什么是事件冒泡：
事件触发的顺序是由内向外的
如何取消事件冒泡：
通过事件对象的API
事件冒泡的作用：
可以简化事件的定义
case:bubble event
<style>
div{ border/width/padding.. }
p { border/padding }
</style>
<script>
function f1(e) {
alert(“BUTTON”);
//取消冒泡
//e={“stopPropagation”:function() {} }
//e={“cancelBubble”:false }
if(e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
}
</script>
<body>
<div onclick=”alert(‘DIV’)”>
<p onclick=”alert(‘P’)”>
<input type=”button” value=”button1” onclick=”f1(event);”/>
</p>
</div>
</body>
事件源：
事件发生的具体位置/来源
通过事件对象获取
217
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
