事件

事件添加

1、添加到元素的事件属性上

<button onclick='conslole.log(this,innerHTML)'>这是按钮</button>

2、通过脚本添加到事件属性上

const btn=document.querySelector('button');
btn.onclick=function(){
consloe.log(this.innerHTML);
}

移除事件：btn.onclick=null

3、通过事件监听器添加事件
addEventListener(事件类型，事件回调方法，触发阶段)
```
btn.addEventListener('click',function(){
console.log(this.innerHTML);
})
```
移除事件：通过回调添加的事件是无法移除的；
事件移除函数：
btn.removeEventListener(事件类型，方法)；
注意：通过脚本添加事件只能响应一个，事件监听器可以添加多个事件。

事件派发

//自定义点击事件
  const ev = new Event('click');
  const btn = document.querySelector('button');
  let i = 0
  btn.addEventListener('click', () => console.log('点击了' + i++ + "次"));
  //事件派发自动执行
  // btn.dispatchEvent(ev)
  //使用间歇式定时器自动执行
  setInterval('btn.dispatchEvent(ev)', 1000);

事件传递

const lis = document.querySelectorAll('li');
  lis.forEach(li => {
      (li.onclick = (ev) => {
          console.log('事件对象' + ev)
              // 事件对象：保存着当前事件的所有信息
              //事件类型
          console.log('事件类型' + ev.type);
          //事件绑定者
          console.log('事件绑定者' + ev.currentTarget);
          // 事件触发者
          console.log('事件触发者' + ev.target);
          //事件传递的路径
          console.log('事件传递途径' + ev.path);
          //on+event:不支持捕获,只有冒泡
      })
  });

1、捕获：从最外层元素逐级向内直到事件的绑定者；

const lis = document.querySelectorAll('li');
  lis.forEach(li => {
      (li.onclick = ev => {
          // console.log('事件对象' + ev)
          //     // 事件对象：保存着当前事件的所有信息
          //     //事件类型
          // console.log('事件类型' + ev.type);
          // //事件绑定者
          console.log('事件绑定者' + ev.currentTarget);
          // // 事件触发者
          // console.log('事件触发者' + ev.target);
          //事件传递的路径
          console.log('事件传递途径' + ev.path);
          //on+event:不支持捕获,只有冒泡
      })
  });
  //捕获,第三个参数是true表示事件在捕获阶段触发,false是冒泡(默认)
  // window
  window.addEventListener('click', ev => 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);

2、目标：到达事件目标

3、冒泡：从目标再由内向外逐级向上直到最外层元素

 // ul 
    document.querySelector('ul').addEventListener('click', ev => console.log(ev.currentTarget));
    // body
    document.body.addEventListener('click', ev => console.log(ev.currentTarget))
        // html 
    document.documentElement.addEventListener('click', ev => console.log(ev.currentTarget))
        // document
    document.addEventListener('click', ev => console.log(ev.currentTarget))
        // window
    window.addEventListener('click', ev => console.log(ev.currentTarget))

阻止冒泡：ev.stopPropagation();

事件代理|事件委托

const lis = document.querySelectorAll('li');
  //遍历每个li,并逐个为它添加点击事件
  // lis.forEach(li => (li.onclick = ev => console.log(ev.currentTarget)))
  const ul = document.querySelector('ul').addEventListener('click', ev => {
      // 事件绑定者
      console.log(ev.currentTarget);
      // 事件触发者,通常是事件绑定者的子元素
      console.log(ev.target.innerHTML);
  })

表单常用事件

focus:获取焦点
blur:失去焦点
input:只要值发生变化时连续触发,不等失去焦点
change:值发生变化了改变失去焦点了时触发,input ,select, textarea
select:选中文本时触发 ,input ,textarea
invalid:提交时表单元素值不满足验证条件时触发
reset:将表单值全部重置到默认值
submit:提交表单时触发,注意触发对象是form,提交的是表单而不是按钮
keydown:按下键盘时;
keyup:松开键盘时
keypress:按过了键盘时,按下有值键时(除ctrl/alt/shift/meta),先触发keydown
按下一直不放手的触发顺序:keydown,keypress,重复这两个事件,直到keyup
表单中的每一个子元素都一个form属性，指向它所属的表单（ev.currentTarget.form）

//获取表单
    // 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.forms.namedItem('login');
    const login = document.querySelector('#login')
    console.log(login);
    //提交事件
    // login.onsubmit = () => alert('提交');
    //如果是自定义表单的提交行为,应该禁用默认提交行为
    login.onsubmit = ev => ev.preventDefault();
    //自定义提交
    login.submit.onclick = ev => {
            //阻止冒泡
            ev.stopPropagation();
        }

非空验证小案例

function isEmpty(form) {
        console.log(form.username.value.length);
        console.log(form.password.value.length);
        if (form.username.value.length === 0) {
            alert('账号不能为空');
            form.username.focus();
            return false;
        }
        if (form.password.value.length === 0) {
            alert('密码不能为空');
            form.password.focus();
            return false;
        }
        alert('验证通过');
    }

实现简单留言板

<body>
    <label for="message"><input type="text" name="message" id="message"></label>
    <ol class="list"></ol>
</body>
<script>
    const msg = document.querySelector('#message')
    const list = document.querySelector('.list')
    msg.onkeydown = ev => {
        // console.log(ev.keyCode);
        if (ev.keyCode == 13) {
            if (ev.currentTarget.value.length == 0) {
                alert('内容不能为空')
            } else {
                let str = `<li>${ev.currentTarget.value}</li>`;
                list.insertAdjacentHTML("afterbegin", str);
                ev.currentTarget.value = ''
            }
        };
    }
</script>

字符串常用函数

1、concat() 拼装

let str = 'html'.concat('css', 'php', 888);
  console.log(str);

2、slice(开始，结尾) 取子串；正方向从前取从0开始。负值从后取-1开始。
```
let res = str.slice(0);
  res = str.slice(-1)
  console.log(res);
```

3、substr(开始，长度) 支持负数

res = str.substr(0, 5)
  console.log(res);

4、trim() 去掉俩端空格

let pow = ' asdasd ';
  console.log(pow.length);
  console.log(pow.trim().length);

5、split(分隔符) 将字符串打散成数组
```
res = str.split('');
  console.log(res);
```

6、toUpperCase() / toLowerCase() 大小写转换

res = str.toUpperCase();
  console.log(res);
  res = str.toLowerCase();
  console.log(res);

7、 indexOf()来定位字符串中某一个指定的字符首次出现的位置
```
res = str.indexOf('m');
  console.log(res);
```
8、match() 查找字符串中特定的字符，并且如果找到的话，则返回这个字符
```
res = str.match('html');
  console.log(res);
```
9、 replace(要替换的，替换成) 在字符串中用某些字符替换另一些字符。
```
res = str.replace('html', 'hello');
  console.log(res);
```
10、charAt() 返回指定位置的字符从0开始第一个
```
res = str.charAt(5);
  console.log(res);
```
11 、substring() 提取字符串中介于两个指定下标之间的字符。返回的子串包括开始处的字符，但不包括结束处的字符。substring(from, to)
```
res = str.substring(0, 7);
  console.log(res);
```

js事件与常用函数

事件

事件添加

表单常用事件

非空验证小案例

实现简单留言板

字符串常用函数

相关文章