本文介绍了JavaScript中的事件监听，如click和mouseenter事件，以及事件绑定的on事件名方式。事件委托通过在父元素上设置监听器处理子元素的事件。还涵盖了常见的DOM操作，如查找节点、添加删除节点，以及构造函数和原型对象的概念。最后讨论了正则表达式的使用，包括点字符、预定义模式和数量修饰符。
事件监听
e.addEventListener('click',执行操作)——click为所执行的事件
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
}
.yincang {
display: none;
}
</style>
<body>
<button>切换</button>
<div class="yincang"></div>
<script>
const btn = document.querySelector('button')——获取元素
const box = document.querySelector('div')
btn.addEventListener('mouseenter', () => {——添加事件监听
box.classList.toggle('yincang')
})——toggle切换隐藏为显示
</script>
</body>
事件绑定
e.on事件名 = 回调函数
btn.onclick = function () {
btn.style.backgroundColor = 'pink'
}
常见事件 ：
事件类型：
鼠标点击：click
鼠标经过：mounseenter
鼠标离开：mounseleave
获得焦点：blur
键盘按下事件：keydown
用户输入事件：input
事件委托
<body>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
<script>
let ul = document.querySelector('ul')
ul.addEventListener('click', function (key) {
console.log(key)
key.target.style.backgroundColor = 'pink'
})——key.target——记录点击的是什么
</script>
</body>
控制按下特定的键实现特定的功能：
document.addEventListener('keyup', function (e) {
if (e.key === 'Enter') {
console.log('我要发布微博了')
}
})
捕获，冒泡
<script>
document.querySelector('.grandfather').addEventListener('click', (e) => {
console.log('我是yeye')
}, true)
// 默认为false冒泡 true捕获
document.querySelector('.father').addEventListener('click', (e) => {
console.log('我是父亲')
}, true)
document.querySelector('.son').addEventListener('click', () => {
console.log('我是儿子')
}, true)
</script>
e.stopPropagation()——阻止默认事件，阻止捕获和冒泡
阻止默认行为
document.querySelector('button').addEventListener('click', (e) => {
e.preventDefault()
})——阻止默认行为提交
lode事件
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.addEventListener('load', function () {
document.querySelector('button').addEventListener('click', () => {
console.log('1111')
})——先执行了内部的所有再执行外部
})
</script>
</head>
<body>
<button>点击</button>
</body>
节点操作：
查找父亲节点：
let father = document.querySelector('.son').parentNode
console.log(father)
——.son.parentNode
查找儿子节点：
let son = document.querySelector('.father').children
console.log(son)
——.father.children
查找兄弟节点
document.querySelector('.son1').nextElementSibling.style.color = 'pink'
追加节点
<button>发布</button>
<ul></ul>
<script>
const btn=document.querySelector('button')
const ul=document.querySelector('ul')——获取元素
btn.addEventListener('click',()=>{
let li=document.createElement('li')——创建节点
li.innerHTML=`<h1>我是新创建的li<h1> <button>删除<button>`——添加内容
ul.appendChild(li)——追加节点
})
</script>
<button>发布</button>
<ul></ul>
<script>
const btn=document.querySelector('button')
const ul=document.querySelector('ul')
btn.addEventListener('click',()=>{
let newli=document.createElement('li')
newli.innerHTML=`<h1>我是新创建的li<h1> <button>删除<button>`
let p2=newli.querySelector(`button`)
console.log(p2);
p2.addEventListener('click',()=>{
})
ul.appendChild(newli)
})
</script>
——追加删除
构造函数
new构造函数名（参数）
1，命名大写字母开头
2，只能通过new操作符完成执行
function Obj(uname, age, gender) {
this.uname = uname,——this指向所创建的对象
this.age = age,
this.gender = gender
}
let obj1=new Obj(`yes`,12,`nv`)
console.log(obj1);
let obj2=new Obj(`no`,11,`nan`)
console.log(obj2);
更改其中一个元素不影响其他的元素
obj2.age=33
缺点——同一个构造函数的多个实例之间，无法共享属性，从而造成系统资源的浪费
原型对象
原型：构造函数通过原型分配的函数是被所有对象共享的每一个构造函数都有一个prototype属性，指向另一个对象，因此称为原型,将不变的方法，直接定义在prototype上，让所有对象的实列共享
原型 将不变的方法，直接定义在prototype上，让所有对象的实例共享
构造函数.prototype.方法名=function(){}
Obj.prototype.sing = function () {
console.log('爱编程')}
构造函数的原型上存在构造器（constructor属性）指向构造函数，完成双向指定
原型覆盖：原型对象中的constructor被覆盖
<script>
function Obj(uname, age, gender) {
this.uname = uname,
this.age = age,
this.gender = gender
}
Obj.prototype = {——重新给元素赋值会覆盖需要手动指明指向
//必须手动指明构造器所指向的构造函数
constructor: Obj,
sing: function () {
console.log('我要唱歌了~')
},
dance: function () {
console.log('我爱跳舞')
}
}
console.log(Obj.prototype)
let obj1 = new Obj('xin', 21, 'nv')
obj1.sing()
</script>
constructor——指向构造函数
——__proto__ :对象原型，实例出来的对象中用于指向构造函数Obj的原型对象prototype的
this关键字
this——默认情况下指向windows
构造函数中指向实例话的对象
对象方法中this指向当前对象
函数基本调用时也指向windows
箭头函数，没有this的概念，会沿着作用域链查找
js执行机制
console.log('11')——同步任务
setTimeout('console.log(\'22\')', 0) ——异步任务，会放到等待的任务队列里面，等所有同步任务执行完以后再执行
正则表达式：
<script>
let regex=/g/——匹配条件
let str='ggb'
console.log(regex.test(str))
</script>
console.log(regex.exec(str))
点字符：
点字符（.）匹配除回车（\r），换行（\n），行分隔符(\u2028)和段分隔符（\u2029）以外的所有字符
let regex=/./
let str='lein'
console.log(str.match(/./))
位置字符
·^表示字符串的开始位置
·$表示字符串的结束位置
正则表达式修饰符
j——忽略大小写
g ——全局匹配
m——执行多行匹配
预定义模式
\d——匹配0-9之间的任一数字，相当于[0-9]
\D——匹配所有0-9以外的字符，相当于[^0-9]（非0-9）
\w——匹配字符串
*数量 0-n
console.log(str.match(/.*/g))
console.log('13193397789jndjncd'.match(/[0-9]{11}/g))
——匹配0-9，11位
console.log('13193397789jndjncd'.match(/[0-9]{11}.+/g))
——匹配全部任意字符
扫一扫
4935
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
