m.lom599.com_手机版乐白家网址_乐百家手机首页登录

构造函数模式,详解javascript中的事件处理

作者: 手机版乐白家网址  发布:2019-07-15

一、日期减去天数等于第二个日期

一.事件传播机制

在上篇文章给大家介绍了javascript面向对象基础,本篇文章继续深入学习javascript面向对象,JS的语法非常灵活,简单的对象创建就有好几种不同的方法。这些过于灵活的地方有时候确实很让人迷惑,那么今天我们就来梳理一下JS中常用的创建对象的几种方法吧。

function cc(dd,dadd){
//可以加上错误处理
var a = new Date(dd)
a = a.valueOf()
a = a - dadd * 24 * 60 * 60 * 1000
a = new Date(a)
alert(a.getFullYear()   "年"   (a.getMonth()   1)   "月"   a.getDate()   "日")
}
cc("12/23/2002",2)

  客户端JavaScript程序(就是浏览器啦)采用了异步事件驱动编程模型。当文档、浏览器、元素或与之相关的对象发生某些有趣的事情时,Web浏览器就会产生事件(event)。如果JavaScript应用程序关注特定类型的事件,那么它可以注册当这类事件发生时要调用的一个或多个函数。当然了,这种风格并非Web编程独有,所有使用图形用户界面的应用程序都采用了它。

前言

这里不得不做补充,浪费好多时间得出教训:
Javascript 对时间的代号
0-11数字表示1-12月: var a= new Date(2006,5,6) 结果是2006-6-6
0-6表示星期
1-31表示日期
0-23小时
0-59分钟,秒

既然要详解事件处理,那我们先从几个基础概念说起吧:

虽然使用 Object构造函数 或者使用 对象字面量 可以很方便的用来创建一个对象,但这种方式有一个明显的缺点:使用一个接口创建多个对象会产生很多冗余的代码。因此为了解决这个问题,人们开始使用以下几种方式来常见对象。

二。//两个日期的差值(d1 - d2).

    ①事件类型(event type):是一个用来说明发生什么类型事件的字符串。例如,“mousemove”表示用户移动鼠标,“keydown”表示键盘上某个键被按下。事件类型只是一个字符串,有时候又称之为事件名字(event name);

工厂模式

function DateDiff(d1,d2){
  var day = 24 * 60 * 60 *1000;
try{  
    var dateArr = d1.split("-");
  var checkDate = new Date();
    checkDate.setFullYear(dateArr[0], dateArr[1]-1, dateArr[2]);
  var checkTime = checkDate.getTime();

  var dateArr2 = d2.split("-");
  var checkDate2 = new Date();
    checkDate2.setFullYear(dateArr2[0], dateArr2[1]-1, dateArr2[2]);
  var checkTime2 = checkDate2.getTime();

  var cha = (checkTime - checkTime2)/day; 
    return cha;
  }catch(e){
  return false;
}
}//end fun

    ②事件目标(event target):是发生事件或与之相关的对象。Window、Document和Element对象是最常见的事件目标。当然,AJAX中的XMLHttpRequest对象也是一个事件目标;

该模式抽象了创建对象的具体过程,用函数来以特定接口创建对象的细节

三、应用:

    ③事件处理程序(event handler):是处理或响应事件的函数,它也叫事件监听程序(event listener)。应用程序通过指明事件类型和事件目标,在Web浏览器中注册它们的事件处理函数。

 function cPerson(name,sex,age){
 var o = new Object();
 o.name = name;
 o.sex = sex;
 o.age = age;
 o.show = function(){
 console.log(this.name,this.age,this.sex);
 }
 return o;
}
 var p1 = cPerson('谦龙','男','100');
 p1.show();
 var p2 = cPerson('雏田','女','14');
 p2.show();
<script language="javascript" type="text/javascript">
var flag = Array();//全局变量

var start = "2009-01-01";
var end = "2009-02-24";
SetFlag(start,end); 

for(var i=0; i<flag.length; i  ){
  document.write(flag[i] "nr");
}

