DOM事件

最新推荐文章于 2024-09-03 17:02:58 发布

不会代码的二玲吖

最新推荐文章于 2024-09-03 17:02:58 发布

阅读量66

点赞数

分类专栏： js 文章标签： html5 javascript css

本文链接：https://blog.csdn.net/weixin_53915382/article/details/120332658

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

用户使用js和浏览器交互

1.事件三要素：
    1）事件源（event target）
    2）事件处理函数（event handler）
    3）事件对象（event object）
同一个元素上绑定同一种事件类型，后者会覆盖前者

2.绑定事件的方式

    1）btn.onclick = function(event){}
       btn.οnclick=null     事件解绑
    2）<div id="btn" οnclick="handler(this)">点我吧</div>
       <script>function handler(){} </script>

    3）addEventListener()
             * 通过这个方法也可以为元素绑定响应函数
             * 参数：
             * 1.事件的字符串，不要on
             * 2.回调函数，当事件触发时，该函数会被调用
             * 3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false
             * 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数
             * 这样当事件被触发时，响应函数将会按照函数的绑定顺序执行
             * 这个方法不支持IE8及以下的浏览器
       attachEvent()
             * 在IE8中可以使用attachEvent()来绑定事件
             *参数：
             * 1.事件的字符串，要on
             * 2.回调函数
             * 这个方法也可以同时为一个事件绑定多个响应函数
             * 不同的是它后绑定先执行，执行顺序和addEventListener()相反

3.解绑事件

    btn.οnclick=null     事件解绑
    removeEventListener()   事件解绑
        这个方法不支持IE8及以下的浏览器
        参数：
            要删除的事件名，不加on前缀
            作为事件处理的函数
            布尔值：true在捕获阶段调用事件处理程序；false在冒泡阶段调用【默认】
        可以添加多个事件处理程序，并且按照添加她们的顺序触发。移除事件传入的参数与添加处理程序时使用的参数相同，添加事件时如果使用匿名函数将无法删除
    detachEvent()   事件移除
        在IE8中可以使用detachEvent()来移除事件
        参数：
            事件类型，加on前缀
            事件处理函数
        事件处理程序都被添加到冒泡阶段

4.事件冒泡(由内向外)

事件开始由最具体的元素接收，然后逐级向上传播到不具体的节点

<!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>
    <style>
        #box1{
            width: 500px;
            height: 500px;
            background-color:rgba(220, 7, 240, 0.411);
        }
        #box2{
            width: 400px;
            height: 400px;
            background-color: rgb(14, 176, 240);
        }
        #box3{
            width: 300px;
            height: 300px;
            background-color: thistle;
        }
    </style>

</head>
<body>
    <div id="box1">
        <div id="box2">
            <div id="box3">
            </div>
        </div>
    </div>    
    <a href="#" id="baidu">点击百度</a>
</body>
<script>
    var box1=document.getElementById('box1');
    var box2=document.getElementById('box2');
    var box3=document.getElementById('box3');
    var baidu=document.getElementById('baidu');
    box1.onclick=function(event){
        console.log('box1');
        event.stopPropagation();
    }
    box2.onclick=function(){
        console.log('box2');
    }
    box3.onclick=function(){
        console.log('box3');
    }
    document.body.onclick=function(){
        console.log('body');
    }
    baidu.onclick=function(event){
        alert(999);
        event.preventDefault();
    }
</script>
</html>

5.事件捕获(由外向内)

    不太具体的节点更早接收事件，具体的节点到最后接收事件。
    三个阶段：
        1）捕获阶段
            在捕获阶段时，从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
        2）目标阶段
            事件捕获到目标元素，捕获结束开始在目标元素上触发事件
        3）冒泡阶段
            事件从目标元素向它的祖先元素传递，依次触发祖先元素上的事件

6.事件处理函数

事件就是用户或浏览器自身执行的某种动作，响应某个事件的函数为事件处理程序，
事件处理程序以"on"开头(onclick,onload)

7.事件对象

在触发DOM上的某个事件时，会产生一个事件对象event,这个对象包含着所有与事件相关的信息，包括导致事件的元素，事件的类型以及其他与特定事件相关的信息。

兼容DOM的浏览器默认会将event对象传入到事件处理函数中。

不支持IE8及以下的浏览器

        bubbles   Boolean   事件是否冒泡
        cancelable   Boolean   是否可取消事件默认行为
        currentTarget   Element   事件处理程序当前正在处理事件的那个元素
        eventPhase   Integer   调用事件处理程序的阶段;1捕获 2处于目标 3冒泡
        target       Element   事件真正目标
        type       String   事件类型，需要一个函数，处理多个事件时，可使用该属性。
        preventDefault()   Function          取消事件的默认行为
        stopPropagation()   4Function          取消事件的进一步捕获或者冒泡

IE8及以下的浏览器(window.event)

        cancelBubble Boolean 是否取消事件冒泡,值为true取消冒泡,类似stopPropagation()
        returnValue       Boolean       取消事件默认行为,值为false阻止,类似preventDefault()
        srcElement       Element       事件的目标 target
        type       String       被触发的事件的类型

