javascript事件

最新推荐文章于 2024-09-14 19:44:09 发布

陈序媛圈圈

最新推荐文章于 2024-09-14 19:44:09 发布

阅读量85

点赞数

分类专栏： DOM 事件 javascript 文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/weixin_44825338/article/details/120774882

版权

javascript 同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

DOM

4 篇文章 0 订阅

订阅专栏

事件

1 篇文章 0 订阅

订阅专栏

事件由事件源、事件类型、事件处理函数组成。
事件源就是触发谁的事件，事件类型是点击或移动等，如click，事件处理函数就是事件过程中做的一些事。

事件对象event：一个事件被触发时会自动创建一个事件对象event，事件对象是用来描述事件信息的。获取事件对象存在兼容性问题，获取事件对象的兼容性写法如下：

element.onclick = function(e){
	e = e || window.event //ie低版本不支持e，所以用window.event
}

事件光标位置

相对于浏览器窗口的位置
e.clientX e.clientY
相对于页面的位置
e.pageX e.pageY
相对于事件源自身的位置
e.offsetX e.offsetY

事件类型

鼠标事件
click 点击事件
dbclick 双击事件
contextmenu 鼠标右键按下事件
mouseover 鼠标移入事件
【mouseenter也是鼠标移入事件，但它不支持冒泡，mouseover支持冒泡】
mouseout 鼠标移出事件
【mouseleave也是鼠标移出事件，但是不支持冒泡事件，mouseout支持冒泡】
mousedown 鼠标右键按下事件
mouseup 鼠标左键抬起事件
mousemove 鼠标移动事件
设置鼠标事件不起作用：设置样式pointer-events:none 可以解决光标闪烁问题。
键盘事件
事件源是document节点对象，获取键码的兼容性写法：e.keyCode || e.which. 回车键的键码是13.
浏览器事件
事件源是window。
onscroll 滚动事件
onload 页面加载事件，页面资源加载完后执行
onresize 页面大小事件
表单事件
（1） submit 表单提交事件，事件源是form表单，事件类型是submit。
点击表单提交按钮时，会默认执行表单提交事件，即触发表单提交事件和执行action动作，action动作会把表单输入的内容获取拼接到本身的url之后形成一个新的地址并跳转。
表单提交验证中的表单验证，有非空验证、密码难度验证、邮箱验证等等。给程序设置表单验证，如果验证不成功，就不执行默认的action动作，但是默认的动作要如何阻止呢？有两种方法：①把表单提交按钮类型type设置为普通按钮button。②阻止默认行为，在事件中设置e.preventDefault()，阻止之后想要跳转页面可以用window对象的location方法的href属性进行跳转。
(2) change内容转换事件
绑定该事件后，输入框内容改变就会触发该事件，像我们购物车里手动修改数量就是用的该事件。

tableEle.addEventListener('change',function(e){
    e = e || window.event
    let target = e.target || e.srcElement
    if(target.getAttribute('name') == 'amount'){
      let num = target.value
      if(isNaN(num) || num<0){
        alert('请输入大于0的数字值！')
        num=0
      }
}

焦点事件
焦点事件不支持冒泡，因此不能进行事件委托。
blur 失去焦点事件
focus 获得焦点事件
这两个事件常常用来进行表单验证，失去焦点时验证输入内容是否合法。

<!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>Document</title>
</head>
<body>
    <form action="">
        用户名：<input type="text" name="username" id="">
        <br>
        密&emsp;码：<input type="password" name="password" >

    </form>

    <script>
        var userName = document.querySelector('input[name="username"]')
        userName.onblur = function(){
            var uname = userName.value
            if(!uname){
                alert('用户名不能为空！')
            } 
        }
    </script>
</body>
</html>