12-事件

109 阅读 0 评论 72 点赞

我是靠谱客的博主小巧小虾米，这篇文章主要介绍12-事件，现在分享给大家，希望可以做个参考。

事件

- 事件介绍:

当我们点击一个按钮的时候，会弹出一个对话框。

在JavaScript中， “点击”这个事情就看作一个事件。“弹出对话框”其实就是我们在点击事件中做的一些事。

- 事件三要素

事件源 - 触发事件的元素 ->如:按钮

事件类型 - 事件如何触发，点击，双击，移动 .... 如: click 点击事件

事件处理函数 - 事件做什么、

事件对象

1. 处理事件，与事件相关的

2. 当触发事件，自动生成一个事件对象

window-打开浏览器窗口生成window对象

3. 获取事件对象

在事件处理函数中获取名为event

更改事件对象名

事件处理函数定义一个形参，接收事件对象

4. 事件对象兼容性

非IE浏览器

IE浏览器

window.event

鼠标事件

mouseover	鼠标移入
mouseout	鼠标移出
mousemove	鼠标移动事件

表单事件

表单提交事件

submit

表单提交事件 - 默认行为

1. 触发表单提交事件

submit 是表单form元素

作用:

表单验证

- 非空验证

表单输入框内容不能为空

2. 默认行为

执行action属性指定的url地址跳转，同时获取表单输入框内容以名称值对形式做为参数传递

https://www.xxx.com/?username=admin&password=123

阻止表单默认行为

e.preventDefault()

焦点事件

focus 获取焦点事件

blur 失去焦点事件

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<form action="">
        <input type="text" placeholder="请输入用户名" name="username" /><br />
        <input type="password" placeholder="请输入密码" name="password" /><br />
        <input type="file" name="headerimg">
        <input type="submit" value="确定" id="login" />
    </form>

    <script>
        var usernameInput = document.querySelector('input[name="username"]')
        usernameInput.onfocus = function(){
            console.log('获取焦点')
        }

        usernameInput.onblur = function(){
            console.log('失去焦点')
            var username = usernameInput.value
            if(username === ''){
                alert('用户名不能为空!')
            }
        }
    </script>

键盘事件

keyup 抬起

keydown 按下

keypress 按住

复制代码

1
2
3
4
5
6
7
8
9
10
<h2>键盘事件</h2>
    <script>
        document.onkeyup = function(e){
            e = e || window.event  // 兼容ie
            var keyCode = e.keyCode || e.which  // 兼容FireFox2.0
            if(e.ctrlKey && keyCode === 32){
                alert('登录成功')
            }
        }
    </script>

浏览器相关事件

load 文档加载完成事件

scroll 滚动事件

resize 窗口尺寸改变事件

拖动事件

复制代码

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
<style>
            *{padding: 0;margin: 0;}
            div{
                position: relative;
                width: 100px;
                height: 100px;
                background-color: skyblue;
            }
</style>

<div></div>
		<script>
            var divEle = document.querySelector('div')
			// 左键按下
			divEle.onmousedown = function () {
				console.log('mousedown')

				// 鼠标移动事件
				document.onmousemove = function (e) {
					e = e || window.event
                    var x = e.clientX
                    var y = e.clientY
					console.log('x : ', e.clientX, ' y :', e.clientY)
                    divEle.style.left = x + 'px'
                    divEle.style.top = y + 'px'
				}
			}
			// 左键抬起
			document.onmouseup = function () {
				console.log('mouseup')
				document.onmousemove = null
			}
		</script>