8.事件类型

1）UI事件

        load
            当页面完全加载后在window上触发，当所有框架加载完时在框架集上触发，当图像加载完毕时在img元素上触发，当嵌入的内容加载完时在<object>触发
        unload
            当页面完全卸载后在window上触发，当所有框架都卸载后在框架集上触发，当嵌入的内容卸载完毕后再<object>上触发,(firefox不支持)
        select
            当用户选择文本框（<input>,<textarea>）中的一个或多个字符时
        change
            在select的下拉列表的选中的选项更改的时候触发
        resize
            当浏览器窗口被调整到一个新的高度或者宽度时，会触发
        scroll
            当用户滚动带滚动条的元素中的内容时，在该元素上触发resize,scroll会在变化期间重复被激发，尽量保持代码简单

2）焦点事件

        blur       元素失去焦点的时候触发
        focus        元素获得焦点的时候触发，不支持冒泡
        //IE支持
        focusin        与focus等价，支持冒泡
        focusout   与blur等价，支持冒泡

3）鼠标与滚轮事件

        click
        点击主鼠标按钮或者按下回车按键的时候触发。只有在一个元素上相继发生mousedown,mouseup事件，才会触发click事件
        dblclick
        双击主鼠标按钮时触发.只有在一个元素上相继触发两次click时间才会触发dbclick事件
        mousedown   任意鼠标按钮按下时触发
        mouseup        释放鼠标按钮触发
        mousemove   鼠标在元素内部移动的时候重发触发
        mousewheel   滚轮事件
        mouseenter   鼠标光标从元素外部首次移动到元素范围内激发，不冒泡

        【不支持子元素】
        mouseleave   在位于元素上方的鼠标光标移动到元素范围之外时触发，
          不冒泡【不支持子元素】
        mouseover   鼠标位于元素外部，将其首次移入另一个元素边界之内时触发

        【支持子元素】
        mouseout     在位于元素上方的鼠标光标移入到另外一个元素中。
        【支持子元素】在被选元素上与mouseleave效果相同

4）键盘与文本事件

        keydown        按下键盘任意键时触发，如果按住不放会重复触发此事件
        keypress       按下键盘字符键时触发，如果按住不放会重复触发此事件
        keyup           释放键盘上键时触发

当键盘事件发生时，event对象的keyCode属性中会包含一个代码与键盘上的特定键对应，对数字字母键，keyCode属性的值与ASCII码中对应的小写字母和数字编码相同

5）相关元素,event特殊属性

        1.客户区坐标位置
        clientX,clientY 事件发生时，鼠标指针在视口中的水平和垂直坐标位置
            用于获取鼠标在当前的可见窗口的坐标
            clientX可以获取鼠标指针的水平坐标
            clientY可以获取鼠标指针的垂直坐标
        2.页面坐标位置
        pageX,pageY 事件发生时，鼠标指针在页面本身而非视口的坐标，页面没有滚动的时候，pageX和pageY的值与clientX和clientY值相等
            pageX和pageY可以获取鼠标相对于当前页面的坐标
            但是这两个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用
        3.获取滚动条滚动的距离
            chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
            火狐等浏览器认为浏览器的滚动条是html的
            var st=document.body.scrollTop || document.documentElement.scrollTop;
            var sl=document.body.scrollLeft || document.documentElement.scrollLeft;
        4.屏幕位置   screenX,screenY
        5.修改键
            值为boolean类型，用来判断对应的按键是否被按下shiftKey，ctrlKey，altKey，metaKey
        6.鼠标按钮
            mousedown,mouseup，该事件的event对象中包含了button属性，表示按下或释放的按钮。
            0表示主鼠标按钮
            1表示中间的滚动按钮
            2表示次鼠标按钮

6）事件委派(事件代理)

将事件绑定在元素的父元素上，通过事件对象的target属性去判断

指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。
事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能

target：event中的target表示的触发事件的对象

<!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>事件代理</title>
</head>
<body>
    <ul id="nav">
        <li>html</li>
        <li>css</li>
        <li>javascript</li>
    </ul>
</body>
<script>
    var li=document.getElementsByTagName('li');
    // li[0].onclick=function(){
    //     alert(1);
    // }
    // li[1].onclick=function(){
    //     alert(2);
    // }
    // li[2].onclick=function(){
    //     alert(3);
    // }

    //事件绑定：将事件绑定在父元素上
    var nav=document.getElementById('nav');
    nav.onclick=function(event){
        //打印事件对象
        console.log(event);
        if(event.target.innerHTML=='html'){
            alert('html');
        }else if(event.target.innerHTML=='css'){
            alert('css');
        }else{
            alert('javascript');
        }
    }

</script>
</html>

不会代码的二玲吖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM事件

用户使用js和浏览器交互1.事件三要素： 1）事件源（event target） 2）事件处理函数（event handler） 3）事件对象（event object）同一个元素上绑定同一种事件类型，后者会覆盖前者2.绑定事件的方式 1）btn.onclick = function(event){} btn.onclick=null 事件解绑 2）<div id="btn" onclick="handler(this)"&...
复制链接

扫一扫

专栏目录