【无标题】

weixin_43883748

已于 2023-09-07 09:43:37 修改

阅读量91

点赞数

文章标签： javascript 前端开发语言

于 2023-09-05 08:31:55 首次发布

本文链接：https://blog.csdn.net/weixin_43883748/article/details/132669175

版权

事件的概念

事件：对某个元素的某种操作
事件三要素：
事件元素:触发事件的元素
事件类型：鼠标事件/键盘事件类型
事件对象：携带着相关事件的属性和方法，事件对象必需要有事件的触发才会产生

事件类型宏观分为：
鼠标事件：onclick/onmouseover
键盘事件：onkeydown/onkeyup

page：针对于整个页面的左顶点，常用
client：针对于可视窗口的左顶点，用的少
offset：针对其父元素的左顶点，拖拽中常用

注意：一个元素在页面发生位移，本质就是修改其left和top的值，必须设置position：absolute，否则元素无法移动

事件流：当父子元素绑定相同事件时，触发子元素或父元素，事件流会向父元素或子元素传递
冒泡：由子元素向父元素传递（默认就是冒泡）
捕获：由父元素向子元素传递（用的极少）

阻止事件冒泡：在传播源添加阻止代码的函数
事件对象.函数名|事件对象.属性
阻止事件冒泡的方法：
1、e.stopPropagation();
2、e.cancelBubble = true
兼容写法：
e.stopPropagation?e.stopPropagation(): e.cancelBubble = true;

阻止浏览器的默认行为
事件对象.函数()|事件对象.属性
// e.preventDefault();
// e.returnValue = false;
推荐写法//阻止浏览器的默认行为s
// return false;

//鼠标右键
// document.oncontextmenu = function(){
// console.log(“heihei”);

//     return false;
// }

键盘事件及对象

键盘事件：
onkeydown:只要按下任意按键，就触发一次

document.onkeydown = function(){
        console.log("heihei");
    }

onkeypress:生成一个字符时触发，最常用

document.onkeypress = function(){
        console.log("heihei");
    }

onkeyup：键盘抬起时触发

document.onkeyup = function(){
        console.log("heihei");
    }

键盘事件对象：

 document.onkeypress = function(evt){
        // console.log(evt);

        //录入的字符
        console.log(evt.key);

        //录入的ASC码值
        var keyAsc = evt.keyCode || evt.which || evt.charCode;
        // console.log(evt.keyCode);
        // console.log(evt.which);
        // console.log(evt.charCode);

        // 65 97 13   32  48    10
        // A  a  回车 空格 0  ctrl+回车 

        console.log(keyAsc);

        if(keyAsc == 10){
            console.log("发送");
        }

        //ctrlKey:判断ctrl是否被按下
            console.log(evt.ctrlKey);
    }

事件的绑定方式

方法一、通过html元素绑定

<body>
		<button onclick="f1()">点击1</button><br>
</body>
<script>
		function f1(){
		        console.log("嘤嘤嘤");
		    }
		    oBtn.onclick = f1;
</script>

方法二、通过JS对象绑定

<body>
		 <button id="btn">点击2</button><br>
</body>
<script>
		var oBtn = document.querySelector("#btn");
</script>

以上绑定方式的缺陷：
a、无法为相同的元素多次绑定相同的事件
b、无法决定事件流是冒泡还是捕获

方法三、事件的监听（可以解决以上两种的缺陷）
优点：a、可以为相同的元素多次绑定相同的事件
b、可以决定事件流是冒泡还是捕获
事件元素：addEventListener(“去掉on的事件名，回调函数，是否捕获true|默认false”)；

 document.addEventListener("click",function(){
        console.log(1);
    });

    document.addEventListener("click",function(){
        console.log(2);
    });

  document.addEventListener("click",function(){
        alert("document捕获");
    },true);

    window.addEventListener("click",function(){
        alert("window捕获");
    },true);

    document.addEventListener("click",function(){
        alert("document冒泡");
    },false);

    window.addEventListener("click",function(){
        alert("window冒泡");
    },false);

    //先捕获后冒泡

事件的解绑

<body>
	 <button>点击</button><br>
     <button>解绑</button><br>
</body>

事件的解绑
1、JS对象解绑

var oB = document.querySelectorAll（“button”）；
	oB[0].onclick = function（）{
					alert（1111）；
	}	
	oB[1].onclick = function(){
					oB[0].onclick = null;
	}

