您的位置：首页 > Web前端 > JavaScript

跟我学JavaScript--事件，输出

2017-04-19 14:29 197 查看

事件

1.HTML事件是发生在HTML元素上的，当在HTML页面上使用JavaScript时，可以触发这些事件

2.HTML事件可以是浏览器行为，或是用户行为

3.常见的HTML事件：

onchange : HTML元素改变

onclick ：用户点击HTML元素

onmouseover ：用户在一个HTML元素上移动鼠标

onmouseout ：用户从一个HTML元素上移开鼠标

onkeydown ：用户按下键盘按键

onload ：浏览器已完成页面的加载

4.HTML事件作用：处理表单验证，用户输入，用户行为及浏览器动作

常见用途：

页面加载时触发事件

页面关闭时触发事件

用户点击按钮执行动作

验证用户输入内容的合法性

5.执行JavaScript事件代码的方法：

HTML事件属性可以直接执行JavaScript代码

HTML事件属性可以调用JavaScript函数

可以为HTML元素指定自己的事件处理程序

可以阻止事件的发生

输出

1.JavaScript没有任何打印或者输出的函数

2.输出数据的方式：

window.alert() ：弹出警告框

document.write() ：将内容显示在HTML页面

innerHTML ：写入到HTML元素

console.log() ：写入到浏览器的控制台

3.如果在HTML页面完成加载后执行document.write()，整个HTML页面将被覆盖

如.

<body>
<p>这里是页面</p>
<button onclick="myFunc()">点击</button>
<script>
function myFunc(){
document.write(Date());
}
</script>
</body>

运行结果如下：

点击按钮后：

警告 alert()消息对话框

警告框弹出，如果不点“确定”，则不能对网页做任何操作

语法：

alert("字符串");

或

alert(变量);

输出内容 document.write

直接输出“”内的内容

<script  type="text/javascript">
document.write("Nico");   //Nico
</script>

通过变量，输出内容

<script  type="text/javascript">
var myName = "Nico";
document.write(myName);   //Nico
</script>

输出多项内容，用 + 连接

<script  type="text/javascript">
var myName = "Nico";
document.write("Hello,"+myName);   //Hello,Nico
</script>

输出HTML标签并起作用，标签用“”括起来

<script  type="text/javascript">
var myName = "Nico";
document.write(myName+"<br>");   //输出Nico后输出一个换行符
</script>

确认 confirm消息对话框

作用：允许用户做选择

（用户在选择点击对话框前，不能进行任何其他操作）

语法：

confirm(str);

str：在消息对话框中要显示的文本

返回值：布尔值

当用户点击“确定”按钮时，返回true

当用户点击“取消”按钮时，返回false

（通过返回值判断用户点击了哪种按钮）

如.

<script type="text/javascript">
var myMess=confirm("Are you Nico?");

if(myMess)
document.write("You are hero");
else
document.write("Work hard");
</script>

提问 prompt消息对话框

prompt弹出消息对话框，用于询问一些需要与用户交互的信息。包含一个确定按钮，取消按钮和一个文本输入框

（用户在点击对话框按钮前，不能进行任何其他操作）

语法：

prompt(str1,str2);

str1：要显示在消息对话框中的文本，不可修改

str2：文本框中的内容，可以修改

返回值：

点击确定按钮，文本框中的内容将作为函数返回值

点击取消按钮，将返回null

如.

<script type="text/javascript">
var myMess=prompt("输入你的名字");

if(myMess)
alert("Hello,"+myMess);
else
alert("Hi,friend");
</script>

打开新窗口 window.open

open()方法可以查找一个已经存在或者新建的浏览器窗口

语法：window.open([url],[窗口名称],[参数字符串]);

参数说明：

url：

1.可选参数。

2.作用：在窗口中显示网页的网址或路径

3.若省略，则它的值是空字符串，窗口不显示任何文档

窗口名称：

1.可选参数。

2.命名方式：由字母，数字和下划线组成

3.相同名称的窗口只能创建一个，要想创建多个窗口则名称不能相同

4.名称不能包含有空格

特殊意义名称：

1）._blank：在新窗口显示目标网页

2）. _self：在当前窗口显示目标网页

3）._top：框架网页中在上部窗口中显示目标网页（若一个窗口嵌套其他多个窗口，则在最顶层的窗口显示目标网页）

参数字符串：

1.可选参数

2.可设置多个参数，用逗号隔开

如.

<script>
function myFunc(){
window.open('http://www.baidu.com','_blank','width=600,height=300,scrollbars=yes,toolbar=no,menubar=no,status=no');
}

</script>

关闭窗口 window.close

用法：

关闭本窗口：window.close();

关闭指定窗口：<窗口对象>.close();

如.

<script>
var myWin=window.open('http://www.baidu.com');
myWin.close();
</script>

在打开新窗口的同时关闭该窗口，看不到被打开的窗口

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 事件输出

相关文章推荐

新的分享

章节导航