Js study notes one (mouse event...)

1. encodeURI and decodeURI() convert url to valid url (can be recognized)

Url="http://news.baidu.com/p.php?id='test'&name=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

Is to encode Chinese characters

document.write(decodeURI($url));

Decoding

2.encodeURIComponent()与decodeURIComponent()

Convert characters into valid URL components

Url="http://news.baidu.com/p.php?id='test'&name=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

Similarly decodeURIComponent() decoding

encodeURI与encodeURIComponent()

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

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

2. Two ways to delay loading when js is introduced externally

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

Use defer attribute, now most browsers also support

At this time, when the html text is all loaded, then load 1.js

‚Use window.onload=function(){} in the import file

Package code

Example code:

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>

In 1.js in if directly

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

alert(div1.innerHTML);

Because of the sequential execution, the element with id=div1 cannot be found when 1.js is executed first, and an error is reported

Then you must give 1.html code script plus defer attributes ( browser support ) or 1.js changed in

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

Just work

4. The function declaration on window.onload = function () {} internal problem

Code example:

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

window.onload=function(){function say(){
   alert('hello');
}

}

It will make an error saying say is not defined

Why?

Why is the say function not loaded?

Onload() is executed after the document or image is completely loaded

Say it inside stated function, after it is finished, in performing a separate say , at this time say has expired, and php different

5.Js mouse event

For mousedown and mouseup events, there is a button attribute on the event object , which means that a certain button of the mouse is released or pressed ( left, center, right, etc. )

Non- ie in the button properties

0-> Left button

1-> Middle button

2-> Right click

Ie the button properties

0-> not pressed

1-> Left button

2-> Right click

3-> Simultaneous left and right keys

4-> Middle button

5-> Middle left

6-> right middle

7-> Left Middle Right

But generally only the left , center , and right are used separately

Resolve compatible code

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;
    }

}

}

Or pass a parameter, use this parameter instead of arguments[0]

Mainly use the difference between ie and non- ie in processing time objects:

When an event is triggered, an event object is generated. This object contains all information related to the event, including the element that caused the event, the type of event, and other information related to a specific event.

Event object, we generally call it event object, this object is passed by the browser as a parameter through a function .

Look at the following code:

document.onmouseup = function () {
 alert(arguments.length);
 alert(arguments[0]); 
}

In the non- ie in

Pop up 1 and object mouseEvent respectively

In ie , it is 0 and undefined

Take advantage of this difference, so the passed parameter evt can replace arguments[0];

Prohibit the right mouse button

function right(){

if(event.button==2){

event.returnValue=false;

alert(" Use of the right mouse button is prohibited ");

}

document.onmousedown=right;

All JScript intrinsic objects have read-only prototype properties. You can add functionality to the prototype as follows, but the object cannot be assigned a different prototype. However, user-defined objects can be given new prototypes

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>

The Constructor attribute is a member of all objects with prototype

They include all JScript intrinsic objects except Global and Math objects

x="hi";

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

if(x.constructor==String){

alert('ok');

} // All are 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 does not support this method

9. The attributes of the event object

document.onkeydown=function(){

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

alert(" You pressed crtl, shif, alt at the same time ");

}

</script>

Button attribute, see 5 , this attribute only applies to onmousedown/up/move

For other events, return 0 regardless of status

document.onmousedown=function(){

if(event.button==2){

alert(" Baidu welcomes you! ");

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

}

clientX

clientY

Get the x,y coordinates of the mouse in the browser window (read-only property)

Application: The picture moves with the mouse

document.onmouseup = function () {


 alert(arguments.length);


 alert(arguments[0]); 


 }

Js in use represents the style marginLeft in the "margin-left"

left represents the value of left with px such as 10px

pixelLeft expressed without px The left value of such 10px of 10

srcElement

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

document.onmousedown=function(evt){

alert (evt.srcElement.id);

}

Get the object of the current event through the srcElement of the event

Code example:

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

Code description, as long as down is executed once ( above part ), variables such as z, x, y will exist as global variables, and var must be added to the declaration of the variable in the function, otherwise it will be global.

In onmousemove , the button attributes are all 0 ,

And in mousedown/up

According to the mouse button, press it once and the state will not change until the next time it changes

Js study notes one (mouse event...)

Guess you like