鸩羽千夜

12event.md

goer ... 2022-01-05 Javascript
  • Javascript
 大约 3 分钟
事件

[toc]

# 事件

事件挺多的，而且很重要

# 1. 静态事件

// 静态事件
<img src="one.jpg" alt='' onclick="alert('gogogo')">
// 当前对象可以使用this代替
<img src='one.jpg' alt='我不是狗' onclick='alert(this.alt)'>

// 还可以之间设置其他标签属性
<p id="pp1">这是一个p标签</p>
<img src="one.jpg" alt="这是一个小狗头11" onclick="pp1.style.border='5px solid red';" />
1
2
3
4
5
6
7
8

# 2.动态绑定

触发效果再script标签内

<img src="one.jpg" alt='' id="one" onclick="a2(this)">

function a2(a){
    alert(a.alt)  //弹出自己的alt属性
}

//修改图片
var f5=true;
img2.onclick=function(){
    //事件触发之后的效果在这里执行
    //这里面的this代表当前对象img2
    if(f5){
        this.src='images/2.jpg';
        f5=false;
    }else{
        this.src='images/1.jpg';
        f5=true;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 3.事件

改变任何样式 ，可以修改css属性和值

# (1)点击事件

onclick 点击触发事件

// <button id='box'>

box.onclick = function(){
    alert(11);
}
1
2
3
4
5
# (2) 双击事件

ondblclick 鼠标双击事件

// <button id='box'>

box.ondblclick = function(){    alert(11);}

//双击修改 class名
box.ondblclick = function(){
    this.className = 'bbb' //设置style bbb样式
1
2
3
4
5
6
7
8
# (3)鼠标移入和移出事件

onmouseover : 移入

onmouseout: 移出

//很多图片

var img=document.querySelectorAll('img');

for(var i=0; i<img.length; i++){
    img[i].onmouseover = function(){
        this.style.opacity = '0.5';
    }
    img[i].onmouseout = function(){
        this.style.opacity = '1';
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
# (4)获取焦点和失去焦点

onfocus : 获取焦点

onblur : 失去焦点

input框 带边框线 outline:none;

// <input id="inp" type="text" style="outline:none;">
// 可以修改页面任何标签的样式

inp.onfocus=function(){
    this.style.borderColor = 'blue';
    img[2].style.width = '300px';
}
inp.onblur=function(){
    this.style.borderWidth='4px';
    img[2].style.display = none;
}
1
2
3
4
5
6
7
8
9
10
11

# (5)内容发生改变

onchange 一般用于下拉框和上传文本框

//<input type='file' id="file">
//<div id="box"></div>

//上传文件，和下拉框就会触发事件
file.onchange = fuction(){
    box.innerHTML = this.value; //文件路径
}
1
2
3
4
5
6
7

# (6) 键盘按下和松开事件

onkeydown 按下

onkeyup 松开

//<input type='text' id="tex">
//<div id="box"></div>

tex.onkeydown = function{
    box.innerHTML = this.value;
}
tex.onkeyup =function{
    box.innerHTML = this.vlaue;
}
1
2
3
4
5
6
7
8
9

# (7) 表单提交事件

onsubmit ： 用于表单验证

// 单选框和多选框默认选中
var radio = document.querySelectorAll('input[name="games"]');
radio[3].checked = true;

// 表单验证
<form action="地址" method="方式" id="fff">

    
   
</form>
fff.onsubmit=function(){
	//提交就
	alert('提交成功')
	//失败就不提交
	return false;
}
 

// 最少选中一个
fff.onsubmit = function(){
	var a = false;
	for(var i=0; i<radio.length; i++){
        if(radio[i].checked){
            a=trun;
        }
    }
	if(a){
        //有选中就提交
    }eles{
        alert('最少选一个')
        return false;  //不能提交
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

# (8)模拟事件

click() 模拟点击事件

focus()模拟表单提交

submit()模拟表单提交

//1.`click()` 模拟点击事件
<a id="baidu" href="www.baidu.com">
<p class="p">模拟带你就</p>
//点击p跳转到百度
p.onclick =function(){
    baidu.click(); 
}


//2.`focus()`模拟表单提交
pp.onclick =function(){
    //点击pp可以让光标在input聚焦
    input.focus();
}

//3.`submit()`模拟表单提交
file.onchange = function(){
    //文件上传，内容改变，直接提交表单
    ff.submit()
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# (9)获取到当前键盘值

document.onkeydown = keyDown;  // 事件的初始化
//keyDown()函数有一个隐藏的变量--一般的，我们使用字母“e”来表示这个变量。
function keyDown(e){
    console.log(e)
    console.log(e.key,e.keyCode)
}

13reg.md