classlist对象、事件添加删除与定时器、事件冒泡

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
一、classlist对象
  1. <h1>www.php.cn</h1>
  1.         .red {
  2.           color: red;
  3.         }
  4.         .bgc {
  5.           background-color: yellow;
  6.         }
  7.         .green {
  8.           color: green;
  9.         }
1.1、添加class：add()
  1.         // classList对象:获取元素上的class属性进行增删改
  2.         const h1 = document.querySelector('h1')
  4.         // 1. 添加class：add()
  5.         h1.classList.add('red')
  6.         // 数组：
  7.         //let styleArr = ['red', 'green']
  8.         //h1.classList.add(...styleArr)

1.2、判断：contains()
  1.         let res = h1.classList.contains('red')
  2.         console.log(res) // 为真返回true

1.3、替换：replace(old, new)
  1. h1.classList.replace('red', 'green')

1.4、删除：remove()
  1. h1.classList.remove('red')

1.5、切换：toggle()
  1.         // 自动根据元素class值选择 add / remove
  2.         // 如果没有class值，执行add，如果有执行remove
  3.         h1.classList.toggle('red')

二、事件添加删除与定时器2.1、事件属性
  1.         const div = document.querySelector('div')
  2.         // 1. 事件属性
  3.         const btn1 = div.firstElementChild
  4.         //   btn1.onclick = () => alert('hello')
  5.         btn1.onclick = function () {
  6.             // alert('hello')
  7.             console.log(this)
  8.         }

2.2、事件侦听器
  1.         const btn2 = btn1.nextElementSibling
  2.         const show = function () {
  3.             console.log(this)
  4.         }
  6.         // 添加,与事件属性不同的是,可以添加多个同名事件的方法
  7.         btn2.addEventListener(
  8.             // 事件名称
  9.             'click',
  10.             // 事件方法
  11.             show
  12.             // 触发阶段:冒泡时
  13.             // false
  14.         )

2.3、定时器
  1.         const btn3 = btn2.nextElementSibling
  2.         let total = 0
  3.         btn3.onclick = function () {
  4.             total = total + 10
  5.             console.log(`已经赚了: ${total} 元`)
  6.         }
  7.         const myClick = new Event('click')
2.3.1、一次性
  1.         setTimeout(function (){
  2.             btn3.dispatchEvent(myClick)
  3.         },2000)

2.3.2、间歇性
  1.         setInterval(function (){
  2.             btn3.dispatchEvent(myClick)
  3.         },2000)

2.3.3、清除定时器
  1.         #// clearTimeout(timer)：清除一次性的，setTimeout()
  2.         #// clearInterval(timer)：清楚间歇式，setInterval()
  4.         let timer = setInterval(function (){
  5.             btn3.dispatchEvent(myClick)
  7.             // 一旦赚钱总额超过某个值，就清楚这个定时器
  8.             if ( total >= 80 ){
  9.                 clearInterval(timer)
  10.                 console.log(`够了够了:${total}元`);
  11.             }
  12.         },2000)

三、事件冒泡和委托3.1、事件冒泡
  1.     <div>
  2.         <button>点击</button>
  3.     </div>
  5.     <script>
  6.         const btn = document.querySelector('button')
  7.         btn.onclick = function() {
  8.             console.log('1:', this)
  9.             // tagName:标签名
  10.             console.log('1:', this.tagName)
  11.         }
  13.         const div = document.querySelector('div')
  14.         div.onclick = function() {
  15.             console.log('2:', this.tagName)
  16.         }
  18.         const body = document.querySelector('body')
  19.         body.onclick = function() {
  20.             console.log('3:', this.tagName)
  21.         }
  22.     </script>

根据事件冒泡机制,父级上的"同名事件"也会被自动的"触发"

3.2、事件委托
  1.     <ul>
  2.         <li>西瓜</li>
  3.         <li>馒头</li>
  4.         <li>电脑</li>
  5.         <li>手机</li>
  6.     </ul>
  1.          const ul = document.querySelector('ul')
  2.          // 需要给事件方法传入一个参数，名称随意
  3.          ul.onclick = function(ev) {
  4.             // console.log(this)
  5.             // this：事件绑定的主体
  6.             // 事件对象上有一个属性：target，表示当前用户正在触发的元素
  7.             // console.log(ev.target)
  8.             console.log(ev.target.textContent)
  9.          }

  1. /**
  2.  * 子级上的事件，会自动传递到父级上的同名事件：冒泡
  3.  * 所有可以将原来需要添加的自己元素上的事件，直接委托到父级上触发执行
  4.  * 触发事件委托，事件主体有2个：
  5.  * 1. 事件绑定在 ( this, ev.currentTarget )
  6.  * 2. 事件触发者 ( ev.target )
  7.  */
四、表单事件
  1.     <form action="login.php" method="post" id="login">
  2.         <!-- <form action="login.php" method="post" id="login" onsubmit="return false"> -->
  3.         <label class="title">用户登录</label>
  4.         <label for="email">邮箱:</label>
  5.         <input type="email" id="email" name="email" value="" autofocus />
  6.         <label for="password">密码:</label>
  7.         <input type="password" id="password" name="password" />
  8.         <button>登录</button>
  9.         <!-- 默认提交 -->
  10.     </form>
4.1、禁用默认提交行为的3种方法：
  1.         // 禁用默认提交行为的3种方法：
  2.         // 1. return false
  3.         /*
  4.         document.forms.login.onsubmit = function (){
  5.             return false
  6.         }
  7.         // 2. ev.preventDefault()
  8.         // 推荐追加 禁用冒泡 ev.stopPropagation()
  9.         document.forms.login.onsubmit = function(ev){
  10.             ev.preventDefault()
  11.             ev.stopPropagation()
  12.         }
  13.         // 3. type=button
  14.         // type=button: 也可以禁用默认提交行为
  15.         // <button type="button">登录</button>
  16.         */

4.2、表单中控件的属性
  1.         document.forms.login.onsubmit = function(ev){
  2.             const email = this.email.value
  3.             const password = this.password.value
  4.             //非空验证
  5.             if ( email.length===0 && password.length===0){
  6.                 alert( '邮箱或者密码不能为空')
  7.                 return false
  8.             }
  9.         }

单中的任何一个控件，都有一个form属性，永远和当前表单元素绑定

4.3、其他表单事件
  1.         // focus 焦点
  2.         document.querySelector('#email').onfocus = function() {
  3.             this.style.background = 'yellow'
  4.         }

  1.         // onblur 失去焦点
  2.         document.querySelector('#email').onblur = function() {
  3.             this.style.background = 'red'
  4.         }

【文章转自国外服务器 http://www.558idc.com处的文章,转载请说明出处】
更多阅读