Simple event
Case 1: When the mouse moves, the mouse position (coordinates) is displayed in the input text box.
Onmousemove: When the mouse moves, it is triggered
document.οnmοusemοve=function(){function body (what to do after moving)}
event object (function Parameter): When the event response function is triggered, the browser will pass an event object as an actual parameter to the response function every time (function(){}, also called callback function)
document.οnmοusemοve=function (formal parameter (Set when receiving parameters)) {function body (what to do after moving)}
The move position parameter after the mouse movement executed here will be encapsulated in the formal parameter. The event formal parameter here has many built-in attributes
document. οnmοusemοve=function(x){ var a=x.clientX; var b=x.clientY; input.value="x: "+ a + "; y:" + b; (display coordinates in the text box) }
Case 2: Move the mouse to let the box follow the mouse
var box=document.getElementById("box")
(box)document.οnmοusemοve=function(x){(The moving object is not the document, but the div of the document, so that the mouse is out of the box Then it won’t move with it, so it’s best to bind the document)
var a=x.clienX;
var b=x.clientY;
box.style.left=a+"px";
box.style.top=b+"px" ;
}
Var a=x.clienX; var a=x.clien.pageX;
var b=x.clientY; (used to get the coordinates of the mouse in the current visible window) var b=x.client.pageY (used to get the mouse Relative to the current page coordinates)
Case 3:
1. When the mouse is pressed on the dragged element, start dragging
onmousedown
2. When the mouse moves, the dragged element moves with the mouse
onmousemove
3. When the mouse is released, the dragged element is fixed to The current position
onmouseup is
then placed in the case 2 onmousedown to nest onmousemove,
and then released, the fixed function body of the element is document.οnmοusemοve=null, that is, onmouseup nesting document.οnmοusemοve=null
moves to the position of other boxes and releases , Will be covered by other boxes.
In order to make the result meaningful, the cancel release command document.οnmοuseup=null should be added to the function body when the mouse is released, and it is canceled along with the drag and drop, which is a one-time event
Optimization: Use the mouse as the center point during the dragging process, instead of the upper left corner
1. Find the div offset
2. The X value of the mouse—the left value of the element
3. The Y value of the mouse—the top value of the element
4. Add function structure var c=x.clientX—box.offsetLeft
var d=x.clientY—box.offsetTop
and then change box.style.left=a+"px"; become box.style.left=a+"px "—C;
box.style.top=b+"px"; box.style.top=b+"px"—d;
Case 4: Mouse wheel event (compatibility problem with browser)
setting. When the mouse wheel is scrolled down, the box becomes longer, and when the mouse wheel is scrolled up, the box becomes shorter. The scrolling event object (parameter) also has its built-in properties wheelDelta,
scrolling up will give a positive parameter encapsulation, so it can be applied to the wheel event box to change the length
box.onmousewheel=function{ (>0 proves that he is up) if (x.wheelDelta>0) { box.style.height =box.clientHeight—10+"px" }else{box.style.height=box.clientHeight+10+"px" return false (cancel the default behavior) } } When the scroll wheel is scrolling, if the browser has a scroll bar , Scroll with the browser when scrolling. This is the default behavior of the browser. If you don’t want it to happen, you can cancel the default behavior. You can add return false to the function body.
Used in Firefox: The syntax is box.addEventListener("DOMMOUSEScroll", function(){}, false)
Case 5: Keyboard events
Keyboard events are generally bound to some objects that can get the focus (such as the text box where the cursor is flashing), or the document object.
Press the keyboard: onkeydown and
release the keyboard: onkeyup
event object of the keyboard event The built-in property keyCode can check which key is pressed, but the feedback is the code of the corresponding key.
Set which key to feedback what information can be document.οnkeydοwn=function(x){ if(x.keyCode
67) { console.log("xixixix") } } to judge whether ctrl+c is pressed, put the above formula if (x.keyCode
67) Change to if (x.keyCode==67 && x.ctrlKey)
In addition to keycode, the event object also provides several built-in attributes: altKey ctrlKey shiftKey can determine whether alt ctrl shift is pressed or not
if it is pressed Return true, otherwise return false
The Bom object (browser object model)
can operate the browser through JS. The
structure includes the following objects:
window: represents the entire browser window. At the same time, window is also a global object in the web page.
Window includes the following objects console.log (window .location), in the function body location="https://cn.bing.com/?FORM=Z9FD1..." Hyperlink
Navigator can be executed : represents browser information, and different browsers can be identified through this object
Location: address, representing the address bar information of the browser, or operating the browser to jump to the page.
History: representing the history of the browser. Due to privacy concerns, the object cannot obtain the specific history, and can only operate the browser to move forward After
console.log (window) view the window object, the
Bom object is saved as an attribute of the window object. It can be used through the window object, or you can directly use the
console.log (navigator.userAgent) userAgent is a string, this character The string contains the content used to describe the browser information.
Different browsers will have different userAgents, so this attribute can be used to determine the browser information.
Location has a corresponding function: refresh function, location.reload()
History: alert (History.length) The length can get the number of links currently visited (the number of historical links plus a total number of current links)
back () return to the previous page
forward () jump to the next page
go() can jump to the specified page, you need to pass an integer as a parameter, pass 1, to jump forward one page, 2 to jump forward two, -1 and -2 are the opposite
window.setInterval() is called regularly, you can Execute a function at regular intervals, and the
parameter is the callback function (the function will be called once at intervals) + the value (the time between each call, in milliseconds)
var h=document.get. . . . . . . . ("")
var num=1
var timer=window.setInterval(function(){h.innerHTML=num++(–when it becomes a countdown);},1000)
Return value: return a number, which represents the timer’s logo to
clear the timer : Need to pass in the identifier of a timer as a parameter, so that the corresponding timer can be closed,
(the new value cannot be equal to the result must be greater than the result, otherwise if the result of each increment cannot be equal to the timer requirement, it will exceed the timer and the timer cannot be cleared.器)
You can add if(num==10){window.clearInterval(timer)} to the function body
. The speed of the timer will be superimposed after the event is triggered multiple times. If you want to not superimpose
Case 6: After clicking the button, the div moves to the right
btn.οnclick=function(){box.style.left=200+"px"}
Advanced: Timed interval movement after clicking
btn.οnclick=function(){var timer=setInterval(function(){ var oldValue=box.offsetLeft; box.style.left=oldValue+"10px"; },1000) } (The limitation of this method is that the position is fixed)
In order to determine the dead position, you can use the getstyle function to get the continuously changing value. It is
used to get the style of an element.
function getstyle (use this built-in function to get the style) (obj, name) { var caaobj = getComputedStyle (use this method to get all Style) (obj, null); return caaobj[name] (return and attribute name must be bracketed, otherwise the default is attribute value) } var left = getstyle (use and assign value) (box, "left") console.log (Left) This can be applied to case 6 to btn.οnclick=function(){var timer=setInterval(function(){ var oldValue=getstyle(box,"left") (this getstyle function gets a px Value, var ov=window.parseInt(oldValue) So if you want to add and subtract, you need to use parseInt) var bibi=ov+10; box.style.left=bibi+"px" }, 1000) } In order to move the element to At 800px, the clear timer stops moving, and if (newvalue==800) { clearInterval(timer) } can be added to the function body
inner+ (text gets the text HTML gets the text + label)
setInterval(time2,1000); every time the given time system new Date is executed, the system time will be refreshed every 1 second