12-事件

事件

        - 事件介绍:

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

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

        - 事件三要素

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

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

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

事件对象

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

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

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

        3. 获取事件对象

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

                更改事件对象名

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

        4. 事件对象兼容性

                非IE浏览器

                IE浏览器

                window.event

鼠标事件

表单事件

       表单提交事件

                submit

        表单提交事件 - 默认行为

        1. 触发表单提交事件

                submit 是表单form元素

        作用:

                表单验证

                        - 非空验证

                                表单输入框内容不能为空

        2. 默认行为

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

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

          阻止表单默认行为

                         e.preventDefault()

焦点事件

        focus 获取焦点事件        

        blur 失去焦点事件

<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     按住

<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        窗口尺寸改变事件

拖动事件

<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>

最后

以上就是小巧小虾米为你收集整理的12-事件的全部内容，希望文章能够帮你解决12-事件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。