How to trigger javascript code? three methods

JavaScript is a language for writing interactive web pages that allows users to interact with the page by adding JavaScript code to it. JavaScript code can be written directly in the HTML file or separately in an external .js file. Not only that, but JavaScript libraries are packed with useful functions and methods to simplify the development process.

JavaScript is widely used in current Internet development, and there are many ways to trigger JavaScript. In this article, we'll cover how to trigger JavaScript.

1. Triggering JavaScript through events

JavaScript can be triggered through events, such as clicking a button, entering a form, etc. The following are some commonly used event triggering methods:

1. onClick() method

Add the onClick() method to the HTML button to trigger the JavaScript function when the button is clicked. The sample code is as follows:

<button onClick="myFunction()">点击我</button>

<script>
function myFunction() {
  alert("Hello World!");
}
</script>

2. addEventListener() method

You can also use the addEventListener() method to add event listeners to HTML elements to implement multiple event listening. For example, when the mouse moves in or out of an element, you can trigger a JavaScript function for the corresponding event. The sample code is as follows:

<button id="myBtn">点击我</button>

<script>
document.getElementById("myBtn").addEventListener("mouseenter", mouseEnter);
document.getElementById("myBtn").addEventListener("mouseleave", mouseLeave);

function mouseEnter() {
  document.getElementById("myBtn").style.backgroundColor = "blue";
}

function mouseLeave() {
  document.getElementById("myBtn").style.backgroundColor = "red";
}
</script>

2. Trigger JavaScript through timer

You can also use timer to trigger JavaScript function, for example, use the setInterval() method. The following is an example where a Hello World dialog box pops up every second after the page is opened.

<script>
setInterval(function() {
  alert("Hello World!");
}, 1000);
</script>

3. Triggering JavaScript by operating DOM

It is very common for JavaScript to operate DOM, and it is easy to trigger corresponding events. For example, when you use JavaScript to replace the text of an element on HTML, the corresponding event can be triggered. The sample code is as follows:

<div id="myDiv">Hello World!</div>

<script>
document.getElementById("myDiv").addEventListener("click", changeText);

function changeText() {
  document.getElementById("myDiv").innerHTML = "新的文本";
}
</script>

The above are some common ways to trigger JavaScript. With the continuous updating and development of technology, many new methods have emerged. Mastering these skills can enable us to better develop more interactive web pages.

The above is the detailed content of How to trigger javascript code? three methods. For more information, please follow other related articles on the PHP Chinese website!