2、DOM事件

学不死就往死里学

已于 2023-05-15 18:42:00 修改

阅读量140

点赞数

分类专栏： javascript 文章标签： javascript 前端

于 2023-05-12 21:26:11 首次发布

本文链接：https://blog.csdn.net/hzg_hou/article/details/130650511

版权

javascript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中的鼠标事件，包括点击、双击、悬浮等，并提供了相关案例。接着讨论了键盘事件，强调了事件对象参数的关键属性。此外，还涵盖了焦点事件在表单交互中的应用，以及文本输入oninput事件和change事件在表单验证中的重要性。最后，文章探讨了innerText和textContent在处理文本内容时的浏览器兼容性问题，并提供了一个兼容性封装函数示例。

摘要由CSDN通过智能技术生成

一. 鼠标事件

1. 鼠标事件列表

事件名

功能

语法

|
| — | — | — |
| onclick | 鼠标左键单击 | DOM对象.onclick = function(){} |
| ondblclick | 鼠标左键双击 | DOM对象.ondblclick = function(){} |
| oncontextmenu | 鼠标右键单击 | DOM对象.οncοntextmenu= function(){} |
| onmouseenter | 鼠标进入 | DOM对象.οnmοuseenter=function(){} |
| onmouseleave | 鼠标离开 | DOM对象.onmouseleave = function() {} |
| onmouseover | 鼠标悬停进入 | DOM对象.onmouseover = function() {} |
| onmouseout | 鼠标移除 | DOM对象.onmouseout = function(){} |
| onmousedown | 鼠标按下 | DOM对象.onmousedown = function() {} |
| onmouseup | 鼠标抬起 | DOM对象.onmouseup = function() {} |
| onmousewheel | 鼠标滚轮 | DOM对象.onmousewheel = function() {} |
| onmousemove | 鼠标移动 | DOM对象.onmousemove = function() {} |

2. 鼠标事件案例

鼠标进入高亮显示

用户登录.gif

鼠标进入tab栏切换

用户登录.gif

鼠标进入显示二级菜单

用户登录.gif

幽灵按钮

用户登录.gif

翻牌效果

用户登录.gif

全选反选
- checked属性
- disabled属性

用户登录.gif

同意注册

用户登录.gif

二. 键盘事件

1. 键盘事件列表

事件名称	作用	语法
onkeyup	按键抬起	DOM对象.onkeyup = function(){}
onkeydown	按键落下	DOM对象.onkeydown = function() {}

2. 事件对象参数

a) 概念及作用

事件对象参数本质上就是事件回调函数中的一个形参,该形参是以对象的形式存在的.
任何事件,都有事件对象参数,事件对象参数可以设置也可以不用设置
事件对象参数保存了事件在执行过程中的相关信息
键盘事件对象参数,保存了用户的按键信息
鼠标事件对象参数,保存了鼠标的点击位置信息
事件对象参数阻止标签默认行为
事件对象参数阻止事件冒泡

b) 键盘事件对象参数

事件对象参数.key
事件对象参数.code
事件对象参数.keycode

区别:

事件对象参数.keycode ASCLL码不推荐使用
事件对象参数.key 字符串,用来描述当前按键
事件对象参数.code 字符串,表示按键的唯一识别码

c) 课堂练习

用户按下回车页面显示输入内容

用户登录.gif

按键移动

三. 焦点事件

1. 焦点事件列表

事件名称	作用	语法
onfocus	获取鼠标焦点	DOM对象.onfocus = function(){}
onblur	失去鼠标焦点	DOM对象.onblur = function() {}

2) 课堂案例

小米搜索框

用户登录.gif

验证用户名和密码

用户登录.gif

四. 文本输入事件

事件名称: oninput
语法: DOM对象.oninput = function() {}
课堂案例
统计用户输入内容文字个数

用户登录.gif

五.change事件

事件名称: onchange
语法: DOM对象.onchange = function( ) {}
应用场景: 文件上传,表单验证
课堂案例
change事件验证用户名和密码

用户登录.gif

六.浏览器兼容性初体验

a) innerText 和 textContent

1. 作用

innerText 和 textContent都可以用来获取标签中的内容
innerText 和 textContent都可以给标签设置内容

2.区别

innerText获取标签中的纯文本,不包含任何的标签或者换行符
innerText无法获取通过visibility: hidden;隐藏后元素的内容
innerText 在IE低版本浏览器中可以使用
textContent获取标签中的文本包含换行符
textContent可以获取通过visibility: hidden;隐藏后元素的内容
textContent在IE浏览器中无法正常使用

3.封装

封装目的:
封装一个兼容函数,保证用户在不同浏览器中都能正常通过innerText或者textContent给标签设置内容获取内容

封装实现

<body>
    <div id="mydiv">
        呵呵呵
    </div>
    <script>
        // 0. DOM元素
        // 1. 如果是一个参数,则表示获取当前元素的内容
        // 2. 如果是两个参数,则表示给当前元素设置内容
        function pub_Text(element,insert_v) {
            //a) 先判断当前函数有几个参数?
            var num = arguments.length;
            //b) 判断操作
            if(num == 1) {
              // 获取内容
              if(!element.textContent) {
                 return element.innerText;
              }else {
                 return element.textContent;
              } 
            }else if(num == 2) {
              if(!element.textContent) {
                 element.innerText = insert_v;
              }else {
                 element.textContent = insert_v;
              }
            }
        }
        
        var div = document.getElementById('mydiv');
        console.log(pub_Text(div));



    </script>
</body>