DOM的事件处理、Windows的常用事件

<body>

    <button id = 'btn'> 确定 </button>
    <script>
        function f1(){
            alert('西安邮电大学')
        }
        
        let btn = document.querySelector('#btn')
        btn.onclick = f1
     
    </script>
</body>

（2）事件监听方式

事件监听方式：同一个对象的同一个事件可以绑定（注册）多个事件处理程序。按照绑定顺序依次执行。

DOM对象 . addEventListener（type，callback，[capture]）

type：表示事件类型（不带on）。如click、load、mouseover

callback：表示事件处理程序。可以是函数名，也可以是匿名函数

[capture]：可选参数，默认值为false（表示以冒泡方式处理事件），true（表示以捕获方式处理事件）

A、函数名

<body onload="show()"><!--onload="show()" 方法二 -->

    <button id = 'btn'> 确定 </button>
    <script>
        
       /* （1）函数名 */
       function f3(){
            alert('西安邮电大学')
        }
        function f4(){
            alert('西北政法大学')
        }
       let btn = document.querySelector('#btn')
       btn.addEventListener('click',f3)
       btn.addEventListener('click',f4)
    </script>
</body>

B、匿名函数

<body>

    <button id = 'btn'> 确定 </button>
   <script>
/*（2） 匿名函数 */
       btn.addEventListener('click',function(){
        alert('西安邮电大学')
       })
       btn.addEventListener('click',function(){
        alert('西北政法大学')
       })
   </script>
</body>

3、JavaScript中删除事件的方式

（1）传统方式

DOM对象 . 事件名 = null

<body>

    <button id = 'btn'> 确定 </button>
    <script>

        /* 传统方式 */
        function f1(){
            alert('西安邮电大学')
        }        

        let btn = document.querySelector('#btn')
        btn.onclick = f1

       /* 删除事件 */     

       /* 1、传统方式，针对于传统注册 */
       btn .onclick = null       
    </script>
</body>

（2）标准浏览器方式

DOM对象 . removeEventListene（type，callback）

<body>
    <button id = 'btn'> 确定 </button>
    <script>               
       /* 事件监听方式 */
       /* （1）函数名 */
       function f3(){
            alert('西安邮电大学')
        }
        function f4(){
            alert('西北政法大学')
        }
       let btn = document.querySelector('#btn')
       btn.addEventListener('click',f3)
       btn.addEventListener('click',f4)
    
   
       /* 删除事件 */       
       /* 2、准浏览器方式 */
       btn.removeEventListener('click',f3)
       btn.removeEventListener('click',f4)
    </script>
</body>

4、事件流

事件流：是指当时间发生时，会在发生事件的元素节点与DOM树根节点之间按照特定的顺序进行传播，这个过程称之为事件流

（1）网景（Netscape）：采用事件捕获方式

（2）微软（Microsoft）：采用冒泡方式

最低0.47元/天解锁文章

Yue-Baekhyun

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM的事件处理、Windows的常用事件

BOM（Brower Object Model）：浏览器对象模型。独立于内容和浏览器进行交互的对象。核心是window对象（1）DOM（Document Object Model）：文档对象。把文档看做对象，顶级对象（核心对象）是document。（2）BOM（Brower Object Model）：浏览器对象模型。把浏览器看做对象，顶级对象（核心对象）是window。事件三要素：（1）事件源：触发事件的对象；（2）事件类型：出发了什么样类型的事件；（3）事件处理程序：事件被触发后执行的函数（程序段）传统
复制链接

扫一扫