evento js (evento)
(El nacimiento de js se basa en la programación dirigida por eventos)
(1) evento
El usuario actúa a través de varios comportamientos (botones, clics del mouse, desplazamiento del mouse...) para provocar la ejecución de códigos js relacionados.
Tres elementos de un evento:
- Origen del evento: la persona que se desencadena por el evento, por lo general vincula el evento
- Objeto de evento (evento): Este objeto contiene toda la información relacionada con el evento
- Controlador de eventos: el código que maneja el evento
<1> Definir eventos (tres formas)
[1] Modo DOM0: se requiere la etiqueta html en el atributo xxxx para configurar
Desventajas: js y html están acoplados, lo que viola el principio de separación de tres capas de w3c; de esta manera, el objeto de evento no se puede obtener en la función de procesamiento de eventos; el puntero this en la función de evento apunta al objeto winodw
PD:
test01(this) // Al enlazar un evento, puede pasar esto a la función de evento, y la función de evento necesita pasar este puntero this;
console.log(this) // y this en la función apunta directamente al objeto de la ventana
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function test01(node){
alert("这里是美女，只不过你看不见")
}
// console.log(this);
console.log(node);
// node：事件源
</script>
<title>js事件</title>
</head>
<body>
<button onclick="test01(this);">点击一下，你就知道</button>
<!-- 双引号中，引入javascript代码 -->
</body>
</html>[2] modo DOM2
Implica principalmente dos métodos para manejar la operación de especificar y eliminar controladores de eventos: addEventListener() y removeEventListener() .
- Vinculación de eventos dinámicamente a través de objetos DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM2</title>
</head>
<body>
<button id="box">美女不在这</button>
<a href="#" class="msg">可以在这找找看</a>
<a href="#" class="msg">可以在这找找看</a>
<a href="#" class="sss">你喜欢美女吗</a>
<a href="#" class="sss">你喜欢美女吗</a>
<a href="#" class="sss">你喜欢美女吗</a>
<a href="#" class="sss">你喜欢美女吗</a>
<script>
// DOM对象（）
let box = document.getElementById("box");
// 通过DOM对象，动态绑定事件
box.onclick = function (ev){
// PS：动态绑定事件的方式，第一个参数就是事件对象
alert("那美女在哪？")
console.log(ev); // 事件对象
console.log(ev.target); // 事件源
console.log(this); // 事件源，这种事件中，this指向事件源
console.log(`x轴坐标${ev.pageX},y轴坐标${ev.pageY}`)
}
// 用className单个绑定，需确定下标
let msg = document.getElementsByClassName("msg");
console.log(msg);
msg[0].onclick = function(){
alert("这里也没有美女。")
}
// 多个同时绑定，需采用循环
let sss = document.getElementsByClassName("sss");
for(let i = 0;i < sss.length;i++){
sss[i].onclick = function(){
alert(`md,我喜欢的不得了,这是我第${i + 1}个按钮`);
}
}
</script>
</body>
</html>
- También hay una forma de escuchar eventos, vincular eventos
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绑定事件</title>
</head>
<body>
<a href="http://www.baidu.com" id="go">百度</a>
<button id="box">这里有个祢豆子</button>
<script>
let box = document.getElementById("box");
// addEventListener：事件监听
box.addEventListener("click",function(e){
alert("点我干嘛");
console.log(this);
console.log(e.target);
// 这个方法会取消冒泡 IE浏览器
// e.cancelBubble();
// 停止标签继续向上冒泡（阻止冒泡） w3c
// ev.stopPropagation();
},true); // true：第三个参数true决定是否开启捕获流
document.querySelector("#go").onclick = function(ev){
alert("还是会去百度");
// 阻止标签的默认行为
ev.preventDefault();
}
</script>
</body>
</html>
[3] Controladores de eventos HTML
Agregue controladores de eventos directamente en el código HTML
<input id= "btn" value= "按钮" type= "button" onclick= "showmsg();" >
<script>
function showmsg(){
alert( "HTML添加事件处理" );
}
</script><2> Clasificación de flujos de eventos
Flujo burbujeante : burbujeo significa que el evento es recibido inicialmente por el elemento más específico (el nodo con el nivel de anidamiento más profundo en el documento), y luego se propaga hasta el nodo menos específico (documento)
Flujo de captura : la captura es cuando los nodos menos específicos reciben los eventos primero y los nodos más específicos al final.
(2) Eventos comunes
| evento | contenido |
| abortar | Se interrumpió la carga de la imagen |
| en la falta de definición | el elemento pierde el foco |
| en el cambio | El usuario cambia el contenido del campo |
| ondblclick | haga doble clic con el mouse en un objeto |
| onerror | Ocurrió un error al cargar el documento o la imagen |
| enfocado | el elemento se enfoca |
| onkeydown | Se presiona una tecla del teclado |
| onkeypress | Se presiona o se mantiene presionada una tecla del teclado |
| encendido | Se suelta una tecla del teclado |
| cargar | Una página o imagen ha terminado de cargarse |
| en el mouse hacia abajo | Se presiona un botón del ratón |
| onmovemove | el raton se mueve |
| fuera del ratón | El ratón se mueve de un elemento. |
| el ratón por encima | El ratón se mueve sobre un elemento. |
| en el mouse arriba | Se suelta un botón del ratón |
| reinicio | se hace clic en el botón de reinicio |
| sobredimensionar | se cambia el tamaño de la ventana o el marco |
| en seleccionar | se selecciona el texto |
| onsubmit | Se hace clic en el botón enviar |
| en descarga | página de salida del usuario |
(3) Ejemplo de código:
Ejemplo 1: Lotería
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style >
* {
margin: 0;
padding: 0;
}
.container {
width: 800px;
height: 800px;
border: 1px dashed rebeccapurple;
position: absolute;
left: 50%;
margin-left: -400px;
text-align: center;
line-height: 100px;
}
.container .box, .box2 {
width: 300px;
height: 300px;
background: greenyellow;
border-radius: 50%;
margin: auto;
margin-top: 50px;
text-align: center;
line-height: 300px;
}
.box2 {
background: deepskyblue;
}
#show {
font-size: 30px;
color: white;
font-weight: bold;
}
#start {
width: 300px;
height: 50px;
background: palegreen;
}
</style>
<title>抽奖</title>
</head>
<body>
<div class="container">
<div class="box" id="box">
<span id="show">
小礼品
</span>
</div>
<button id="start" onclick="start()">点击开始</button>
</div>
<script>
let start = document.querySelector("#start");
let show = document.querySelector("#show");
let timer = null;
let box = document.querySelector("#box");
let isStop = false;
let nums = ["iphone14","100w","1000w","杯子","大花棉袄","充电宝","欠我五元","谢谢惠顾"];
start.onclick = function(){
if(!isStop){
isStop = true;
timer = setInterval(function(){
let index = Math.floor(Math.random()*nums.length);
show.innerHTML = nums[index];
box.className = "box2";
start.textContent = "停止抽奖";
},100);
} else{
isStop = false;
window.clearInterval(timer);
box.className = "box";
start.textContent = "开始抽奖";
}
}
</script>
</body>
</html>
Ejemplo 2: arrastrando div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box{
width: 150px;
height: 150px;
border: 1px dashed rosybrown;
position: absolute; /* 进行绝对定位 */
left: 300px;
top: 200px;
}
</style>
<title>div的拖动</title>
</head>
<body>
<div class="box"></div>
<script>
let _box = document.querySelector(".box");
_box.onmousedown = function(e){
let x = e.pageX-_box.offsetLeft;
let y = e.pageY-_box.offsetTop;
document.onmousemove = function(ev){
let x2 = ev.pageX - x;
let y2 = ev.pageY - y;
_box.style.left = x2 + "px";
_box.style.top = y2 + "px";
}
}
_box.onmouseup = function(){
document.onmousemove = null;
}
</script>
</body>
</html>