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 ...

随机推荐

centos 下安装.net core
先要安装libunwind, libunwind库为基于64位CPU和操作系统的程序提供了基本的堆栈辗转开解功能,32位操作系统不要安装.其中包括用于输出堆栈跟踪的API.用于以编程方式辗转开解堆栈的 ...
django提供xml下载
def test_file_download(request): wb = export_to_xls() response = HttpResponse() response['Content-Ty ...
uWSGI其三：uWSGI搭配Nginx使用
http://www.nowamagic.net/academy/detail/1330334 上一篇介绍了 uWSGI 来部署 Django 程序,但在在生产环境中单单只有 uWSGI 是不够的,N ...
esriSRGeoCS2Type Constants
ArcGIS Developer Help (Geometry) esriSRGeoCS2Type Constants More geographic coordinate systems. ...
云计算PAAS平台测试设计之镜像管理
下面是云计算PAAS平台页面概览: 今天我们要讲的是镜像管理页面的测试设计: 可以看到,这个页面主要有增删改查四个功能. 1. 查询镜像 (1)易用性:查看镜像查询界面,界面上各组件设计合理.美观.易 ...
Loadrunner性能指标分析
Transactions(用户事务分析)----用户事务分析是站在用户角度进行的基础性能分析. Transation Sunmmary(事务综述)----对事务进行综合分析是性能分析的第一步,通过分析 ...
xcode7.3 升级 xcode8.0 后权限设置问题（升级xcode 8.0 后构建版本不显示问题）
xcode7.3 升级 xcode8.0 后权限设置问题(升级xcode 8.0 后构建版本不显示问题) 前两天为了适配 iOS10 的系统我将xcode 7.3 升级到了 xcode 8.0 但是 ...
慕课网-安卓工程师初养成-2-10 Java中的强制类型转换
来源:http://www.imooc.com/code/1241 相信小伙伴们也发现了,尽管自动类型转换是很方便的,但并不能满足所有的编程需要. 例如,当程序中需要将 double 型变量的值赋给一 ...
VI小技巧
i.a 进入编辑模式 shift+a 到行尾insert o 在光标下一行编辑 shift+o 在光标上一行编辑 yy 复制 p ...
win7下eclipse中文字显示过小
用win7英文版系统,在eclipse里输入中文字的时候小的可怜,今天实在忍不下去了,随网上搜了搜找到了解决办法,记录下来备用. 操作步骤:打开Elcipse --点击菜单栏上的 “Windows”— ...

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

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

随机推荐

热门专题