0027 JS 的事件 一

目录

1 、单击事件 onclick

<body>
<button class="c1">弹窗按钮</button>
<script>

    var ele = document.querySelector('.c1')
    ele.onclick = function () {
        alert('123')
    }
</script>
</body>

// 最简单的单击事件

image-20230315150408768

2、onload 事件 解决js代码在head标签 被先执行的问题

unload事件是让游览器加载完整个页面后 才执行unload的方法
image-20230315150818016

3 unsubmit 在form表单使用的阻止提交动作

// unsubmit 事情阻止默认事件的执行，一般使用校验输入的数据不匹配规则时，阻止提交到服务端。
// 服务器优化负载的压力 
// 使用场景： 用户在输入用户名和密码 ，检测用户名和密码，如果用户名和密码的长度不大于10位，就算点击提交了，也不    会发送给服务端校验，减轻服务端的压力。
//
函数return

image-20230315153046995

js默认 传参e
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
 window.onload = function () {
            var form = document.querySelector('#i1')
            var user = document.querySelector('.c1')
            form.onsubmit = function (e) {
                if ( user.value.length <5){
                        e.preventDefault()
                }
            }
}

//  e为事件的参数，当作为参数传入到函数内时，将关联游览器对象的，告知游览器不要执行与事件关联的默认动作
//   一个是在事件触发的函数内结束函数，一个相当于给解释器一个执行的状态，默认执行，状态被更改不执行。



    </script>
</head>
<body>
<form action="#" id ='i1'>
    <span>用户名: </span>
    <input type="text" name="username" value="" class="c1">
    <input type="submit" name="提交">
</form>
</body>
</html>

4、onchang 事件 select标签

 // onchange事件 在select标签中，value值发生变化，将触发onchange事件，一般是用于下拉菜单的选择进行
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<select name="provonce" id="s1">
    <option value="none">请选择省份</option>
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="shandong">山东</option>
</select>

<select name="provonce" id="s2">
    <option value="none">请选择城市</option>

</select>

<script>
    var data = {"beijing":["海淀","通州"],"shanghai":["闸北","浦东"],"shandong":["济南","青岛"]}


    // 对select的标签做一个事件，当省份的标签发生变化时，要把所属的 城市名称 放入到第一个select中去显示。
    //
     var provonce = document.getElementById('s1')
     var city_obj = document.getElementById('s2')
    // 找到 省份的value值
     provonce.onchange = function () {


         // console.log( this.value)
         // 找到发生变化的value值，作为key，然后从object数据中取出可以key的value

         var city = data[this.value]
         // console.log(city)
         // 获取到全部的城市名
         // 在把城市document对象的option值清空，只保留一个请选择城市

         city_obj.options.length = 1
         // select 标签控制子代标签数量的方法，0 去除所有子代，1 保留第一个子代，依次类推

         for( index  in city){
             // 循环取出每一个城的索引，
             var city_option = document.createElement('option')
             // 创建一个option的标签

             city_option.innerHTML =city[index]
             // console.log(city_option)
             // 取出城市的名字，赋值给标签的文本 ，不是value值，如果是发送给服务端的话，要赋值给value

             city_obj.appendChild(city_option)
             // 城市父级标签 添加option子节点

         }
     }
</script>
</body>
</html>

image-20230315164438170

总结

1 onload事件是让游览器加载完整个页面后才执行unload的方法，解决js代码被提前执行的问题

2  onsubmit 事情阻止默认事件的执行，一般使用校验输入的数据不匹配规则时，阻止提交到服务端。
 form表单这个函数对象内添加一个if流程，如果校验不成功，直接使用return 结束form函数
 
 3  e为事件的参数，当作为参数传入到函数内时，将关联游览器对象的，告知游览器不要执行与事件关联的默认动作
 一个是在事件触发的函数内结束函数，一个相当于给解释器一个执行的状态，默认执行，状态被更改不执行。
 
 4  onchange事件 在select标签中，value值发生变化，将触发onchange事件，一般是用于下拉菜单的选择进行
posted @ 2023-03-15 16:49  mmszxc  阅读(38)  评论(0)    收藏  举报