JS事件监听的代码实例
时间: 2023-10-11 08:11:33 浏览: 56
JS中,我们可以使用 `addEventListener()` 方法来为一个元素添加事件监听器。下面是一个简单的示例代码,演示如何使用 `addEventListener()` 添加一个点击事件监听器:
HTML部分:
```
<button id="myButton">点击我</button>
```
JS部分:
```
const myButton = document.getElementById("myButton");
function buttonClicked() {
console.log("按钮被点击了!");
}
myButton.addEventListener("click", buttonClicked);
```
在上面的代码中,我们首先通过 `document.getElementById()` 方法获取了一个名为 `myButton` 的按钮元素,然后定义了一个名为 `buttonClicked()` 的函数,它会在按钮被点击时执行。
接着,我们使用 `addEventListener()` 方法为 `myButton` 元素添加了一个点击事件监听器。这个监听器会在按钮被点击时调用 `buttonClicked()` 函数。
当用户点击按钮时,`buttonClicked()` 函数就会被执行,并输出一条信息到控制台。
相关问题
js写ros话题通讯代码实例
以下是一个用JavaScript编写的ROS话题通讯代码示例:
```javascript
// 引入ROS库
const ROSLIB = require('roslib');
// 创建ROS连接
const ros = new ROSLIB.Ros({
url: 'ws://localhost:9090'
});
// 监听连接事件
ros.on('connection', function() {
console.log('ROS连接成功');
});
ros.on('error', function(error) {
console.log('ROS连接出错:', error);
});
ros.on('close', function() {
console.log('ROS连接已关闭');
});
// 创建话题
const topic = new ROSLIB.Topic({
ros: ros,
name: '/chatter',
messageType: 'std_msgs/String'
});
// 发布消息
const message = new ROSLIB.Message({
data: 'Hello, ROS!'
});
topic.publish(message);
// 订阅消息
topic.subscribe(function(message) {
console.log('收到消息:', message.data);
});
```
这段代码实现了以下功能:
1. 连接到ROS服务器;
2. 创建一个名为`/chatter`的话题;
3. 发布一条消息`Hello, ROS!`;
4. 订阅该话题并打印收到的消息。
需要注意的是,这段代码依赖于ROS的JavaScript库`roslib`,需要通过npm安装。
Video js监听视频失效事件
在 Video.js 中,可以通过监听 `error` 事件和 `loadeddata` 事件来检测视频是否成功加载和播放。当视频加载失败时,将触发 `error` 事件;当视频成功加载并准备好播放时,将触发 `loadeddata` 事件。
下面是一个示例代码,演示如何使用 Video.js 监听这两个事件:
```javascript
var player = videojs('my-video');
player.on('error', function() {
console.log('视频加载失败');
});
player.on('loadeddata', function() {
console.log('视频已准备就绪');
});
```
在这个示例中,我们使用 `videojs` 函数创建了一个 Video.js 播放器实例,并监听了 `error` 和 `loadeddata` 事件。当事件触发时,会输出日志信息。
你也可以使用其他事件来检测视频播放状态,例如 `play`、`pause`、`ended` 等事件。具体可以参考 Video.js 官方文档。