Js学习笔记一(鼠标事件.....)

1.encodeURI与decodeURI()转化url为有效的url(能被识别)

Url="http://news.baidu.com/p.php?id='测试'&姓名=hkui"

document.write(encodeURI(url));

http://news.baidu.com/p.php?id='%E6%B5%8B%E8%AF%95'&%E5%A7%93%E5%90%8D=hkui

就是把汉字编码

document.write(decodeURI($url));

解码还原

2.encodeURIComponent()与decodeURIComponent()

将字符窜转化为有效的url组件

Url="http://news.baidu.com/p.php?id='测试'&姓名=hkui"

encodeURIComponent(url)

http%3A%2F%2Fnews.baidu.com%2Fp.php%3Fid%3D'%E6%B5%8B%E8%AF%95'%26%E5%A7%93%E5%90%8D%3Dhkui

同理decodeURIComponent()解码

encodeURI与encodeURIComponent()

://->%3A%2F%2F 可知 :->%3A /-> %2F

?->%3 =->%3D &->%26

2.js外部引入时延迟加载的两种方式

①<script src=’1.js’ type=’text/javascript’ defer >

</script>

利用defer属性，现在大多数浏览器也支持了

这时就是当html文当全部加载完再加载1.js

‚在引入文件中用window.onload=function(){}

包裹代码

实例代码：

1.Html

<html >

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script src="1.js" type="text/javascript"  ></script>

</head>

<body>

<div id='div'>div11111111111111</div>

</body>

</html>

在1.js里

如果直接

var div1=document.getElementById('div');

alert(div1.innerHTML);

就会由于按顺序执行，先执行1.js时找不到id=div1的这个元素报错

这时必须给1.html代码的script加上defer属性(浏览器支持)或者在1.js里改为

window.onload=function(){

var div1=document.getElementById('div');

alert(div1.innerHTML);

}

才行

4.把函数声明放在window.onload=function(){}内部时问题

代码示例：

<html >

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>2</title>

<script type="text/javascript" src="2.js"></script>

</head>

<body>

<input type="button" value='click Me' onClick="say()">

</body>

</html>

2.js代码

window.onload=function(){

function say(){

alert('hello');

}

}

则会出错说say未定义

为何？

为何say函数未被加载呢？

Onload()在文档或图像加载完全后再执行

Say时它内部申明的函数，它执行完毕后，在单独执行say，这时say已失效，与php不同

5.Js鼠标事件

对于mousedown和mouseup事件来说，在其event对象上存在一个button属性，表示释放或按下鼠标的某个按键(左中右等)

非ie中的button属性

0->左键

1->中键

2->右键

Ie中的button属性

0->没有按下

1->左键

2->右键

3->同时左右键

4->中键

5->左中

6->右中

7->左中右

但一般就只有左,中,右单独使用

解决兼容的代码

document.onmouseup=function(){

if(arguments[0]){alert( window.event.button);}

else{

switch(window.event.button) {

  case 1 :

  alert(0);break;

  case 4 :

  alert(1);break;

  case 2 :

 alert(2);break;

  }

}

}

或者传一个参数，用此参数代替arguments[0]

主要利用ie与非ie在处理时间对象的差异：

当触发某个事件时，会产生一个事件对象，这个对象包含着所有与事件有关的信息，包括导致事件的元素、事件的类型、以及其它与特定事件相关的信息。

事件对象，我们一般称作为 event 对象，这个对象是浏览器通过函数把这个对象作为参数传递过来的。

看以下代码：

document.onmouseup = function () {

 alert(arguments.length);

 alert(arguments[0]); 

 }

在非ie中

分别弹出1和object mouseEvent

而在ie中是0和undefined

利用此差异即可所以传递的参数evt代替arguments[0];

禁止鼠标右键