2、事件监听的解绑
removeEventListener（“去掉on的事件”，“同一个回调函数”）；
var f =function(){
alert(1111);
}
document.addEventListener(“click”,f);
var oB = document.querySelectorAll(“button”);
oB[1].onclick = function(evt){
evt.stopPropagetion();
document.removeEventListener(“click”,f);
}

事件的委托

委托：自己的事让别人干
事件的委托：子元素被触发后，事件体由元素执行——>依赖于冒泡机制
好处1：可以将批量绑定的子元素事件，委托到父元素事件，从而提高程序执行效率

<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>111</li>
    </ul>
</body>
<script>
方法一、
 // var oLis = document.getElementsByTagName("li");
for(var i=0; i<oLis.length; i++){
    //     oLis[i].onclick = function(){
    //         this.style.backgroundColor = 'hotpink';
    //     }
    // }
    -------------------------------------------------------------------

    var oUl = document.querySelector("ul");
方法二、
    // oUl.onclick = function(evt){
    //     // this.style.backgroundColor = 'hotpink';
    //     // 获取真实的操作元素
    //     var target = evt.target || evt.srcElement;

    //     console.log(target.tagName);

    //     if(target.tagName == "LI"){
    //         target.style.backgroundColor = 'red';
    //     }
    // }
方法三、
    oUl.addEventListener("click",function(evt){
        var target = evt.target || evt.srcElement;
        if(target.tagName == "LI"){
            target.style.backgroundColor = 'red';
        }
    });
    </script>

好处2、可以为未来添加的子元素，提前绑定事件

<body>
    <input type="text" name="" id="">
    <ul>
        <li>福岛核废水</li>
        <li>天津老大爷</li>
        <li>认房不认贷</li>
        <li>小学生开学</li>
        <li>遥遥领先</li>
    </ul>
    <button>添加</button>
</body>
<script>
	 var oInput = document.querySelector("input");
	  var oLis = document.getElementsByTagName("li");
	  var oBtn = document.querySelector("button");
	  var oUl = document.querySelector("ul");
	  oUl.addEventListener("mouseover",function(evt){
	   var target = evt.target || evt.srcElement;

        if(target.tagName == "LI"){
            target.style.backgroundColor = 'red';
        }
    });

    oUl.addEventListener("mouseout",function(evt){
        var target = evt.target || evt.srcElement;

        if(target.tagName == "LI"){
            target.style.backgroundColor = '';
        }
    });

    oBtn.onclick = function(){
        var oLi = document.createElement("li");
        oUl.appendChild(oLi);
        oLi.innerHTML = oInput.value;
    }
</script>

拖拽

onmousedown 作用于box 包含以下两个事件：
onmousemove 作用于document
onmouseup 作用于document

<head>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            cursor: move;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>
<script>
    var oBox = document.querySelector("#box");
    oBox.onmousedown = function(evt){
        var x = evt.offsetX;
        var y = evt.offsetY;
        document.onmousemove = function(evt){
            var left = evt.pageX - x;
            if(left < 0){
                left = 0;
            }
            var maxLeft = window.innerWidth - oBox.offsetWidth;
            if(left > maxLeft){
                left = maxLeft;
            }

            var top = evt.pageY - y;
            if(top < 0){
                top = 0;
            }
            var maxTop = window.innerHeight - oBox.offsetHeight;
            if(top > maxTop){
                top = maxTop;
            }

            oBox.style.left = left + "px";
            oBox.style.top = top + "px";
        }
        document.onmouseup = function(){
            document.onmousemove = null;
        }
    }
</script>

正则表达式

数据校验
数据格式大的判断>通过正则进行格式判断
数据数值的判断
什么是正则表达式:字符串的规范格式
为什么要使用正则表达式？正则表达式(regular expression)是一个描述字符规则的对象

1、构造方法
var reg = new RegExp(“格式字符串”,“修饰符可省略”）；

正则的API之一
test
功能：判断目标字符串是否满足正则对象
参数：test（目标字符串）
返回值：布尔值
例子：console.log（reg.test(“bc”);

exec
功能：返回目标字符串满足正则对象的子串
参数：exec（“目标字符串”）
返回值：满足正则对象的子串，存放在长度为1 的数组中

修饰符：g，全局->访问所有元素
例子：// var reg = /d+/g;
修饰符：i，忽略大小写
例子：// var reg = /xing qi si/i;
字符串API，正则对象作为参数

str.match(正则对象)
功能：返回目标字符串满足正则对象的子串
参数：match（正则对象）
返回值:满足正则对象的子串，全都存放在数组中

// search
//功能:查找字串，返回下标或者-1
//参数:search(正则对象)
//返回值:返回下标或者-1

2、字面量
reg=/格式字符串，修饰符可以省略/
例子、reg=/1[3-9]\d{9}/;
console.log(reg.test(“18123456789”));
// 什么时候必须用构造方法创建对象？

 var arr = ["嘿嘿","123","laowang"];

    var reg = /arr[2]/;
    console.log(reg.test("laowang"))

    var reg1 = new RegExp(arr[2]);
    console.log(reg1.test("laowang"))

正则的格式字符串

// 格式字符串:普通字符+特殊字符
// 普通字符:普通的字符
// 特殊字符:a.单个字符
// b.各种括号
// c.组合字符

<body>
    <input type="text" name="" id=""> <button>测试</button>
</body>
<script>
  var oInput = document.querySelector("input");
    var oBtn = document.querySelector("button");

    oBtn.onclick = function(){
        //至少包含一个a
        var reg = /a/;

        //至少包含aaa
        reg = /aaa/;

        // ^&只能包含，同时存在或者同时不存在
        reg = /^a$/;

        reg = /^aaa$/;

        //以b开头,至少3个a,至多5个a
        reg = /^ba{3,5}$/

        //  6个5 /^5{6}$/;
        // reg = /^555555$/;
        reg = /^5{6}$/;

        //邮编   6位数字  
        reg = /^\d{6}$/;

        //定义一个由字母或数字或下划线组成的用户名,范围在6,18之间  
        reg = /^\w{6,18}$/; 

        // 定义一个由字母或数字或下划线组成的用户名,但是首字母不为数字  
        // 范围在6,18之间  
        reg = /^\D\w{5,17}$/;

        //定义一个密码,至少6位    
        reg = ![请添加图片描述](https://img-blog.csdnimg.cn/77cab8d90d3643e7b602223df9ba4430.png)


        //www.baidu.com
        reg = /www.baidu.com/;

        // \转义字符
        reg = /www\.baidu\.com/;
        reg = /\\/;

        //5+3
        reg = /^5\+3$/;

        //以 13 或 15 开头的手机号
        // 或
        // (字符传1|字符串2|xxxx)
        reg = /^1(3|5)\d{9}$/;

        // 还是或
        // [字符1字符2字符3...]
        reg = /^1[35]\d{9}$/;

        //表示区间的一个数据
        //[a-f0-3]
        reg = /^[a-f0-3]$/;

        //除了
        // [^字符1字符2字符3...]
        reg = /^[^a-f0-3!+6]$/;

        //空格 \s
        reg = /\s/;

        //中文 [\u4e00-\u9fa5]
        reg = /^[\u4e00-\u9fa5]{2}$/;
        
        console.log(reg.test(oInput.value));
    }
</script>

在这里插入图片描述

密码强弱的判断


### 表单的强化验证

```javascript
<body>
    <!-- 
        action：提交的后端服务地址
     -->
    <form action="ok.html">
        <input type="text"> <span></span> <br> <br>  
        <input type="text"> <span></span> <br> <br> 
        <input type="submit" value="注册">
    </form>
</body>
</html>
<script>
    var oF = document.querySelector("form");
    var oInput = document.querySelectorAll("input");
    var oSpans = document.getElementsByTagName("span");

    var flagId = false;
    var flagPwd = false;

    oInput[0].onblur = function(){
        var regUserId = /^\w{6,18}$/;

        if(regUserId.test(this.value)){
            flagId = true;
            oSpans[0].innerHTML = "用户名格式正确";
        }else{
            flagId = false;
            oSpans[0].innerHTML = "用户名尿了";
        }
    }

    oInput[1].onblur = function(){
        var regUserPwd = /^.{6,}$/;

        if(regUserPwd.test(this.value)){
            flagPwd = true;
            oSpans[1].innerHTML = "密码格式正确";
        }else{
            flagPwd = false;
            oSpans[1].innerHTML = "密码尿了";
        }
    }

    oF.onsubmit = function(){
        if(flagId && flagPwd){
            return true;
        }else{
            return false;
        }
    }
</script>