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;
6.
所有JScript固有对象都有只读的prototype属性。可以像下面那样为原型添加功能，但该对象不能被赋予不同的原型。然而用户定义的对象可以被赋予新的原型
<script type="text/javascript">
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>
7.
Constructor属性是所有具有prototype的对象的成员
它们包括除Global和Math对象以外的所有JScript固有对象
<script type="text/javascript">
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>
8.
function test(){
alert("test");
}
var bt=document.getElementById('bt');
//bt.onclick=test;
bt.addEventListener('click',test,false);
Ie不支持这个方法
9.event对象的属性
<script type="text/javascript">
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
<div id="t" style=" position:relative;left:130px; top:140px; width:50px; height:50px; border:solid 2px #00F"></div>
<script type="text/javascript">
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 ...
随机推荐
- Angularjs路由.让人激动的技术.真给前端长脸了.
先看文件的摆放 不废话,直接上代码. detail.html: <hr/> <h3>路由 <span style="color: red;">{ ...
- LeetCode Lowest Common Ancestor of a Binary Serach Tree
Given a binary search tree (BST), find the lowest common ancestor (LCA) of two given nodes in the BS ...
- AOP切入点注解报错
开始学习AOP,出现如下的错误,最后发现是JDK与aspectj,aspectjweaver版本问题造成的.之后改成最新版本,代码运行正常. 利用这些特性可以进行代码的插入,比如权限,缓存结合mecm ...
- char nchar varchar nvarchar的区别(转）
char nchar varchar nvarchar的区别 今天在论坛里看到有人激烈讨论这几个数据类型的区别跟实际使用情况,很多人都搞不清楚究竟哪个场景使用哪个数据类型 现在就摘录一下sql2 ...
- jmeter随笔（1）-在csv中数据为json格式的数据不完整
昨天同事在使用jmeter遇到问题,在csv中数据为json格式的数据,在jmeter中无法完整的取值,小怪我看了下,给出解决办法,其实很简单,我们一起看看,看完了记得分享给你的朋友. 问题现象: 1 ...
- Android开发-API指南-<meta-data>
<meta-data> 英文原文:http://developer.android.com/guide/topics/manifest/meta-data-element.html 采集( ...
- [翻译]你真的知道你看到的UTF-8字符是什么吗?
翻译自http://www.pixelstech.net/article/1397877200-You-know-what-UTF-8-is-when-you-see-it- Source : son ...
- Swift学习（三）类型推导&基本运算&分支&循环
一.Swift中类型推导&基本运算 Swift中类型推导 如果一个标识符在定义时有直接赋值,那么可以根据后面赋值的类型,来推导出前面标识符的类型,这样前面标识符的(:类型)可以省略 查看标识符 ...
- USACO Section 4.4 追查坏牛奶Pollutant Control
http://www.luogu.org/problem/show?pid=1344 题目描述 你第一天接手三鹿牛奶公司就发生了一件倒霉的事情:公司不小心发送了一批有三聚氰胺的牛奶.很不幸,你发现这件 ...
- 注册表 锁IE首页
用附件中的修改软件,或者用以下修改注册表的办法. 一.注册表被修改的原因及解决办法 其实,该恶意网页是含有有害代码的ActiveX网页文件,这些广告信息的出现是因为浏览者的注册表被恶意更改的结果. ...