js的交互事件

简介: js的交互事件

HTML,CSS,JavaScript

HTML定义网页的内容

CSS描述网页的布局

JavaScript控制网页的行为

JavaScript是脚本语言

JavaScript 是可插入 HTML 页面的编程代码。JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。

基础代码实现

JavaScript:直接写入HTML输出流

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>JavaScript</title> 
</head>
<body>
<script>
    document.write("<h2>这是标题</h2>");
    document.write("<p>这是段落。</p>");
</script>
</body>
</html>
 
JavaScript:改变HTML内容
x=document.getElementById("demo");  //查找内容
x.innerHTML="Hello JavaScript";    //改变内容

示例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>JavaScript</title> 
</head>
<body>
 
<h2>这里是标题</h2>
<p id="demo">这里是段落。</p>
<script>
document.getElementById("demo").innerHTML="段落已被修改。";
</script>
 
</body>
</html>

js对事件的反应

!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>JavaScript</title> 
</head>
<body>
<button type="button" onclick="alert('登陆成功')">登录</button>
</body>
</html>
 

示例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>JavaScript</title> 
</head>
<body>
<p id="demo">登录失败</p>
<button type="button" onclick="Function()">重试</button>
<script src="js.js"></script>
  
</body>
</html>
目录
相关文章
|
4天前
|
JavaScript 前端开发
js开发:请解释事件冒泡和事件捕获。
JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素传递,而事件捕获则从外层元素向内层传递。`addEventListener`的第三个参数可设定事件模式,`false`或不设为冒泡,`true`为捕获。示例代码展示了如何设置。
24 2
|
2天前
|
消息中间件 存储 设计模式
JavaScript发布订阅模式:实现事件驱动编程!
JavaScript发布订阅模式:实现事件驱动编程!
|
2天前
|
设计模式 存储 消息中间件
JavaScript观察者模式:实现对象间的事件通信!
JavaScript观察者模式:实现对象间的事件通信!
|
4天前
|
JavaScript 前端开发 开发者
javascript事件大全
javascript事件大全
13 1
|
4天前
|
JavaScript 前端开发
Javascript的一些监听事件
Javascript的一些监听事件
12 2
|
4天前
|
JavaScript 前端开发
js的事件介绍
js的事件介绍
16 1
|
4天前
|
JavaScript 前端开发
js的事件
js的事件
15 1
|
4天前
|
JavaScript 前端开发 C++
【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
【5月更文挑战第2天】【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
|
4天前
|
JavaScript 前端开发 开发者
【JavaScript技术专栏】JavaScript事件处理机制详解
【4月更文挑战第30天】本文探讨JavaScript中的事件处理机制,涉及事件类型(如click、mouseover)、事件流(冒泡型、捕获型及目标阶段)、事件处理函数(内联与addEventListener方法)以及事件委托(用于优化内存和处理动态元素)。此外,还介绍了事件取消,通过`preventDefault()`和`stopPropagation()`控制事件行为。理解这些概念对构建交互式Web应用至关重要。
|
4天前
|
JavaScript 前端开发
11.JavaScript 事件的概念以及绑定方法
11.JavaScript 事件的概念以及绑定方法