使用 JavaScript 响应事件的示例
1.输入事件
1. 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>
2. 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>
3. onchange-当用户选择下拉值时
<!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>
4. 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>
5. 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>
6. 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>
7. 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>
8. 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>
9. 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>
10. 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>
11. onkeyup-当用户稀放一个键时
<!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>
12. onkeydown与onkeyup-两者
<!DOCTYPE html> <html> <head> <script> function color(color) { document.forms[0].myInput.style.background = color; } </script> </head> <body> <form> Write a message:<br> <input type="text" onkeydown="color('yellow')" onkeyup="color('white')" name="myInput"> </form> </body> </html>
2.鼠标事件
1. onmouseover/onmouseout-当鼠标经过一个元素
<!DOCTYPE html> <html> <body> <h1 onmouseover="style.color='red'" onmouseout="style.color='black'">Mouse over this text</h1> </body> </html>
2. onmousedown/onmouseup-按下/稀放鼠标按钮时
<!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>
3. 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>
4. onmousedown-单击鼠标时：提示哪个按钮
<!DOCTYPE html> <html> <head> <script> function WhichButton(event) { alert("You pressed button: " + event.button) } </script> </head> <body> <div onmousedown="WhichButton(event);">Click this text (with one of your mouse-buttons) <p> 0 Specifies the left mouse-button<br> 1 Specifies the middle mouse-button<br> 2 Specifies the right mouse-button</p> <p><strong>Note:</strong> Internet Explorer 8, and earlier, returns another result:<br> 1 Specifies the left mouse-button<br> 4 Specifies the middle mouse-button<br> 2 Specifies the right mouse-button</p> </div> </body> </html>
5. 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="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>
6. 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>
7. 鼠标悬停在图像地图上
<!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>
3.点击事件
1. 作用于onclick事件
<!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>
2. 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>
3. ondbclick-双击文本时
<!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>
4.加载事件
1.onload-当页面被加载时
<!DOCTYPE html> <html> <head> <script> function myFunction() { alert("Page is loaded"); } </script> </head> <body onload="myFunction()"> <h2>Hello World!</h2> </body> </html>
2.onload-加载图片时
<!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>
3.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>
4.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>
5.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>
5.其他
1. 按下的键的键码是什么？
<!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>
2. 光标的坐标是多少？
<!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>
3. 光标相对于屏幕的坐标是多少？
<!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>
4. 是否按下了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>
5. 发生了哪种事件类型？
<!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>