JavaScript详解（7.对话框和DOM、BOM、JavaScript对象）

最新推荐文章于 2023-02-09 14:44:40 发布

张兵游勇

最新推荐文章于 2023-02-09 14:44:40 发布

阅读量8.7k

点赞数

分类专栏： JavaScript 笔记文章标签： html javascript css css3 html5

本文链接：https://blog.csdn.net/qq_43623447/article/details/104052519

版权

一，对话框

一，对话框的分类

警告框 alert, 常用。
询问框返回提示框中的值。
确认框返回true/false.

1，警告框

alert(‘警告的内容’);

2，询问框

在这里插入图片描述

 var name = prompt("您没有登录，请输入用户名：");
  alert("your name: " + name);

3，确认框

1.               var isLogin = confirm("您确认登录吗？");
2.                if (isLogin) {
3.                    alert("您同意登录");
4.                }
5.                else {
6.                    alert("您不同意登录");
7.                   // alert("您不同意登录2");
8.                }

在这里插入图片描述

二，DOM对象

HTML DOM 树
在这里插入图片描述

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

简单的说，就是文档内部的一些”对话“

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

一，DOM Event 对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

1，事件句柄　(Event Handlers) 也就是事件触发源

HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，可将之插入 HTML 标签以定义事件的行为。
在这里插入图片描述
2，鼠标 / 键盘属性

3，IE 属性

除了上面的鼠标/事件属性，IE 浏览器还支持下面的属性：【基本不怎么用，IE是个奇葩】
在这里插入图片描述
4，相关实例

<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
    
var btnNum = event.button;
if (btnNum==2)
  {
    
  alert("您点击了鼠标右键！")
  }
else if(btnNum==0)
  {
    
  alert("您点击了鼠标左键！")
  }
else if(btnNum==1)
  {
    
  alert("您点击了鼠标中键！");
  }
else
  {
    
  alert("您点击了" + btnNum+ "号键，我不能确定它的名称。");
  }
}
</script>
</head>
<body onmousedown="whichButton(event)">
<p>请在文档中点击鼠标。一个消息框会提示出您点击了哪个鼠标按键。</p>
</body>
</html>

得到客户端的坐标

<html>
<head>
<script type="text/javascript">
function show_coords(event)
{
    
x=event.clientX
y=event.clientY
alert("X 坐标: " + x + ", Y 坐标: " + y)
}
</script>
</head>
<body onmousedown="show_coords(event)">
<p>请在文档中点击。一个消息框会提示出鼠标指针的 x 和 y 坐标。</p>
</body>
</html>

得到键盘的事件

<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
    
alert(event.keyCode)
}
</script>
</head>
<body onkeyup="whichButton(even

最低0.47元/天解锁文章

张兵游勇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript详解（7.对话框和DOM、BOM、JavaScript对象）

文章目录一，对话框一，对话框的分类1，警告框2，询问框3，确认框二，DOM对象一，DOM Event 对象二，DOM Document 对象【window.document.】三，DOM Element 对象【元素对象】四，DOM Attribute 对象【访问元素中的属性，先得到元素，再根据元素去访问属性】一，对话框一，对话框的分类警告框 alert, 常用。询问框 ...
复制链接

扫一扫