Input 相关事件
onblur -当用户离开输入框时
<!DOCTYPE html> <html> <head> <script> function myFunction() { var x = document.getElementById("fname"); x.value = x.value.toUpperCase(); } </script> </head> <body> Enter your name: <input type="text" id="fname" onblur="myFunction()"> <p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p> </body> </html>
onchange -当用户更改输入字段的内容时
当用户选择下拉值时
<!DOCTYPE html> <html> <body> <h2>JavaScript HTML Events</h2> Enter your name: <input type="text" id="fname" onchange="upperCase()"> <p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p> <script> function upperCase() { const x = document.getElementById("fname"); x.value = x.value.toUpperCase(); } </script> </body> </html>
<!DOCTYPE html> <html> <head> <script> function preferedBrowser() { prefer = document.forms[0].browsers.value; alert("You prefer browsing internet with " + prefer); } </script> </head> <body> <form> Choose which browser you prefer: <select id="browsers" onchange="preferedBrowser()"> <option value="Chrome">Chrome</option> <option value="Internet Explorer">Internet Explorer</option> <option value="Firefox">Firefox</option> </select> </form> </body> </html>
onfocus -当输入字段获得焦点时
<!DOCTYPE html> <html> <head> <script> function myFunction(x) { x.style.background = "yellow"; } </script> </head> <body> Enter your name: <input type="text" onfocus="myFunction(this)"> <p>When the input field gets focus, a function is triggered which changes the background-color.</p> </body> </html>
onselect -当输入文本被选中时
<!DOCTYPE html> <html> <head> <script> function myFunction() { document.getElementById("demo").innerHTML = "You selected some text"; } </script> </head> <body> Some text: <input type="text" value="Hello world!" onselect="myFunction()"> <p id="demo"></p> </body> </html>
onsubmit - 当用户点击提交按钮时
<!DOCTYPE html> <html> <head> <script> function confirmInput() { fname = document.forms[0].fname.value; alert("Hello " + fname + "! You will now be redirected to www.w3Schools.com"); } </script> </head> <body> <form onsubmit="confirmInput()" action="https://www.w3schools.com/"> Enter your name: <input id="fname" type="text" size="20"> <input type="submit"> </form> </body> </html>
onreset -当用户点击重置按钮时
<!DOCTYPE html> <html> <head> <script> function message() { alert("This alert box was triggered by the onreset event handler"); } </script> </head> <body> <form onreset="message()"> Enter your name: <input type="text" size="20"> <input type="reset"> </form> </body> </html>
onkeydown -当用户按下/按住某个键时
<!DOCTYPE html> <html> <head> <script> function myFunction() { alert("You pressed a key inside the input field"); } </script> </head> <body> <p>A function is triggered when the user is pressing a key in the input field.</p> <input type="text" onkeydown="myFunction()"> </body> </html>
onkeypress -当用户按下/按住某个键时
<!DOCTYPE html> <html> <head> <script> function myFunction() { alert("You pressed a key inside the input field"); } </script> </head> <body> <p>A function is triggered when the user is pressing a key in the input field.</p> <input type="text" onkeypress="myFunction()"> </body> </html>
onkeyup -当用户释放按键时
<!DOCTYPE html> <html> <head> <script> function myFunction() { var x = document.getElementById("fname"); x.value = x.value.toUpperCase(); } </script> </head> <body> <p>A function is triggered when the user releases a key in the input field. The function transforms the character to upper case.</p> Enter your name: <input type="text" id="fname" onkeyup="myFunction()"> </body> </html>
<!DOCTYPE html> <html> <head> <script> function writeMessage() { document.forms[0].mySecondInput.value = document.forms[0].myInput.value; } </script> </head> <body> <p>The onkeyup event occurs when the a keyboard key is on its way UP.</p> <form> Enter your name: <input type="text" name="myInput" onkeyup="writeMessage()" size="20"> <input type="text" name="mySecondInput" size="20"> </form> </body> </html>
Mouse 相关事件
onmouseover/onmouseout -当鼠标经过一个元素时
<!DOCTYPE html> <html> <body> <h1 onmouseover="style.color='red'" onmouseout="style.color='black'">Mouse over this text</h1> </body> </html>
onmousedown/onmouseout -当按下/释放鼠标按钮时
<!DOCTYPE html> <html> <head> <script> function myFunction(elmnt, clr) { elmnt.style.color = clr; } </script> </head> <body> <p onmousedown="myFunction(this,'red')" onmouseup="myFunction(this,'green')"> Click the text to change the color. A function, with parameters, is triggered when the mouse button is pressed down, and again, with other parameters, when the mouse button is released. </p> </body> </html>
onmousedown -单击鼠标时:提醒哪个 元素/按钮
<!DOCTYPE html> <html> <head> <script> function whichElement(e) { var targ; if (!e) { var e = window.event; } if (e.target) { targ=e.target; } else if (e.srcElement) { targ=e.srcElement; } var tname; tname = targ.tagName; alert("You clicked on a " + tname + " element."); } </script> </head> <body onmousedown="whichElement(event)"> <p>Click somewhere in the document. An alert box will alert the name of the element you clicked on.</p> <h3>This is a heading</h3> <img border="0" src="smiley.gif" alt="Smiley" width="32" height="32"> <p>This is a paragraph.</p> </body> </html>
onmousemove/onmouseout -将鼠标指针移到/移出图像时
<!DOCTYPE html> <html> <head> <script> function myFunction(e) { x = e.clientX; y = e.clientY; coor = "Coordinates: (" + x + "," + y + ")"; document.getElementById("demo").innerHTML = coor } function clearCoor() { document.getElementById("demo").innerHTML = ""; } </script> </head> <body style="margin:0px;"> <div id="coordiv" style="width:199px;height:99px;border:1px solid" onmousemove="myFunction(event)" onmouseout="clearCoor()"></div> <p>Mouse over the rectangle above, and get the coordinates of your mouse pointer.</p> <p id="demo"></p> </body> </html>
onmouseover/onmouseout -将鼠标移到/移出图像时
<!DOCTYPE html> <html> <head> <script> function bigImg(x) { x.style.height = "64px"; x.style.width = "64px"; } function normalImg(x) { x.style.height = "32px"; x.style.width = "32px"; } </script> </head> <body> <img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="smiley.gif" alt="Smiley" width="32" height="32"> <p>The function bigImg() is triggered when the user moves the mouse pointer over the image.</p> <p>The function normalImg() is triggered when the mouse pointer is moved out of the image.</p> </body> </html>
鼠标悬停在图像映射上
<!DOCTYPE html> <html> <head> <script> function writeText(txt) { document.getElementById("desc").innerHTML = txt; } </script> </head> <body> <img src ="planets.gif" width ="145" height ="126" alt="Planets" usemap="#planetmap" /> <map name="planetmap"> <area shape ="rect" coords ="0,0,82,126" onmouseover="writeText('The Sun and the gas giant planets like Jupiter are by far the largest objects in our Solar System.')" href ="sun.htm" target ="_blank" alt="Sun" /> <area shape ="circle" coords ="90,58,3" onmouseover="writeText('The planet Mercury is very difficult to study from the Earth because it is always so close to the Sun.')" href ="mercur.htm" target ="_blank" alt="Mercury" /> <area shape ="circle" coords ="124,58,8" onmouseover="writeText('Until the 1960s, Venus was often considered a twin sister to the Earth because Venus is the nearest planet to us, and because the two planets seem to share many characteristics.')" href ="venus.htm" target ="_blank" alt="Venus" /> </map> <p id="desc">Mouse over the sun and the planets and see the different descriptions.</p> </body> </html>
Click 事件Dom
<!DOCTYPE html> <html> <head> <script> function displayDate() { document.getElementById("demo").innerHTML = Date(); } </script> </head> <body> <h2>My First JavaScript</h2> <p id="demo">This is a paragraph.</p> <button type="button" onclick="displayDate()">Display Date</button> </body> </html>
onclick -单击按钮时
<!DOCTYPE html> <html> <head> <script> function myFunction() { document.getElementById("demo").innerHTML = "Hello World"; } </script> </head> <body> <p>Click the button to trigger a function.</p> <button onclick="myFunction()">Click me</button> <p id="demo"></p> </body> </html>
ondblclick -双击文本时
<!DOCTYPE html> <html> <head> <script> function myFunction() { document.getElementById("demo").innerHTML = "Hello World"; } </script> </head> <body> <p ondblclick="myFunction()">Doubleclick this paragraph to trigger a function.</p> <p id="demo"></p> </body> </html>
Load 事件Dom
onload -当页面加载完毕
<!DOCTYPE html> <html> <head> <script> function myFunction() { alert("Page is loaded"); } </script> </head> <body onload="myFunction()"> <h2>Hello World!</h2> </body> </html>
-加载图像时
<!DOCTYPE html> <html> <head> <script> function loadImage() { alert("Image is loaded"); } </script> </head> <body> <img src="w3javascript.gif" onload="loadImage()" width="100" height="132"> </body> </html>
onerror -当加载图像时发生错误
<!DOCTYPE html> <html> <head> <script> function imgError() { alert('The image could not be loaded.'); } </script> </head> <body> <img src="image.gif" onerror="imgError()"> <p>A function is triggered if an error occurs when loading the image. The function shows an alert box with a text. In this example we refer to an image that does not exist, therefore the onerror event occurs.</p> </body> </html>
onunload -当浏览器关闭文档时
<!DOCTYPE html> <html> <head> <script> function myFunction() { alert("Thank you for visiting W3Schools!"); } </script> </head> <body onunload="myFunction()"> <h2>Welcome to my Home Page</h2> <p>Close this window or press F5 to reload the page.</p> </body> </html>
onresize -调整浏览器窗口大小时
<!DOCTYPE html> <html> <head> <script> function myFunction() { var w = window.outerWidth; var h = window.outerHeight; var txt = "Window size: width=" + w + ", height=" + h; document.getElementById("demo").innerHTML = txt; } </script> </head> <body onresize="myFunction()"> <p>Try to resize the browser window.</p> <p id="demo"> </p> <p>Note: this example will not work properly in IE8 and earlier. IE8 and earlier do not support the outerWidth/outerHeight propery of the window object.</p> </body> </html>
Others 事件Dom
按下的键的键码是什么
<!DOCTYPE html> <html> <head> <script> function whichButton(event) { document.getElementById("demo").innerHTML = event.keyCode; } </script> </head> <body onkeyup="whichButton(event)"> <p><b>Note:</b> Make sure the right frame has focus when trying this example!</p> <p>Click on this page, and press a key on your keyboard.</p> <p id="demo"></p> </body> </html>
光标的坐标是什么
<!DOCTYPE html> <html> <head> <script> function show_coords(event) { document.getElementById("demo").innerHTML = "X= " + event.clientX + "<br>Y= " + event.clientY; } </script> </head> <body> <p onmousedown="show_coords(event)"> Click this paragraph to display the x and y coordinates of the mouse pointer.</p> <p id="demo"></p> </body> </html>
光标相对于屏幕的坐标是什么
<!DOCTYPE html> <html> <head> <script> function coordinates(event) { document.getElementById("demo").innerHTML = "X = " + event.screenX + "<br>Y = " + event.screenY; } </script> </head> <body> <p onmousedown="coordinates(event)"> Click this paragraph, to display the x and y coordinates of the cursor, relative to the screen. </p> <p id="demo"></p> </body> </html>
是否按下了shift键
<!DOCTYPE html> <html> <head> <script> function isKeyPressed(event) { var text = "The shift key was NOT pressed!"; if (event.shiftKey == 1) { text = "The shift key was pressed!"; } document.getElementById("demo").innerHTML = text; } </script> </head> <body onmousedown="isKeyPressed(event)"> <p>Click on this paragraph. An alert box will tell you if you pressed the shift key or not.</p> <p id="demo"></p> </body> </html>
发生了那种事件类型
<!DOCTYPE html> <html> <head> <script> function getEventType(event) { document.getElementById("demo").innerHTML = event.type; } </script> </head> <body> <p onmousedown="getEventType(event)"> Click on this paragraph. A message will tell what type of event was triggered.</p> <p id="demo"></p> </body> </html>