JavaScript初学习之事件、常用表单事件、留言板、字符串常用方法

1.事件

1.1添加到元素的事件属性中

<button onclick="console.log(this.innerHTML)">button</button>

1.2 通过脚本添加到事件属性中

<button>button2</button>
<script>
const btn2=document.querySelector("body button:nth-of-type(2)");
// 1.2.1添加事件
btn2.onclick=function(){
     console.log(this.innerHTML);
}
// 又一次添加事件后，上一个添加的事件将会失效，因为onclick不能重复定义同一个事件
 btn2.onclick=function(){
    this.style.color="red";
}
// 1.2.2移出事件
btn2.onclick=null;
</script>

1.3 通过事件监听器添加事件

<!-- //  addEventListener(事件类型，事件回调方法，触发阶段) -->
<button>button3</button>
<script>
    const btn3=document.querySelector("body button:nth-of-type(3)");
    btn3.addEventListener("click",function(){
        console.log(this.innerHTML,"第一次");
    })
// 1.3.1事件移出，通过回调函数添加的事件是无法移除的，可以通过声明一个事件函数，添加和移出事件都操作这个事件函数
// 1.3.1.1 声明事件方法函数
const handle=()=>console.log(btn3.innerHTML,"第二次");
// 1.3.1.2 添加事件
btn3.addEventListener("click",handle);
// 1.3.1.3移出事件
btn3.removeEventListener("click",handle);
</script>
<button>点击广告</button>
<script>
    // 自定义事件
const btn4=document.querySelector("body button:nth-of-type(4)");
const ev=new Event("click");
btn4.addEventListener("click",function(){
    console.log("点击了广告");
})
btn4.dispatchEvent(ev);//将会自动点击"点击广告"事件
// 通过间歇式自动点击器来自动点击广告
setInterval("btn4.dispatchEvent(ev)",1000);

1.3 事件传递

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
</ul>

// 事件传递: 1.捕获：从最外层元素逐级向内直到事件的绑定者; 2.目标：到达事件目标; 3.冒泡：从目标再由内逐级向上直到最外层属性
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);
        // 阻止事件冒泡
        ev.stopPropagation();
     })
)

1.4 事件冒泡与事件代理

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
</ul>

// 事件代理也叫事件委托
const lis=document.querySelectorAll("li");
//遍历每一个li，并逐个为它添加点击事件
lis.forEach(li=>(li.onclick=ev=>console.log(ev.currentTarget)));
//也可以将点击事件添加到其父元素上，通过事件触发者来获取元素
document.querySelector("ul").addEventListener("click",ev=>{
    //获取事件绑定者
    console.log(ev.currentTarget);
    // 获取事件触发者,通常是“事件绑定者”的子元素
    console.log(ev.target);
})

2.常用表单事件

2.1 CSS样式

#login{
    width: 20em;
    border: 1px solid #888;
    padding: 1em 2em 1em;
    margin: 2em auto;
    box-sizing: border-box;
    background-color: lightcyan;
    display: grid;
    grid-template-columns: 3em 1fr;
    gap: 1em 0;
}
#login .title{
    grid-area: auto / span 2;
    place-self: center;
}
#login button{
    grid-area: auto / 2 / auto;
}

2.2 HTML代码

<form action="" method="POST" id="login">
    <label class="title">用户登录</label>
    <label for="username">账号：</label>
    <input type="text" name="username">
    <label for="password">密码：</label>
    <input type="password" name="password">
    <button type="submit" name="submit">登录</button>
</form>

// 获取表单
const login=document.forms["login"];
// 其他方法
// 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");
// submit()提交
// login.onsubmit=()=>alert("success");
// 如果是自定义表单的提交行为，应该禁用掉默认的提交
// login.onsubmit=ev=>ev.preventDefault();
login.submit.onclick=ev=>{
    ev.preventDefault();//禁止默认的提交
    ev.stopPropagation()//阻止事件冒泡，不然会触发父级或祖先级的事件
    console.log(ev.currentTarget.form);
    // 表单中每一个元素都有一个form属性，并指向它所属的表单
    isEmpty(ev.currentTarget.form);
}
// 非空验证
function isEmpty(form){
    if(form.username.value.length===0){
        alert("请输入帐号！");
        form.username.focus();
        return false;
    }else if(form.password.value.length===0){
        alert("请输入密码！");
        form.password.focus();
        return false;
    }else{
        alert("验证通过！");
    }
}

2.3 与表单相关的几个事件

1.focus：获取焦点事件
 2.blur：失去焦点事件
 3.input：只要值发生变化时连续触发，不等到失去焦点
 4.change：值发生了变化且失去了焦点时触发，适用于<input><select><textarea>
 5.select：选中值时触发，适用于<input><textarea>
6.reset：将表单值全部重置到默认值
7.submit：提交表单时触发，注意触发对象是<form>，提交的是表单不是按钮
8.keydown：按下键盘时
9.keyup：松开键盘时
10.keypress：按住了键盘（除了Ctrl、alt、shift、meta等之外有值的键）时，会先触发keydown，然后再keypress，一直重复这两个，直到触发keyup松开键盘时才结束
11.load
12.error 
13.invalid：提交时表单元素值不满足验证条件时触发

3. 留言板

<!-- 留言输入框 -->
<input type="text" name="msg">
<!-- 历史留言列表 -->
<ol id="list"></ol>

// 获取元素
const msg=document.querySelector("input");
const list=document.querySelector("#list");
msg.onkeydown=ev=>{
    // 键盘事件中，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.target.value=null;
        }
    }
}

4. 字符串常用方法

const strs="a1b2c3d4e5f6g7h8i9j";
// 1.concat(); 拼装
let str="html".concat(" css"," js"," php"," !");//html css js php !
// 2.slice(start,end); 取子串，start表示开始截取的位置，end表示截取结束的位置;正数从0开始数，负数从-1开始数；正数负数可以同时用，但是不能出现start的位置在end位置后面。
str=strs.slice(2,5); //b2c
str=strs.slice(-7,-5); //g7
// 3.substr(start,length); 取子串； start表示开始的位置，length表示截取多少位;支持正负数。
str=strs.substr(2,5);//b2c3d
// 4.trim() 删除两端空格
let psd="  password  ";//length=12
psd=psd.trim();//length=8
// 5.split() 将字符串通过指定字符转换为数组
str=strs.split("");//(19) ["a", "1", "b", "2", "c", "3", "d", "4", "e", "5", "f", "6", "g", "7", "h", "8", "i", "9", "j"]
str="Jy@php.cn".split("@");//(2) ["Jy", "php.cn"]

1.事件

1.1添加到元素的事件属性中

1.2 通过脚本添加到事件属性中

1.3 通过事件监听器添加事件

1.3 事件传递

1.4 事件冒泡与事件代理

2.常用表单事件

2.1 CSS样式

2.2 HTML代码

2.3 与表单相关的几个事件

3. 留言板

4. 字符串常用方法

更多相关文章

随机推荐