//设置周期内的日期(数组)
function SetFlag(start,end){
var cdate = Array();
cdate = start.split("-");
var cd = cdate[1] "/" cdate[2] "/" cdate[0]; 
var dayNum = DateDiff(end,start);
for(var i=0; i<=dayNum; i  ){
  flag.push(AddDays(cd,i));
}
}//end fun
//日期加上天数后的新日期.
function AddDays(date,days){
var nd = new Date(date);
  nd = nd.valueOf();
  nd = nd   days * 24 * 60 * 60 * 1000;
  nd = new Date(nd);
  //alert(nd.getFullYear()   "年"   (nd.getMonth()   1)   "月"   nd.getDate()   "日");
var y = nd.getFullYear();
var m = nd.getMonth() 1;
var d = nd.getDate();
if(m <= 9) m = "0" m;
if(d <= 9) d = "0" d; 
var cdate = y "-" m "-" d;
return cdate;
}
//两个日期的差值(d1 - d2).
function DateDiff(d1,d2){
  var day = 24 * 60 * 60 *1000;
try{  
    var dateArr = d1.split("-");
  var checkDate = new Date();
    checkDate.setFullYear(dateArr[0], dateArr[1]-1, dateArr[2]);
  var checkTime = checkDate.getTime();

  var dateArr2 = d2.split("-");
  var checkDate2 = new Date();
    checkDate2.setFullYear(dateArr2[0], dateArr2[1]-1, dateArr2[2]);
  var checkTime2 = checkDate2.getTime();

  var cha = (checkTime - checkTime2)/day; 
    return cha;
  }catch(e){
  return false;
}
}//end fun
</script>

    ④事件对象(event object):是与特定事件相关且包含有关该事件详细信息的对象。事件对象作为参数传递给事件处理函数(但是在IE8以及其之前版本中,全局变量event才是事件对象)。事件对象都有用来指定事件类型(event type)的type属性和指定事件目标(event target)的target属性(但是在IE8以及其之前版本中,用的是srcElement而非target)。当然,不同类型的事件还会为其相关事件对象定义一些其他的独有属性。例如,鼠标事件的相关对象会包含鼠标指针的坐标,而键盘事件的相关对象会包含按下的键和辅助键的详细信息。

工厂模式测试

您可能感兴趣的文章:

  • js实现文本框支持加减运算的方法
  • javascript实现日期按月份加减
  • js中日期的加减法
  • JS实现日期加减的方法
  • 浅谈javascript中的加减时间

  以上说完了四个基本概念。那么问题来了——如果在一个web页面上用鼠标点击一个元素a的某一子元素b时,应该先执行子元素b注册的事件处理程序还是先执行元素a注册的事件处理程序呢(假设元素a和它的子元素b都有注册事件处理程序)?身为读者的你是否想过这个问题呢?

工厂方式的问题:使用工厂模式能够创建一个包含所有信息的对象,可以无数次的调用的这个函数。虽然其解决了创建多个相似对象的问题,但却没有解决对象识别的问题(即如何得知一个对象的类型)

  这个问题就涉及到浏览器中的事件传播(event propagation)机制。相信大家都听说过事件冒泡(event bubble)和事件捕获(event capturing)吧!没错,它们就是浏览器中的事件传播机制。无图无真相,没有配图?那怎么阔以:

构造函数模式

图片 1

function CPerson(name,sex,age) {//注意这里 构造函数首字母大写
 this.name = name;
 this.sex = sex;
 this.age = age;
 this.show = function () {
 console.log(this.name, this.age, this.sex);
 }
}
var p1 = new CPerson('谦龙','男','100');
 p1.show();
var p2 = new CPerson('雏田','女','14');
 p2.show();

  看了图之后相信你已经大概理解了浏览器中的事件传播机制了:当一个事件发生时,它会先从浏览器顶级对象Window一路向下传递,一直传递到触发这个事件的那个元素,这也就是事件捕获过程。然而,一切并没有结束,事件又从这个元素一路向上传递到Window对象,这也就是事件冒泡过程(但是在IE8以及其之前版本中,事件模型并未定义捕获过程,只有冒泡过程)。

构造函数模式测试

  所以,关于上面的问题,还得看元素a注册的事件处理程序是在捕获过程还是在冒泡过程了。那么到底什么是在捕获过程注册事件处理程序,在冒泡过程注册事件处理程序又是怎么做的呢?这就得好好说说几种注册事件处理程序的方式了:

注意构造函数与工厂模式有些不同的地方,如下

1. 设置HTML标签属性为事件处理程序

构造函数首字母大写

  文档元素的事件处理程序属性,其名字由“on”后面跟着事件名组成,例如:onclick、onmouseover。当然了,这种形式只能为DOM元素注册事件处理程序。实例:

没有显式地创建对象

<!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>test</title>
 <style type="text/css">
 #div1{width: 300px; height: 300px; background: red; overflow:hidden;}
 #div2{margin:50px auto; width: 200px; height: 200px; background: green; overflow:hidden;}
 #div3{margin:50px auto; width: 100px; height: 100px; background: blue;}
 </style>
</head>
<body>
 <div id="div1" onClick="console.log('div1');">div1
 <div id="div2" oNClick="console.log('div2');">div2
 <div id="div3" onclick="console.log('div3');" onclick="console.log('div3333');">div3
 </div>
 </div>
 </div>
<script type="text/javascript">
</script>
</body>
</html>

将属性和方法赋值给了 this 对象

结果(鼠标点击div3区域后):

没有return语句

图片 2

