addEventListener之handleEvent

addEventListener() 方法是将指定的事件监听器注册到目标对象上,当该对象触发指定的事件时,指定的回调函数就会被执行。

var obj = {
     name: ‘foo’,
     handleEvent: function() {
           alert(‘click name=’+ this.name);
    }
};
document.body.addEventListener(‘click’, obj, false);// 注意:该接口属于DOM2, 所以IE6~IE8不能直接使用哦~

这样,在 element 触发event事件后,调用的是handleEvent 方法,且其中的 this 是指实现EventListener接口的对象,这里指向obj对象。

new运算符,alert的那些知识


var a=new function(){return "funA"};alert(a);
//用new运算符表示调用的是一个构造函数 构造函数默认返回一个该构造函数的实例对象

var b = new function() {this.name = "test"; return {toString: function() {return "testB"}}}; alert(b) ;
//而alert在打印对象的时候会调用对象的toString方法

var c = new function() {this.name = "testC"; return 123}; console.log(c);
var d = new function() {this.name = "testD"; return new Number(123)}; console.log(d);
//c这个返回的是实例对象  d这个返回的是Number的实例对象
//return的是一个对象的时候是有效的 返回一些原始值之类的是无效的(除了数字,字符串,布尔值,null,undefined之外的其他值都可以返回;包括数字,字符串,布尔值的包装对象都可以)
//只要 new 表达式之后的 constructor 返回(return)一个引用对象(数组,对象,函数等),都将覆盖new创建的匿名对象,如果返回(return)一个原始类型(无 return 时其实为 return 原始类型 undefined),那么就返回 new 创建的匿名对象。

手机端事件touchstart,touchend,touchmove

touchstart:触摸开始的时候触发

touchmove:手指在屏幕上滑动的时候触发

touchend:触摸结束的时候触发

而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点(用来实现多点触控):

touches:当前位于屏幕上的所有手指的列表。

targetTouches:位于当前DOM元素上手指的列表。

changedTouches:涉及当前事件手指的列表。

每个触摸点由包含了如下触摸信息(常用):

identifier:一个数值,唯一标识触摸会话(touch session)中的当前手指。一般为从0开始的流水号(android4.1,uc)

target:DOM元素,是动作所针对的目标。

pageX/pageX/clientX/clientY/screenX/screenY:一个数值,动作在屏幕上发生的位置(page包含滚动距离,client不包含滚动距离,screen则以屏幕为基准)。

手机端事件touchstart,touchend,touchmove只支持addEventListener写法,不支持传统模式写法

var obj = document.getElementByIdx_x('id');
obj.addEventListener('touchmove', function(event) {
     // 如果这个元素的位置内只有一个手指的话
    if (event.targetTouches.length == 1) {
     event.preventDefault();// 阻止浏览器默认事件,重要 
        var touch = event.targetTouches[0];
        // 把元素放在手指所在的位置
        obj.style.left = touch.pageX-50 + 'px';
        obj.style.top = touch.pageY-50 + 'px';
        }
}, false);

以下是获取不同类型滑动的代码具体做法,结合前人的思想,封装好了,可以借鉴学习:

var touchFunc = function(obj,type,func) {
    //滑动范围在5x5内则做点击处理,s是开始,e是结束
    var init = {x:5,y:5,sx:0,sy:0,ex:0,ey:0};
    var sTime = 0, eTime = 0;
    type = type.toLowerCase();
  
    obj.addEventListener("touchstart",function(){
        sTime = new Date().getTime();
        init.sx = event.targetTouches[0].pageX;
        init.sy = event.targetTouches[0].pageY;
        init.ex = init.sx;
        init.ey = init.sy;
        if(type.indexOf("start") != -1) func();
    }, false);
  
    obj.addEventListener("touchmove",function() {
        event.preventDefault();//阻止触摸时浏览器的缩放、滚动条滚动
        init.ex = event.targetTouches[0].pageX;
        init.ey = event.targetTouches[0].pageY;
        if(type.indexOf("move")!=-1) func();
    }, false);
  
    obj.addEventListener("touchend",function() {
        var changeX = init.sx - init.ex;
        var changeY = init.sy - init.ey;
        if(Math.abs(changeX)>Math.abs(changeY)&&Math.abs(changeY)>init.y) {
            //左右事件
            if(changeX > 0) {
                if(type.indexOf("left")!=-1) func();
            }else{
                if(type.indexOf("right")!=-1) func();
            }
        }
        else if(Math.abs(changeY)>Math.abs(changeX)&&Math.abs(changeX)>init.x){
            //上下事件
            if(changeY > 0) {
                if(type.indexOf("top")!=-1) func();
            }else{
                if(type.indexOf("down")!=-1) func();
            }
        }
        else if(Math.abs(changeX)<init.x && Math.abs(changeY)<init.y){
            eTime = new Date().getTime();
            //点击事件,此处根据时间差细分下
            if((eTime - sTime) > 300) {
                if(type.indexOf("long")!=-1) func(); //长按
            }
            else {
                if(type.indexOf("click")!=-1) func(); //当点击处理
            }
        }
        if(type.indexOf("end")!=-1) func();
    }, false);
};

