js中调用页面的方法有哪些方法

function greet() {
    console.log("Hello, World!");
}

greet(); // 输出: Hello, World!

<button id="myButton">Click me</button>

<script>
document.getElementById('myButton').addEventListener('click', function() {
    alert('Button was clicked!');
});
</script>

<button onclick="alert('Button was clicked!')">Click me</button>

window.myFunction = function() {
    console.log("This is a global function.");
};

window.myFunction(); // 输出: This is a global function.

document.getElementById('myElement').style.color = 'red';

import React from 'react';

class MyComponent extends React.Component {
    handleClick = () => {
        alert('Button was clicked!');
    }

    render() {
        return <button onClick={this.handleClick}>Click me</button>;
    }
}

<template>
<button @click="handleClick">Click me</button>
</template>

<script>
export default {
    methods: {
        handleClick() {
            alert('Button was clicked!');
        }
    }
}
</script>

document.addEventListener('DOMContentLoaded', function() {
    // 确保DOM完全加载后再绑定事件
    document.getElementById('myButton').addEventListener('click', function() {
        alert('Button was clicked!');
    });
});