<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义对象</title>
<!--
自定义对象是一种特殊数据类型，由属性和方法封装而成.
-->
<script type="text/javascript">
function method1() {
var person=new Object();
//添加属性
person.name=" 瑞兹 ";
person.spell=957;
//添加方法1.
person.say=new Function("alert(' person.name ')");
//添加方法2.
person.way=way;
function way(){
var num=0;
for(var i=0;i<100;i++){
num+=i;
}
alert(num);
}
}
/*
构造器 创建对象
*/
function person(name,age){
//定义属性
this.name=name;
this.age=age;
//定义成员方法：
this.sayName=function(){
alert(this.name);
}
}
function method2(){
var p=new person();
//通过构造器创建对象
}
/*
JSON 是一种轻量级的数据交换格式 ：
-使用 键值对 形式定义
-名称需要用双引号 “” 引起来
-多个对定义之间 使用 ,隔开
*/
function method3(){
var p={"name":"张韶涵","age":30,"say":function(){alert("看得最远的地方")}}；
}
</script>
</head>
<body>
<input type="button" onclick="method1();" value="创建通用对象模板!">
<input type="button" onclick="method2();" value="创建对象模板!">
<input type="button" onclick="method3();" value="创建JSON对象模板!">
</body>
</html>
2.取消事件：
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>取消事件写法</title>
<script type="text/javascript">
function judge(){
var result =confirm('确定要删除吗？');
return result;
}
</script>
<body>
<form>
<input type="text" value="我是要提交的数据">
<input type="submit" value="删除" onclick="judge();">
</form>
</body>
</head></html>
3.事件兼容性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>取消事件写法</title>
<script type="text/javascript">
function fun(e){
console.log(event.clientX+','+event.clientY);//获取点击时的位置，单位是像素，次写法可能出现不兼容问题 //不兼容的提示：reffereceError event is not defined // 兼容写法如下：
console.log(e.clientX+','+e.clientY);/* 获取事件源的写法（即事件的目标节点） IE:event.srcElement Fire Fox: event.target*/console.log(event.srcElement);
console.log(event.target);// 兼容写法： var evesrc=event.srcElement||event.target; console.log(evesrc.nodeName);
} </script> <body> <p onclick="console.log(event.clientX);"> HTML使用</p>
<p onclick="fun(event);"> JS使用</p>
</body> </head> </html>
5.取消冒泡
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件冒泡处理机制</title>
<style type="text/css">
div{
border:1px solid #ccc;
margin:10px;
padding:20px;
}
#d1{
width:300px;
height:300px;
background-color:red;
}
#d2{
width:200px;
height:200px;
background-color:blue;
}
#d3{
width:100px;
height:100px;
background-color:green;
}
</style>
<script type="text/javascript">
function f1(){
alert("D1");
}
function f2(){
alert("D2");
}
function f3(e){
alert("D3");
//取消冒泡 的写法
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble();
}
}
</script>
</head>
<body>
<div id="d1" onclick="f1()">D1
<div id="d2" onclick="f2();">D2
<div id="d3" onclick="f3(event);">D3</div>
</div>
</div>
</body>
</html>