各种浏览器全屏模式的方法,video、img全屏等

浏览器全屏模式的启动函数 requestFullscreen仍然需要附带各浏览器的js方言前缀:

// 判断各种浏览器,找到正确的方法
function launchFullscreen(element) { 
   if(element.requestFullscreen){ 
       element.requestFullscreen(); 
   }else if(element.mozRequestFullScreen){ 
       element.mozRequestFullScreen(); 
   }else if(element.webkitRequestFullscreen){ 
       element.webkitRequestFullscreen(); 
   }else if(element.msRequestFullscreen){ 
       element.msRequestFullscreen(); 
   }
}

// 启动全屏!
launchFullScreen(document.documentElement); // 整个网页
launchFullScreen(document.getElementById("videoElement")); // 某个页面元素

对你想要全屏显示的页面元素调用全屏方法,浏览器窗口就会变成全屏,但会先请求用户允许全屏模式。要注意,用户很有可能会拒绝全屏模式。如果用户运行全屏模式,则浏览器的工具条等按钮菜单都会隐藏,你的页面会覆盖整个屏幕。

退出全屏模式

这个 exitFullscreen方法(也需要加浏览器前缀)会让浏览器退出全屏模式,变成正常模式。

// 判断浏览器种类
function exitFullscreen(){
     if(document.exitFullscreen){
        document.exitFullscreen();
     }else if(document.mozCancelFullScreen)
     {
       document.mozCancelFullScreen();
     }
     else if(document.webkitExitFullscreen)
     {
       document.webkitExitFullscreen();
     }
}

// 退出全屏模式!
exitFullscreen();

需要注意的是, exitFullscreen只能由document对象调用,而不是启动全屏时传入的对象。

全屏属性和事件

不幸的是,全屏属性和事件的相关方法也需要添加浏览器前缀,但我相信很快就不需要这样做了。

  • document.fullScreenElement: 全屏显示的网页元素。
  • document.fullScreenEnabled: 判断当前是否处于全屏状态。

fullscreenchange事件会在启动全屏或退出全屏时触发:

var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;

你仍然可以使用上面判断浏览器种类的方法给这个事件加上前缀。

全屏样式CSS

各种浏览器都提供了一个非常有用的全屏模式时的css样式规则:

:-webkit-full-screen {
  /* properties */
}

:-moz-full-screen {
  /* properties */
}

:-ms-fullscreen {
  /* properties */
}

:full-screen { /*pre-spec */
  /* properties */
}

:fullscreen { /* spec */
  /* properties */
}

/* deeper elements */
:-webkit-full-screen video {
  width: 100%;
  height: 100%;
}

/* styling the backdrop*/
::backdrop {
  /* properties */
}
::-ms-backdrop {
  /* properties */
}

有些情况下,WebKit样式会出现一些问题,你最好把这些样式保持简洁。

webstorm8.0配置less

1、安装NodeJs

安装完之后打开命令提示符(win+r),分别输入node -v以及npm -v如果返回版本号说明你安装成功了

2、安装less

在“命令提示符”下运行命令“npm install less -g”,然后npm就开始下载并安装LESS。
注:如上命令出现 npm ERO nwtwork那么可以通过此"npm --registry=https://registry.npm.taobao.org install less -g"安装;如果“lessc -v”没有版本信息请配置环境变量
npm 默认是从国外的源获取和下载包信息, 不慢才奇怪. 可以通过简单的 ---registry 参数, 使用国内的镜像 https://registry.npm.taobao.org
3、在WebStorm里面配置LESS编译