function right(){

if(event.button==2){

event.returnValue=false;

alert("禁止使用鼠标右键");

}

document.onmousedown=right;

所有JScript固有对象都有只读的prototype属性。可以像下面那样为原型添加功能，但该对象不能被赋予不同的原型。然而用户定义的对象可以被赋予新的原型

function arr_max(){

var i,max1=this[0];

for(i=1;i<this.length;i++){

if(max1<this[i]) max1=this[i];

}

return max1+1;

}

Array.prototype.max=arr_max;

var x=new Array(1,2,3,4,5,6,7);

alert(x.max());

</script>

Constructor属性是所有具有prototype的对象的成员

它们包括除Global和Math对象以外的所有JScript固有对象

x="hi";

//x=new String("Hi");

if(x.constructor==String){

alert('ok');

} //均是ok

function myF(){

this.name='ok';

this.age=12;

}

y=new myF;

alert(y.constructor==myF);

</script>

function test(){

alert("test");

}

var bt=document.getElementById('bt');

//bt.onclick=test;

bt.addEventListener('click',test,false);

Ie不支持这个方法

9.event对象的属性

document.onkeydown=function(){

if(window.event.ctrlKey&&window.event.shiftKey&&window.event.altKey){

alert("你同时按下了crtl,shif,alt");

}

</script>

Button属性，参见5，此属性仅仅适用于onmousedown/up/move

对于其他事件，无论状态如何均返回0

document.onmousedown=function(){

if(event.button==2){

alert("百度欢迎你！");

window.open("http://www.baidu.com/");

}

clientX

clientY

获取鼠标在浏览器窗口的x,y坐标（只读属性）

应用：图片随鼠标移动而移动

document.onmouseup = function () {

 alert(arguments.length);

 alert(arguments[0]); 

 }

Js里用marginLeft表示style里的”margin-left”

left表示left的值带px 比如10px

pixelLeft 表示不带px的left值比如10px 的10

srcElement

var t=document.getElementById('t');

document.onmousedown=function(evt){

alert(evt.srcElement.id);

}

通过事件的srcElement获取当前事件的对象

代码示例：

<style>

.move_out{position: relative;cursor: hand;font-family:"华文行楷";}

</style>

</head>

<body>

<script type="text/javascript">

var move_out=false;

var z,x,y;

function move(){

 if (event.button==move_out) {

  z.style.pixelLeft=temp1+event.clientX-x;

  z.style.pixelTop=temp2+event.clientY-y;

  return false;

 }

}

function down(){

if(event.srcElement.className=="move_out"){

   move_out=true;

   z=event.srcElement;

   temp1=z.style.pixelLeft;

   temp2=z.style.pixelTop;

   x=event.clientX;

   y=event.clientY;

   document.onmousemove=move;

 }else{move_out=false;}

}

document.onmousedown=down;

</script>

<font color=’0000ff’ size=10 class="move_out">php100中文网</font>

</body>

代码说明，只要执行down一次(上面部分)z,x,y等变量都是以全局变量存在了，在函数里声明变量得加var 否则就是全局的了

在onmousemove里button属性均为0，

而在mousedown/up

则根据鼠标按键了，按了一次状态不变知道下次改变为止

Js学习笔记一(鼠标事件.....)的更多相关文章

selenium学习笔记（鼠标事件）
昨天是简单的操作.之后是复杂的操作首先是鼠标事件 AcationChains类鼠标操作的常用方法: 右击 context_click() 双击 double_click() 拖动 dr ...
js学习笔记27----键盘事件
键盘事件主要有2个: onkeydown : 键盘按下时触发,如果按下不抬起,那么会连续触发. onkeyup : 键盘弹起时触发不是所有元素都能接收键盘事件,只有能够响应用户输入的元素,换 ...
js学习笔记24----焦点事件
事件: onfous : 元素获取焦点时触发事件 onblur : 元素失去焦点时触发事件方法: obj.focus(); 可指定元素设置焦点 obj.blur(); 取消指定元素的焦点 obj.s ...
[JS学习笔记]Javascript事件阶段：捕获、目标、冒泡
当你在浏览器上点击一个按钮时,点击的事件不仅仅发生在按钮上,同时点击的还有这个按钮的容器元素,甚至也点击了整个页面. 事件流事件流描述了从页面接收事件的顺序,但在浏览器发展到第四代时,浏览器开发团队 ...
Node.js学习笔记（2）：基本模块
Node.js学习笔记(2):基本模块模块引入模块为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码就相对较少,很多编程语言都采用这种组织代码的方式.在No ...
WebGL three.js学习笔记创建three.js代码的基本框架
WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...
JS学习笔记5_DOM
1.DOM节点的常用属性(所有节点都支持) nodeType:元素1,属性2,文本3 nodeName:元素标签名的大写形式 nodeValue:元素节点为null,文本节点为文本内容,属性节点为属性 ...
基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...
【转】Backbone.js学习笔记（二）细说MVC
文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Bac ...

随机推荐

立体匹配：关于Middlebury提供的源码的简化后的结构
Chrome内嵌 FlashPlayer（PPAPI）会被页面DHTML元素遮住的问题
flash的wmode为window,Chrome版本为29.0.1547.66 m,Flash PPAPI为11.8.800.97,Flash NPAPI为11,8,800,94. flash在正常 ...
50. Pow(x, n) （编程技巧）
Implement pow(x, n). double sum = 1; if (n > 0) { while ((n--) > 0) sum *= x; return sum; } el ...
Regional Changchun Online--Alisha’s Party
Alisha's Party Time Limit: 3000/2000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) ...
Android--输入自动提示AutoCompleteTextView
布局文件: <TextView android:id="@+id/title" android:layout_width="wrap_content" a ...
POJ3264RMQ
http://poj.org/problem?id=3264 #include<stdio.h> #include<string.h> #include<algorith ...
Web自动化框架LazyUI使用手册（2）--先跑起来再说（第一个测试用例-百度搜索）
作者:cryanimal QQ:164166060 上篇文章中,简要介绍了LazyUI框架,本文便来演示,如何从无到有快速搭建基于lazyUI的工程,并成功运行第一个测试用例. 本文以百度搜索为例,选 ...
X86 架构和 ARM 架构
1.关于x86架构 X86是一个intel通用计算机系列的标准编号缩写,也标识一套通用的计算机指令集合,X86是由Intel推出的一种复杂指令集,用于控制芯片的运行的程序,现在X86已经广泛运用到了家 ...
break 和 continue
break 和 continue 相同点: 都用在循环体内,如 switch.for.while.do while的程序块中,用于控制程序循环语句的执行不同点: break可以离开当前switch ...
js 数组对象，数组的使用
var a =new Array(1,2,3,4,'a','b','c',{x:1,y:2}); alert(a[7].x); //数组之中可以定义数组. var b=['a','b','c']; c ...

Js学习笔记一(鼠标事件.....)

Js学习笔记一(鼠标事件.....)的更多相关文章

随机推荐

热门专题