JS：事件以及事件代理和字符串操作常见函数方法 - JS学习

首页 > 博客列表 > JS：事件以及事件代理和字符串操作常见函数方法

博主信息

博文 145

粉丝 7

访问量 159517

专题推荐

更多>

事件以及事件代理

1.事件属性添加，例如：
<button type="button" onclick="alert(this.innerText)">按钮1</button>
2.脚本添加:

btn=document.querySelector("button:nth-of-type(2)");
// console.log(btn);
btn.onclick=(ev)=>{
    alert(ev.currentTarget.innerText);
}

3.事件监听添加:通过事件监听函数addEventListener(“事件”,函数,出发方式(默认冒泡flase|捕获true));

4.知识扩展:

onclick无法重复定义事件,且可以通过赋值null取消事件
事件监听addEventListener,如果函数是回调则无法移除,如果是函数名则可以通过removeEventListener(“事件”,函数名);来取消事件

5.事件派发:new Event('event')和setinterval(code,time)

let ev=new Event("click");
btn.addEventListener("click",function(ev){
    console.log(ev.currentTarget.innerText);
})
//btn.dispatchEvent(ev);事件派发
setinterval(btn.dispatchEvent(ev),1000);

6.事件监听的触发机制:

冒泡:由目标元素,有内部元素往外传递
捕获:从最外部元素逐级像内部传至目标元素
ev.preventDefault();禁用默认事件
ev.stopPropagation();禁止事件传递(冒泡)
ev.currentTarget:事件的绑定者
ev.target:事件触发者
ev.type事件类型

7.事件代理:事件代理主要通过ev.currentTarget触发事件的元素来触发事件代码;主要解决每个子元素都要绑定事件时,可以通过父级代理简化

8.鼠标和键盘事件:

事件类型	说明
click	单击鼠标左键时发生，如果右键也按下则不会发生。当用户的焦点在按钮上并按了 Enter 键时，同样会触发这个事件
dblclick	双击鼠标左键时发生，如果右键也按下则不会发生
mousedown	单击任意一个鼠标按钮时发生,ev.button来获取左中键右(0,1,2)
mousemove	鼠标在某个元素上时持续发生
mouseout	鼠标指针位于某个元素上且将要移出元素的边界时发生
mouseover	鼠标指针移出某个元素到另一个元素上时发生
mouseup	松开任意一个鼠标按钮时发生
keydown	按下键盘时,ev.key:获取键盘按键的键名
keyup	松开键盘时
keypress	按过了键盘时, 按下有值键时(除Ctrl/Alt/Shift/Meta),先触发
keydown	按下一直不放手的触发顺序: keydown,keypress,重复这二个事件,直到keyup

9.表单事件

事件类型	说明
focus	获取焦点事件
blur	失去焦点事件
input	只要值发生变化时连续触发,不等失去焦点
change	值发生了改变且失去焦了点时触发,<input><select><textarea>
select	选中文本时触发,<input><textarea>
invalid	提交时表单元素值不满足验证条件时触发
reset	将表单值全部重置到默认值(并非清空)
submit	提交表单时触发,注意触发对象是<form>,提交的是表单不是按钮

10.实操代码练习

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件</title>
</head>
<body>
    <button type="button" onclick="alert(this.innerText)">按钮1</button>
    <button type="button">1,2,3</button>
    <ul class="items">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
    </ul>
    <div class="leave">
        <input type="text">
        <button type="submit">提交</button>
        <ul></ul>
    </div>
</body>
<script>
    btn=document.querySelector("button:nth-of-type(2)");
    // console.log(btn);
    btn.onclick=(ev)=>{
        alert(ev.currentTarget.innerText);
    }
    item3=document.querySelector(".items>li:nth-of-type(3)");
    // console.log(item3);
    item3.addEventListener("click",function(ev){
        console.log(ev.target.innerText);//事件的触发者
        console.log(ev.currentTarget);//事件的绑定者
        console.log(ev.type);
    })
    items=document.querySelector(".items");
    items.addEventListener('mousedown',ev=>{
        console.log(ev.target.innerText)//事件触发者
        console.log(ev.currentTarget.innerHTML);//事件的绑定者
        console.log(ev.button);
    });
    //鼠标点击提交留言
    let submit=document.querySelector(".leave > button");
    submit.addEventListener('click',(ev)=>{
        text=ev.target.previousElementSibling.value;
        li=document.createElement('li');
        li.innerText=text;
        ul=ev.target.nextElementSibling;
        ul.insertAdjacentElement("afterBegin",li);
        ev.target.previousElementSibling.value=null;
    })
    //回车键提交留言
    let input=document.querySelector(".leave > input");
    let ul=document.querySelector(".leave > ul");
    input.addEventListener("keydown",ev=>{
        // console.log(ev.key);
        if(ev.key==="Enter"){
            text=ev.target.value;
            li=document.createElement('li');
            li.innerText=text;
            ul.insertAdjacentElement("afterBegin",li);
            ev.target.value=null;
        }
    })
    // 双击删除事件
    ul.addEventListener("dblclick",(ev)=>{
        ev.currentTarget.removeChild(ev.target);
    })
</script>
</html>

代码运行结果

字符串操作相关函数

1.length 属性返回字符串的长度
2.indexOf() 方法返回字符串中指定文本首次出现的索引（位置）
3.lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引
4.search() 方法搜索特定值的字符串，并返回匹配的位置
5.slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。该方法设置两个参数：起始索引（开始位置），终止索引（结束位置）
6.substr() 类似于 slice();不同之处在于第二个参数规定被提取部分的长度。
7.replace() 方法用另一个值替换在字符串中指定的值,replace() 方法不会改变调用它的字符串。它返回的是新字符串。默认地，replace() 只替换首个匹配：
8.toUpperCase() 把字符串转换为大写
9.toLowerCase() 把字符串转换为小写
10.split() 将字符串转换为数组
11.trim() 方法删除字符串两端的空白符
12.concat() 连接两个或多个字符串

批改老师：

天蓬老师

批改状态：合格

老师批语：这个可以当成事件字典用

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

12月29日练习：php中文网footer案例（组件footer）

2019-12-29 13:35:19

首页

PHP培训

视频教程

学习路径

资源下载

技术文章

社区

微信公众号

事件以及事件代理

字符串操作相关函数