这个步骤稍微复杂一些,打开WebStorm,找到“File -> Settings”,在“IDE Settings”里面找到“External Tools”。

击“+”,如图填写“Name”和“Group”,在“Tool settings”里面有三个项目需要填写。“Program”选择“node.exe”的实际路径,“Working directory”就是nodejs的安装目录。

http://www.weste.net/uploadfile/2014/0928/20140928124936684.jpg

最重要的就是“Parameters”,格式为:

lessc安装的目录lessc $FilePath$

在初次打开less文件的时候,在编辑界面的右上方会出现一个“Add watcher”链接,这里就是为了为此项目的less文件配置watcher的地方,点击开可以对输出路径进行配置“Output paths to refresh”,其他配置无需变化。

http://www.weste.net/uploadfile/2014/0928/20140928125043789.jpg

如果想再次修改watcher,在“File -> Settings -> External Tools”里面可以再次修改。

console.time和console.timeEnd及console.log用法

console.time方法与console.timeEnd方法

当需要统计一段代码的执行时间时,可以使用console.time方法与console.timeEnd方法,其中console.time方法用于标 记开始时间,console.timeEnd方法用于标记结束时间,并且将结束时间与开始时间之间经过的毫秒数在控制台中输出。这两个方法的使用方法如下 所示。

console.time('small loop');
for (var i = 0; i < 100000; i++) {
 ;
}
console.timeEnd('small loop');

这两个方法均使用一个参数,参数值可以为任何字符串,但是这两个方法所使用的参数字符串必须相同,才能正确地统计出开始时间与结束时间之间所经过的毫秒数。

console.log如何在控制台写有颜色的文字?

console.log("这是一然博客。\n我叫一然。我在写博客。\n");
console.log("我的邮箱 %c zhudong208#qq.com(其中“#”表示“@”)","color:red;font-size:24px");
console.log("我的网址:http://dodozhu.com");

java环境配置及apache-maven配置

Java环境配置

第一步,下载JDK 1.7 安装包或其它安装包

第二步,成功安装之后,进行测试是否真的成功安装,点击【开始】—-【运行】—-输入 CMD,在命令提示符里面输入“Java -version”并按回车键,出现对应版本号,即为安装成功。

第三步,下面开始配置环境变量,右击【我的电脑】—【属性】—–【高级】—【环境变量】。

第四步,选择【新建系统变量】–弹出“新建系统变量”对话框,在“变量名”文本框输入“JAVA_HOME”,在“变量值”文本框输入JDK的安装路径(也就是步骤5的文件夹路径),单击“确定”按钮。

第五步:在“系统变量”选项区域中查看PATH变量,如果不存在,则新建变量 PATH,否则选中该变量,单击“编辑”按钮,在“变量值”文本框的起始位置添加“%JAVA_HOME%\bin;%JAVA_HOME%\jre \bin;”或者是直接“%JAVA_HOME%\bin;”,单击确定按钮。

第六步,现在测试环境变量的配置成功与否。在DOS命令行窗口输入“JAVAC”,输出帮助信息即为配置正确。

apache-maven环境配置

第一步,添加新的系统环境变量MAVEN_HOME, 并设置其值为你安装的目录MAVEN_HOME= D:\Softwares\apache-maven-3.2.2

第二步,更新系统PATH 变量, 添加;%MAVEN_HOME%\bin;到尾部

第三步,测试maven配置是否成功打开命令行窗口,输入mvn -v,如果有maven 版本信息输出则证明配置成功,否则请查看自己配置路径等是否正确。

注意:安装maven前请确保已安装JDK并成功配置其环境变量。

sql语句,基本的增删改查语句

insert into 表名(列名1,列名2,列名3......) values(值1,值2,值3......);
insert into depts(name,description) values('安全管理部','杭州电子科技大学负责学生安全');


update 表名 set 要修改的列名1=改后的新值,要修改的列名2=改后的新值,......  where 修改的条件
update depts set name='治安部',description='杭州电子科技大学负责校园治安'  where dept_id=11;

delete   from  表名 where 删除条件
delete   from  depts   where dept_id=11;


select 要显示的列名1,要显示的列名2,要显示的列名3,..... from 表名;
select name,dept_id from depts;