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

随机推荐

C Primer Plus(第五版)10
第 10 章数组和指针在本章中你将学习下列内容: · 关键字: static (静态) · 运算符: & * (一元) · 创建与初始化数组的方法. · 指针(基于已学的基础知识)及指针和 ...
[POJ 2586] Y2K Accounting Bug （贪心）
题目链接:http://poj.org/problem?id=2586 题目大意:(真难读懂啊)给你两个数,s,d,意思是MS公司每个月可能赚钱,也可能赔钱,如果赚钱的话,就是赚s元,如果赔钱的话,就 ...
Mongdb操作嵌套文档
1.一个文档如下 db.posts.find() { "_id" : ObjectId("5388162dfc164ee1f39be37f"), "t ...
如何隐藏storyboard中的top bar
在navigation bar中是没有设置它的隐藏和显示的属性的那么究竟在什么地方呢,当在它自身的属性中没有找到的情况下,那么就只能去包含它的容器中去寻找了,结果果然找到了.在view的第四个选择器 ...
《Code Complete》ch.25 代码调整策略
WHAT? 本章讨论程序性能调整问题.但是对用户来说,程序员按时交付软件,提供一个清爽的用户界面,避免系统经常死机常常比程序性能更加重要 WHY? 在程序设计这种文化中,编写出能够节省几微秒的代码可以 ...
翻译：Knockout 快速上手 - 3: knockoutJS 快速上手
许多时候,学会一种技术的有效方式就是使用它解决实际中的问题.在这一节,我们将学习使用 Knockout 来创建一个常见的应用,库存管理应用. 应用概览在创建我们的应用之前,我们需要一个公司,来理解应 ...
IIS7.5下启用asp父级路径
如果你是运行asp显示需要启动父路径的话可以这样解决: 在IIS 下打开ASP选项,有个启用父路径的选择项,选择True 就可以了! 具体看图!因为没法贴两张图,就弄在一张里了!
007 The Inheritance In JAVA
在JAVA中有一个特型叫继承(Inheritance),通过继承我们可以重复使用代码,令代码简洁,易于扩展.例如:有一个sharp的类,这个类实现了sharp的一些方法,现在我们要写一个circle的 ...
【LeetCode】19. Remove Nth Node From End of List
题目: 思路:如果链表为空或者n小于1,直接返回即可,否则,让链表从头走到尾,每移动一步,让n减1. 1.链表1->2->3,n=4,不存在倒数第四个节点,返回整个链表扫过的节点依次:1 ...
Quick Sort
class Program { static int[] a = new int[] { 6, 1, 2, 7, 9, 3, 4, 5, 10, 8 }; int n; static void Mai ...

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

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

随机推荐

热门专题