事件和表单事件

事件添加

• 添加到元素的事件属性<button oncilck="js代码">点击</button>
• 移除事件 btn2.onclick = null
• 通过事件监听器添加事件 addEventListener(事件类型，事件回调方法，触发阶段)
• onclick 不能重复定义同一个事件
• 通过回调添加的事件是不能移除的
• 事件派发
• dispatchEvent 自动点击
• 组织事件冒泡 ev.stopPropagetion()

// 添加到元素的事件属性
    <button oncilck="console.log(this.innerHTML)">点击</button>
    <button>Button</button>
    <button>点击广告</button>
<script>
    //通过脚本添加到事件属性上
    const btn = document.querySelector('button')
    btn2.onclick = function(){
        console.log(this.innerHTML)
    }
    //添加事件
    btn2.onclick = function(){
        console.log(this.innerHTML)
    }
    //移除事件
    btn2.onclick = null
    //通过事件监听器添加事件 addEventListener
    const btn3 = document.querySelector("body button:nth-of-type(3)")
    btn3.addEventListener('click',function(){
        console.log(this.innerHTML，'第一次')
    })
    btn3.addEventListener('click',function(){
        console.log(this.innerHTML，'第二次')
    })
    //事件移除L:回调事件不能移除
    //事件方法函数
    const handle = () => console.log(btn3,innnerHTML,'第三次')
btn3.addEventListener('click',handle)
btn3.removeEventListener('click',handle)
// 事件派发
const ben4 = document.querySelector('body button:nth-of-type(4)')
//自定义事件
const ev = new Event('click')
let i = 0
btn4.addEventListener('click',function(){
    console.log('点击广告,共计：'+i+'元')
    i+=0.5
})
//自动点击
btn4.dispatchEvent(ev)
// 使用间歇式定时器来自动点就广告
setInterval('btn4.dispatchEvent(ev)',1000)
</script>L:

---

事件传递

• 事件传递
  -捕获：从最底层元素逐渐向内直到事件的绑定者
  -目标：到达事件目标
  -冒泡：从目标再由内向外逐级向上直到最外层元素
  -事件对象：ev保存着当前事件的所有信息
  -事件类型：ev.type
  -事件绑定者 ev.currentTarget
  -事件触发者 ev.target
  -事件绑定者===事件触发者 ev.currentTarget === ev.target
  -事件传递的路径 ev.path

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
    const lis = document.querySelectorAll('li')
    lis.forEach(
    li=>
        (li.onclick=ev=>{
        //事件对象：ev保存着当前事件的所有信息
        // 事件类型
        console.log(ev.type)
        //事件绑定者
        console.log(ev.currentTarget)
        //事件触发者
        console.log(ev.target)
        console.log(ev.currentTarget === ev.target)
        //事件传递的路径
        console.log(ev.path)
        })
    )
    //on+event:不支持捕获，只有冒泡
    //li.onclick = function (){}
    //捕获,第三个参数是true表示事件再捕获阶段触发者，false是冒泡（默认）
    //window    window.addEventListener('click',en=>console.log(ev.currentTarget),true)
    // document
        document.addEventListener(
            'click',
            ev=>console.log(ev.currentTarget),
            true
        )
    //html    document.documentElement.addEventListener(
        'click',
        ev=>console.log(ev.currentTarget),
        true
        )
    //body
    document.body.addEventListener(
        'click',
        ev=>console.log(ev.currentTarget),
        true
        )
        //ul
        document.querySelector('ul').addEventListener(
        'click',
        ev=>console.log(ev.currentTarget),
        true
        )
</script>

---

事件冒泡与事件代理

• 事件代理：也叫“事件委托”
  -事件触发者，通常是“事件绑定者的”的子元素

 <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
<script>
    //事件代理：也叫‘事件委托’
    const lis = document.querySelectorAll('li')
    //委托个ul
    document.querySelector('ul').addEventListener('click', ev => {
        //事件绑定者
        console.log(ev.currentTarget)
        //事件触发者，通常是“事件绑定者的"的子元素
        console.log(ev.target.innerHTML)
    })
</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

<body>
    <!-- form.id === form.name -->
    <!-- 推荐使用id,不用name表示form,为了方便css -->
    <form action="" method="POST" id="login">
        <label class="title">用户登录</label>
        <label for="email">邮箱:</label>
        <input type="email" name="email" id='email'>
        <label for="pass">密码:</label>
        <input type="password" name="password" id='pass'>
        <button name="submit">登录</button>
    </form>
</body>
</html>
<script>
    <form action="" method="POST" id="login">
        <label class="title">用户登录</label>
        <label for="email">邮箱:</label>
        <input type="email" name="email" id='email'>
        <label for="pass">密码:</label>
        <input type="password" name="password" id='pass'>
        <button name="submit">登录</button>
    </form>
</body>
</html>
<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('submit....')
    //如果是自定义表单的提交行为，应该禁用默认的提交
    login.onsubmit = ev => ev.preventDefault()
    login.submit.onclick = ev => {
        //如果是自定义表单的提交行为，应该禁用默认的提交
        ev.preventDefault()
        //组织事件冒泡
        ev.stopPropagation()
        //事件绑定者
        // console.log(ev.currentTarget)
        //表单中的每一个子元素都有一个form 属性，指向它的所属表单
        // console.log(ev.currentTarget.form)
        isEmpty(ev.currentTarget.form)
    }
    //非空验证
    function isEmpty(form) {
        // isEmpty(ev.currentTarget.form)
        console.log(form.email.value.length)
        console.log(form.password.value.length)
        if (form.email.value.length === 0) {
            alert('邮箱不能为空')
            form.email.focus()
            return false
        } else if (form.password.value.length === 0) {
            alert('密码不能为空')
            form.password.focus()
            return false
        } else {
            alert('验证通过')
        }
    }
</script>

---

留言板

<body>
    <label>
        <input type="text" name='message'>
    </label>
    <ol id='list'></ol>
</body>
<script>
    //获取元素
    const msg = document.querySelector('input')
    const list = document.querySelector('#list')
    msg.onkeydown = ev => {
        // console.log(msg)
        //键盘事件中，key表示按下的键名
        // console.log(ev.key)
        if (ev.key === 'Enter') {
            //非空判断
            if (ev.currentTarget.value.length === 0) {
                alert('内容不能为空')
            } else {
                //将留言内容添加到列表中
                //创建留言
                let str = `<li>${ev.currentTarget.value}</li>`
                //应该将最新的留言信息放在第一条
                list.insertAdjacentHTML('afterbegin', str)
                //清空上一条留言
                ev.currentTarget.value = null
            }
        }
    }
</script>

---

字符串常用方法

• concat() 字符串拼接
• slice(起始位置，结束位置) 取子串 负数时从最后开始算
  -正方向从0开始，反方向从-1开始
• substr(起始位置，获取长度)
• trim() 删除二端空格
• split()将字符串打成数组 切割

//concat（）字符串拼接
let str = 'html'.concat('css','php',888);
console.log(str);
str = 'html css php';
console.log(str);
//slice(起始位置，结束位置)
str = 'hello php.cn';
let res = str.slice(0,5)
console.log(res);
res = str.slice(0)
console.log(res)
res = str.slice(6)
//substr（起始位置，长度）
res = str.substr(0,5)
console.log(res)
//trim() 删除两端空格
let pas = ' 222 '
console.log(pas.length)
pas = '    222   '
console.log(pas.trim().length)
//split()
res = str.split('')
console.log(res)