HTML(15-JS常见事件)_html一个标签里面可以用几个事件-优快云博客

本文详细介绍了JavaScript中的事件处理机制，包括单击、双击、按键及鼠标等事件。事件特点强调其为用户触发的延迟执行代码，以松耦合方式连接调用者和创建者。常见应用包括用户输入验证和增加页面动态效果。重点讲解了点击、鼠标移入、移出和移动等交互事件。

事件处理机制

一、JavaScript中的事件

onclick 鼠标单击事件
ondblclick 鼠标双击事件
onchange 表单内元素中的value值发生改变的事件
onload 页面加载完成后的事件
onfocus 获取焦点事件
onblur 丢失焦点事件

二、事件的特点

1、事件也是一段js代码，调用者是用户。
2、事件所代表的代码执行具有延迟性。
3、事件机制以一种松耦合的方式来连接事件调用者和事件创建者。
给页面中的某个元素绑定某个事件，当某个事件达成时，就会执行事件上绑定的函数；
一个事件上可以绑定多个函数,一个html标签可以绑定多个函数

三事件机制：

事件是对象发送的消息，以发信号通知操作的发生。操作可能是由用户交互（例如鼠标单击）引起的，也可能是由某些其他的程序逻辑触发的。
为什么要使用JavaScript的事件呢？主要有下面的两个用途：
1．验证用户输入窗体的数据。
2．增加页面的动感效果。

#四 JavaScript事件：
在浏览器中，通过事件与用户进行交互。

常用的事件：
点击事件

单击事件

var body = document.querySelector('body');
body.onclick = function(event){
console.log(event)
var h1 = document.createElement("h1");
h1.innerHTML = "helloworld";
body.appendChild(h1);
}

双击事件

var h1 = document.querySelector('h1');
h1.ondblclick= function(e){
console.log(e)
h1.style.background = "yellowgreen"
}

按键按下事件

var body = document.body;
body.onkeydown = function(e){
console.log(e)
var h1 = document.createElement('h1')
h1.innerHTML = "onkeydown:"+e.key;
body.appendChild(h1);
}

按键弹起事件

body.onkeyup = function(e){
console.log(e)
var h1 = document.createElement('h1')
h1.innerHTML = "onkeyup:"+e.key;
body.appendChild(h1);
}

按键按下事件

body.onkeypress = function(e){
console.log(e)
var h1 = document.createElement('h1')
h1.innerHTML = "onkeypress:"+e.key;
body.appendChild(h1);
}

鼠标相关事件

var d1 = document.querySelector("#d1");

将鼠标移入到某个元素

d1.onmouseenter = function(e){
d1.style.background = "purple"
}

将鼠标从某个元素上移出

d1.onmouseleave = function(e){
d1.style.background = "pink"
}

鼠标在某个元素上移动

d1.onmousemove = function(e){
console.log(e)
var circle = document.createElement("div")
circle.className = "circle"
d1.appendChild(circle)
circle.style.left = e.pageX +"px";
circle.style.top = e.pageY +"px";
}

输入内容事件

 <body>
        <input type="text" name="u" id="u" value="">
        <h1></h1>
        <input type="text" name="y" id="y" value="">
        <h3>验证码是：xxy</h3>
        <script>
            // 在h1标签上显示输入框输入的内容
            var inputDom = document.querySelector("#u")
            inputDom.oninput = function (e) {
            
                document.querySelector("h1").innerHTML = inputDom.value;
            }
           
            var inputYzm = document.querySelector("#y")
            inputYzm.oninput = function (e) {
                if (inputYzm.value == "xxy") {
                    inputYzm.style.background = "red"
                } else {
                    inputYzm.style.background = "yellow"
                }
            }
        </script>
 <body>