DOM(三)获取元素的第二种方法

本文介绍了DOM中添加事件监听器的方法,强调了addEventListener的使用,包括事件类型、监听器函数和捕获/冒泡阶段的选择。同时,讨论了匿名函数、事件对象e的属性,如target和this的区别,以及如何阻止事件冒泡和默认行为。还涉及到了事件委托、鼠标坐标获取、键盘事件的区分和ASCII码获取等实用技巧。
摘要由CSDN通过智能技术生成

1.eventTarget . addEventListener (type, listener [,useCapture] )

这里不需要等于号addEventListener= (type, listener [,useCapture] )传统的绑定才有等于号
eventTarget . addEventListener ()方法将指定的监听器注册到eventTarget (目标对象)上,当该对
象触发指定的事件时,就会执行事件处理函数。
该方法接收三个参数:
●type :事件类型字符串,比如click、 mouseover ,注意这里不要带on
●listener :事件处理函数,事件发生时,会调用该监听函数
●useCapture :可选参数,是-个布尔值,默认是false。捕获/冒泡

    // (1) 里面的事件类型是字符串 必定加引号 而且不带on
            // (2) 同一个元素 同一个事件可以添加多个侦听器(事件处理程序)
        btns[1].addEventListener('click', function() {
            alert(22);
        })
        btns[1].addEventListener('click', function() {
                alert(33);
    //依次执行不会覆盖

2 .匿名函数不能删除事件

1.传统方式删除事件
divs[0] .onclick = nul1 ;
// 2. removeEventListener 删除事件
divs[1]. add
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
获取 DOM 元素方法有多种,常用的包括以下几种: 1. 通过元素的 ID 获取: - `getElementById(id)`: 通过元素的 ID 属性获取指定的元素。 2. 通过元素的标签名获取一组元素: - `getElementsByTagName(tagName)`: 通过元素的标签名获取一组元素。 3. 通过元素的类名获取一组元素: - `getElementsByClassName(className)`: 通过元素的类名获取一组元素。 4. 通过 CSS 选择器获取匹配的第一个元素: - `querySelector(selector)`: 通过 CSS 选择器获取匹配的第一个元素。 5. 通过 CSS 选择器获取匹配的所有元素: - `querySelectorAll(selector)`: 通过 CSS 选择器获取匹配的所有元素。 这些方法都是在 `document` 对象上调用的,表示在整个文档中进行查找。其中,`getElementById` 是直接根据元素的 ID 属性进行查找,返回唯一一个匹配的元素。而其他方法都返回一组匹配的元素,可以遍历这个元素集合进行操作。 示例代码: ```html <div id="myDiv"> <p class="myClass">Hello, World!</p> <p class="myClass">This is a paragraph.</p> </div> ``` ```javascript const myDiv = document.getElementById('myDiv'); console.log(myDiv); // 输出 <div id="myDiv">...</div> const paragraphsByTagName = myDiv.getElementsByTagName('p'); console.log(paragraphsByTagName); // 输出 HTMLCollection [<p class="myClass">Hello, World!</p>, <p class="myClass">This is a paragraph.</p>] const paragraphsByClassName = myDiv.getElementsByClassName('myClass'); console.log(paragraphsByClassName); // 输出 HTMLCollection [<p class="myClass">Hello, World!</p>, <p class="myClass">This is a paragraph.</p>] const firstParagraphBySelector = myDiv.querySelector('p'); console.log(firstParagraphBySelector); // 输出 <p class="myClass">Hello, World!</p> const allParagraphsBySelector = myDiv.querySelectorAll('p'); console.log(allParagraphsBySelector); // 输出 NodeList [<p class="myClass">Hello, World!</p>, <p class="myClass">This is a paragraph.</p>] ``` 通过上述代码,我们可以看到不同的方法如何获取 DOM 元素,并返回对应的结果。根据具体的需求,选择合适的方法获取需要操作的元素
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值