search

博客列表 >事件和表单事件

事件和表单事件

心
心原创
2021年01月09日 16:12:36746浏览

事件添加

  • 添加到元素的事件属性<button oncilck="js代码">点击</button>
  • 移除事件 btn2.onclick = null
  • 通过事件监听器添加事件 addEventListener(事件类型，事件回调方法，触发阶段)
  • onclick 不能重复定义同一个事件
  • 通过回调添加的事件是不能移除的
  • 事件派发
  • dispatchEvent 自动点击
  • 组织事件冒泡 ev.stopPropagetion()
  1. // 添加到元素的事件属性
  2.     <button oncilck="console.log(this.innerHTML)">点击</button>
  3.     <button>Button</button>
  4.     <button>点击广告</button>
  5. <script>
  6.     //通过脚本添加到事件属性上
  7.     const btn = document.querySelector('button')
  8.     btn2.onclick = function(){
  9.         console.log(this.innerHTML)
  10.     }
  11.     //添加事件
  12.     btn2.onclick = function(){
  13.         console.log(this.innerHTML)
  14.     }
  15.     //移除事件
  16.     btn2.onclick = null
  17.     //通过事件监听器添加事件 addEventListener
  18.     const btn3 = document.querySelector("body button:nth-of-type(3)")
  19.     btn3.addEventListener('click',function(){
  20.         console.log(this.innerHTML，'第一次')
  21.     })
  22.     btn3.addEventListener('click',function(){
  23.         console.log(this.innerHTML，'第二次')
  24.     })
  25.     //事件移除L:回调事件不能移除
  26.     //事件方法函数
  27.     const handle = () => console.log(btn3,innnerHTML,'第三次')
  28. btn3.addEventListener('click',handle)
  29. btn3.removeEventListener('click',handle)
  30. // 事件派发
  31. const ben4 = document.querySelector('body button:nth-of-type(4)')
  32. //自定义事件
  33. const ev = new Event('click')
  34. let i = 0
  35. btn4.addEventListener('click',function(){
  36.     console.log('点击广告,共计：'+i+'元')
  37.     i+=0.5
  38. })
  39. //自动点击
  40. btn4.dispatchEvent(ev)
  41. // 使用间歇式定时器来自动点就广告
  42. setInterval('btn4.dispatchEvent(ev)',1000)
  43. </script>L:

事件传递

  • 事件传递
    -捕获：从最底层元素逐渐向内直到事件的绑定者
    -目标：到达事件目标
    -冒泡：从目标再由内向外逐级向上直到最外层元素
    -事件对象：ev保存着当前事件的所有信息
    -事件类型：ev.type
    -事件绑定者 ev.currentTarget
    -事件触发者 ev.target
    -事件绑定者===事件触发者 ev.currentTarget === ev.target
    -事件传递的路径 ev.path
  1. <ul>
  2. <li>1</li>
  3. <li>2</li>
  4. <li>3</li>
  5. <li>4</li>
  6. </ul>
  7. <script>
  8.     const lis = document.querySelectorAll('li')
  9.     lis.forEach(
  10.     li=>
  11.         (li.onclick=ev=>{
  12.         //事件对象：ev保存着当前事件的所有信息
  13.         // 事件类型
  14.         console.log(ev.type)
  15.         //事件绑定者
  16.         console.log(ev.currentTarget)
  17.         //事件触发者
  18.         console.log(ev.target)
  19.         console.log(ev.currentTarget === ev.target)
  20.         //事件传递的路径
  21.         console.log(ev.path)
  22.         })
  23.     )
  24.     //on+event:不支持捕获，只有冒泡
  25.     //li.onclick = function (){}
  26.     //捕获,第三个参数是true表示事件再捕获阶段触发者，false是冒泡（默认）
  27.     //window    window.addEventListener('click',en=>console.log(ev.currentTarget),true)
  28.     // document
  29.         document.addEventListener(
  30.             'click',
  31.             ev=>console.log(ev.currentTarget),
  32.             true
  33.         )
  34.     //html    document.documentElement.addEventListener(
  35.         'click',
  36.         ev=>console.log(ev.currentTarget),
  37.         true
  38.         )
  39.     //body
  40.     document.body.addEventListener(
  41.         'click',
  42.         ev=>console.log(ev.currentTarget),
  43.         true
  44.         )
  45.         //ul
  46.         document.querySelector('ul').addEventListener(
  47.         'click',
  48.         ev=>console.log(ev.currentTarget),
  49.         true
  50.         )
  51. </script>

事件冒泡与事件代理

  • 事件代理：也叫“事件委托”
    -事件触发者，通常是“事件绑定者的”的子元素
  1.  <ul>
  2.         <li>1</li>
  3.         <li>2</li>
  4.         <li>3</li>
  5.         <li>4</li>
  6.         <li>5</li>
  7.     </ul>
  8. <script>
  9.     //事件代理：也叫‘事件委托’
  10.     const lis = document.querySelectorAll('li')
  11.     //委托个ul
  12.     document.querySelector('ul').addEventListener('click', ev => {
  13.         //事件绑定者
  14.         console.log(ev.currentTarget)
  15.         //事件触发者，通常是“事件绑定者的"的子元素
  16.         console.log(ev.target.innerHTML)
  17.     })
  18. </script>

