JavaScript DOM 高级事件绑定和事件委托

最新推荐文章于 2023-09-28 06:48:42 发布

玖商

最新推荐文章于 2023-09-28 06:48:42 发布

阅读量1.2k

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端 html 开发语言

本文链接：https://blog.csdn.net/weixin_58139900/article/details/121201129

版权

本文详细介绍了JavaScript中的DOM事件，包括事件对象、事件绑定与移除、事件流、阻止事件冒泡和阻止默认行为。特别讨论了事件委托的概念和实现，通过模拟搜索框的应用，阐述如何利用事件冒泡来提高代码效率和可维护性。

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

HTML DOM 事件

HTML DOM 允许 JavaScript 对 HTML 事件作出反应： JavaScript 能够在事件发生时执行，比如当用户点击某个 HTML 元素时。

HTML 事件的一些例子：

当用户点击鼠标时
当网页加载后
当图像加载后
当鼠标移至元素上时
当输入字段被改变时
当 HTML 表单被提交时
当用户敲击按键时

1.事件对象

事件对象就是当前事件触发的详细信息，浏览器会将这些信息以一个对象的形式当做实参传递给事件处理函数的第一个形参
事件对象也会存储在浏览器顶层对象中 window.event

鼠标事件onmousedown对象

//直接给文档绑定
document.onmousedown = function (event) {
    // event:IE8及以下不兼容  浏览器没有传递实参 默认值是undefined
    // 事件对象的兼容处理  
    event = event || window.event;
    console.log(event);

    // 事件对象的属性
    //target 事件源  事件触发的源头   
    // 不兼容 IE8及以下没有这个属性
    // 兼容处理
    var target = event.target || event.srcElement;
    console.log(target);

    // 事件类型
    // type
    console.log(event.type);

    // 位置属性
    // clientX  / clientY  距离可视区域左上角距离
    console.log(event.clientX, event.clientY);

    // pageX / pageY  距离文档(body)的距离 
    // IE8及以下不兼容  没有这个属性
    console.log(event.pageX, event.pageY);  

    // screenX / screenY  距离电脑屏幕(左上角)的距离
    console.log(event.screenX, event.screenY);


    // altKey / ctrlKey / shiftKey    当前事件触发是否按下了对应的键 默认值都是flase,按下了值为true
    console.log(event.altKey, event.ctrlKey, event.shiftKey);
    if (event.altKey) {
        console.log("hello");
    }

键盘事件对象

onkeydown :键盘按下
onkeypress:键盘按着
onkeyup：键盘抬起

键盘事件一般给document 或表单输入框

target 事件源事件触发的源头

document.onkeydown = function (ev) {
    // 事件对象兼容处理
    // event:IE8及以下不兼容  浏览器没有传递实参 默认值是undefined
    ev = ev || window.event;
    console.log(ev); //KeyboardEvent{...}

    // 事件对象的属性
    //target 事件源  事件触发的源头   
    // 不兼容 IE8及以下没有这个属性
    // 兼容处理
    var target = ev.target || ev.srcElement;
    console.log(target);

    // key 键值  不兼容IE8及以下没有这个属性
    console.log(ev.key);

    // keyCode 键盘码  ASCII值
    // onkeydown 和 onkeyup 不区分大小写 都是大写的ASCII值  onkeypress区分大小写
    console.log(ev.keyCode);

    // altKey / ctrlKey / shiftKey    当前事件触发是否按下了对应的键 默认值都是flase,按下了值为true
    console.log(ev.altKey, ev.ctrlKey, ev.shiftKey);
    if(ev.keyCode == 66 && ev.altKey){
        console.log("alt + b");
    }


    // type  事件类型
    console.log(ev.type);

}

例子：按键盘移动div

 <div></div>
    <script>
        var div = document.getElementsByTagName("div")[0];

        // 绑定键盘事件
        document.onkeydown = function(ev){
            // 事件对象兼容处理
            ev =ev || window.event;

            console.log(ev.keyCode);

            //w:87
            //s:83