Javascript-dom总结(事件、comfirm、页面跳转)

最新推荐文章于 2024-11-30 10:44:36 发布

原创最新推荐文章于 2024-11-30 10:44:36 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

JavaScript/JQuery 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了网页中事件绑定的方法，包括静态绑定和动态绑定，并展示了如何使用 JavaScript 的 confirm 和 prompt 方法来增加用户交互。此外，还提供了实现页面跳转、刷新及历史记录操作的具体示例。

1. 事件的绑定

a. 静态绑定:方法名有括号，类比于方法的调用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type ="text/javascript">
        function fun() {
            alert("静态调用");
        }
    </script>
</head>
<body>
<button onclick="fun()">静态调用方法</button>
</body>
</html>

b. 动态绑定:方法名无括号，类比于委托。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type ="text/javascript">
        function fun() {
            alert("动态调用");
        }
    </script>
</head>
<body onload="document.getElementById('btn').onclick=fun">
<button id="btn">动态绑定后调用方法</button>
</body>
</html>

2. confirm的使用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function t() {
            if (confirm("玩一把游戏?")) {
                alert("玩");
            } else {
                alert("不玩");
            }
        }
    </script>
</head>
<body>
<button onclick="t()">玩不玩游戏呢</button>
</body>
</html>

3.prompt 弹出提示框，获取用户输入的内容

<html>

<head>

<script type="text/javascript">

	function fun()
	{
		var a = prompt();
		alert(a);
	}

</script>

</head>
<body>
<button onclick='fun()'>输入姓名</button>
</body>
</html>

4. 页面跳转

a.跳转到指定页面

<button onclick="navigate('http://www.baidu.com')">跳转百度</button>
<button onclick="window.location.href='http://www.baidu.com'">跳转百度</button>

b.当前页刷新

<button onclick="window.location.reload()">刷新</button>

c. 页面后退

    <button onclick="history.back()">后退1</button>
    <button onclick="history.go(-1)">后退2</button>

d.页面前进

    <button onclick="history.back()">后退1</button>
    <button onclick="history.go(-1)"> 后退2</button>