而且以这种方式来调用构造函数会大致经历一下 几个步骤

从结果中可以看出:

创建一个新的对象

  ①因为HTML里面不区分大小写,所以这里事件处理程序属性名大写、小写、大小混写均可,属性值就是相应事件处理程序的JavaScript代码;

将构造函数的作用域赋值给这个对象(因此this就指向了这个对象)

  ②若给同一元素写多个onclick事件处理属性,浏览器只执行第一个onclick里面的代码,后面的会被忽略;

执行构造函数中的代码(即给新对象添加属性和方法的过程)

  ③这种形式是在事件冒泡过程中注册事件处理程序的;

返回对象

2.设置JavaScript对象属性为事件处理程序

注意:构造函数其实和普通的函数没有太大的差别,唯一的不同在于调用方式的不同。以下演示不同的几种调用方式

  可以通过设置某一事件目标的事件处理程序属性来为其注册相应的事件处理程序。事件处理程序属性名字由“on”后面跟着事件名组成,例如:onclick、onmouseover。实例:

 // 调用方式1 new 方式
 var p1 = new CPerson('谦龙','男','100');
 p1.show();//谦龙 100 男
 // 调用方式2 普通函数调用
 CPerson('谦龙','男','100');
 window.show()//谦龙 100 男 注意属性和方法会被设置到window对象上
 // 调用方式3 在另一个对象的作用域中调用
 var obj = new Object();
 CPerson.call(obj,'谦龙','男','100');
 obj.show(); //谦龙 100 男 在obj的作用域
<!DOCTYPE HTML>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>test</title>
 <style type="text/css">
 #div1{width: 300px; height: 300px; background: red; overflow:hidden;}
 #div2{margin:50px auto; width: 200px; height: 200px; background: green; overflow:hidden;}
 #div3{margin:50px auto; width: 100px; height: 100px; background: blue;}
 </style>
</head>
<body>
 <div id="div1">div1
 <div id="div2">div2
 <div id="div3">div3
 </div>
 </div>
 </div>
<script type="text/javascript">
 var div1 = document.getElementById('div1');
 var div2 = document.getElementById('div2');
 var div3 = document.getElementById('div3');
  div1.onclick = function(){
    console.log('div1');
  };
  div2.onclick = function(){
    console.log('div2');
  };
  div3.onclick = function(){
    console.log('div3');
  };
  div1.onclick = function(){
    console.log('div11111');
  };

  div1.onClick = function(){
    console.log('DIV11111');
  };

</script>
</body>
</html>

构造函数的问题:使用构造函数最主要的问题就是每个方法都要在每个实例上重新创建一次,p1与p2的都有show方法,但不是同一个Function的实例,因为function在js中也是一个对象。因此他们共有的show方法并不相等。

结果(鼠标点击div3区域后):

原型模式

图片 3

每个函数都有一个prototype属性,这个属性是一个指针,指向一个对象。而这个对象的用途是 包含可以由 特定类型 的所有 实例 共享的属性和方法。即调用构造函数所创建的那个对象的 原型对象

 从结果中可以看出:

好处是可以让所有对象的实例共享他的属性的方法。即无需在构造函数中定义实例的信息

  ①因为JavaScript是严格区分大小写的,所以,这种形式下属性名只能按规定小写;

 function CPerson(){
}
CPerson.prototype.name='谦龙';
CPerson.prototype.sex='男';
CPerson.prototype.age=100;
CPerson.prototype.show=function(){
 console.log(this.name, this.age, this.sex);
}
var p1 = new CPerson();
 p1.show(); //谦龙 100 男
var p2 = new CPerson();
 p2.show();//谦龙 100 男
 console.log(p1.show == p2.show)//true

  ②若给同一元素对象写多个onclick事件处理属性,后面写的会覆盖前面的(ps:这就是在修改一个对象属性的值,属性的值是唯一确定的);

以上内容是关于js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式),希望大家喜欢。

  ③这种形式也是在事件冒泡过程中注册事件处理程序的;

您可能感兴趣的文章:

  • JavaScript 三种创建对象的方法
  • JS 创建对象(常见的几种方法)
  • JavaScript 创建对象
  • js创建对象的几种常用方式小结(推荐)
  • js创建对象的方法汇总
  • javascript的函数、创建对象、封装、属性和方法、继承
  • JavaScript创建对象的写法
  • JavaScript中使用Object.create()创建对象介绍
  • JavaScript 创建对象和构造类实现代码
  • 跟我学习javascript创建对象(类)的8种方法
  • JavaScript创建对象方法实例小结

本文由m.lom599.com发布于手机版乐白家网址,转载请注明出处:构造函数模式,详解javascript中的事件处理

关键词: m.lom599.com

上一篇:私有方法,详解javascript数组去重问题
下一篇:没有了