表单事件

  • 获取表单
    -const login = document.forms[0]
    -const login = document.forms[‘login’]
    -const login = document.forms.item(0)
    -const login = document.forms.item(‘login’)
    -const login = document.querySelector(‘#login’)
    -const login = document.forms.namedItem(‘login’)

  • submit() 提交
    -login.onsubmit =()=>alert(‘提交’)

  • 与表单相关的几个事件
    -focus: 获取焦点事件
    -blur: 失去焦点事件
    -input:只要值发生变化时连续触发，不等失去焦点
    -change:值发生了改变且失去焦点时触发，<input><select><textarea -select:选中文本时触发,<inputL><textarea>
    -invalid：提交时表单元素值不满足验证条件时触发
    -reset:将表单值全部重置到默认值（并非登录）
    -submit:提交表单时触发，注意触发对象时<form>,提交的是表单不是按钮
    -keydown:按下键盘时
    -keyup:松开键盘时
    -keypress:按过了键盘时，按下有值键时（除Ctrl/alt/Shift/Meta),先触发keydown
    -按下一直不放手的触发顺序：keydown,keypress,重复这二个事件，直到keyup
    -load,error

  1. <body>
  2.     <!-- form.id === form.name -->
  3.     <!-- 推荐使用id,不用name表示form,为了方便css -->
  4.     <form action="" method="POST" id="login">
  5.         <label class="title">用户登录</label>
  6.         <label for="email">邮箱:</label>
  7.         <input type="email" name="email" id='email'>
  8.         <label for="pass">密码:</label>
  9.         <input type="password" name="password" id='pass'>
  10.         <button name="submit">登录</button>
  11.     </form>
  12. </body>
  14. </html>
  15. <script>
  16.     <form action="" method="POST" id="login">
  17.         <label class="title">用户登录</label>
  18.         <label for="email">邮箱:</label>
  19.         <input type="email" name="email" id='email'>
  20.         <label for="pass">密码:</label>
  21.         <input type="password" name="password" id='pass'>
  22.         <button name="submit">登录</button>
  23.     </form>
  24. </body>
  26. </html>
  27. <script>
  28.     //获取表单
  29.     // const login = document.forms[0]
  30.     // const login = document.forms['login']
  31.     // const login = document.forms.item(0)
  32.     // const login = document.forms.item("login")
  33.     // const login = document.querySelector('#login')
  34.     const login = document.forms.namedItem('login')
  35.     // submit() 提交
  36.     // login.onsubmit = () => alert('submit....')
  37.     //如果是自定义表单的提交行为，应该禁用默认的提交
  38.     login.onsubmit = ev => ev.preventDefault()
  40.     login.submit.onclick = ev => {
  41.         //如果是自定义表单的提交行为，应该禁用默认的提交
  42.         ev.preventDefault()
  43.         //组织事件冒泡
  44.         ev.stopPropagation()
  45.         //事件绑定者
  46.         // console.log(ev.currentTarget)
  47.         //表单中的每一个子元素都有一个form 属性，指向它的所属表单
  48.         // console.log(ev.currentTarget.form)
  49.         isEmpty(ev.currentTarget.form)
  51.     }
  53.     //非空验证
  54.     function isEmpty(form) {
  55.         // isEmpty(ev.currentTarget.form)
  56.         console.log(form.email.value.length)
  57.         console.log(form.password.value.length)
  58.         if (form.email.value.length === 0) {
  59.             alert('邮箱不能为空')
  60.             form.email.focus()
  61.             return false
  62.         } else if (form.password.value.length === 0) {
  63.             alert('密码不能为空')
  64.             form.password.focus()
  65.             return false
  66.         } else {
  67.             alert('验证通过')
  68.         }
  69.     }
  70. </script>

留言板

  1. <body>
  2.     <label>
  3.         <input type="text" name='message'>
  4.     </label>
  5.     <ol id='list'></ol>
  6. </body>
  7. <script>
  8.     //获取元素
  9.     const msg = document.querySelector('input')
  10.     const list = document.querySelector('#list')
  12.     msg.onkeydown = ev => {
  13.         // console.log(msg)
  14.         //键盘事件中，key表示按下的键名
  15.         // console.log(ev.key)
  16.         if (ev.key === 'Enter') {
  17.             //非空判断
  18.             if (ev.currentTarget.value.length === 0) {
  19.                 alert('内容不能为空')
  20.             } else {
  21.                 //将留言内容添加到列表中
  22.                 //创建留言
  23.                 let str = `<li>${ev.currentTarget.value}</li>`
  24.                 //应该将最新的留言信息放在第一条
  25.                 list.insertAdjacentHTML('afterbegin', str)
  26.                 //清空上一条留言
  27.                 ev.currentTarget.value = null
  28.             }
  29.         }
  30.     }
  31. </script>

留言板

字符串常用方法

  • concat() 字符串拼接
  • slice(起始位置，结束位置) 取子串 负数时从最后开始算
    -正方向从0开始，反方向从-1开始
  • substr(起始位置，获取长度)
  • trim() 删除二端空格
  • split()将字符串打成数组 切割
  1. //concat（）字符串拼接
  2. let str = 'html'.concat('css','php',888);
  3. console.log(str);
  4. str = 'html css php';
  5. console.log(str);
  6. //slice(起始位置，结束位置)
  7. str = 'hello php.cn';
  8. let res = str.slice(0,5)
  9. console.log(res);
  10. res = str.slice(0)
  11. console.log(res)
  12. res = str.slice(6)
  13. //substr（起始位置，长度）
  14. res = str.substr(0,5)
  15. console.log(res)
  16. //trim() 删除两端空格
  17. let pas = ' 222 '
  18. console.log(pas.length)
  19. pas = '    222   '
  20. console.log(pas.trim().length)
  21. //split()
  22. res = str.split('')
  23. console.log(res)
上一条：Vue自学：v-on常用的修饰符使用下一条：Vue自学：v-on的参数传递问题
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多