博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Js学习笔记一(鼠标事件.....)
阅读量:6850 次
发布时间:2019-06-26

本文共 3942 字,大约阅读时间需要 13 分钟。

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.οnlοad=function(){}

 

包裹代码

 实例代码:

 

1.Html
无标题文档
div11111111111111

 

 

1.js

 

如果直接

 

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

 

alert(div1.innerHTML);

 

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

 

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

 

window.οnlοad=function(){var div1=document.getElementById('div');alert(div1.innerHTML);}

 

 

才行

 

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

 

代码示例:

 

2

 

 

2.js代码

 

window.οnlοad=function(){function say(){alert('hello');}}

 

 

则会出错 说say未定义

 

为何?

 

为何say函数未被加载呢?

 

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

 

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

 

 

5.Js鼠标事件

 

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

 

ie中的button属性

 

0->左键

 

1->中键

 

2->右键

 

Ie中的button属性

 

0->没有按下

 

1->左键

 

2->右键

 

3->同时左右键

 

4->中键

 

5->左中

 

6->右中

 

7->左中右

 

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

 

解决兼容的代码

 

document.οnmοuseup=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

 

分别弹出1object mouseEvent

 

而在ie中是0undefined

 

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

 

禁止鼠标右键

 

function right(){

 

if(event.button==2){

 

event.returnValue=false;

 

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

 

}

 

}

 

document.οnmοusedοwn=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的对象的成员

它们包括除GlobalMath对象以外的所有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.οnclick=test;

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

 

Ie不支持这个方法

 

9.event对象的属性

<script type="text/javascript">

document.οnkeydοwn=function(){

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

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

 

}

}

</script>

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

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

 

document.οnmοusedοwn=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 表示不带pxleft值比如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.οnmοusedοwn=function(evt){

alert(evt.srcElement.id);

}

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

代码示例:

php100中文网

 

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

onmousemovebutton属性均为0

而在mousedown/up

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

 

 

 

 

 

 

转载于:https://www.cnblogs.com/HKUI/p/3237123.html

你可能感兴趣的文章
MongoCola Web化 -- 1. 是不是什么软件都要Web化的讨论 2.新公司,新起点 3.MongoCola 新版本发布...
查看>>
LeetCode (6): ZigZag Conversion
查看>>
HDU 4424 Conquer a New Region 并查集
查看>>
捣乱Linux环境下的C语言
查看>>
13040:All in All
查看>>
华为架构师8年经验谈:从单体架构到微服务的服务化演进之路
查看>>
CGAL进行半边塌缩之前的可塌缩性判断
查看>>
CentOS7安装Zabbix
查看>>
【lca】lca的tarjan写法 poj1330
查看>>
Qt基础1:QString
查看>>
Python第一篇-简介和入门
查看>>
ImageMagick图片服务器
查看>>
Redis多实例配置以及主从同步
查看>>
day5模块学习--hashlib模块
查看>>
java.lang.IllegalStateException: Cannot forward after response has been committe
查看>>
box-sizing属性的的用法
查看>>
应如何修改QUICKSORT,才能使其按非增序进行排序?
查看>>
Android开发之自定义局部导航菜单
查看>>
EL函数以及自定义标签的应用
查看>>
【合集】zz数组与指针的艺术--深入探索c/c++数组与指针
查看>>