js笔记（事件）
| 关键字 | 说明 |
| onlick | 单击 |
| ondblcick | 双击 |
| onfocus | 获取焦点 |
| onblur | 失去焦点 |
| onchange | 域的内容被改变 |
| onkeydown | 键盘按下 |
| onkeypress | 键盘按下并松开 |
| onkeyup | 键盘松开 |
| onload | 页面或图片完成加载 |
| onmousedown | 鼠标按下 |
| onmousemove | 鼠标移动 |
| onmouseout | 鼠标从某元素移开 |
| onmouseover | 鼠标移到某元素之上 |
| onselect | 文本框的文本被选中时发生 |
| onsubmit | 确认按钮被点击，使用的对象是form |
<body> <input type="button" onclick="func1()" > 点我 //第一种方法需要onclick参数 <button id="b1" onclick="func1()">弹窗</button> <button id="b2">弹窗</button> <script> //第一种方法 function func1(){ alert (123)} //第二种方法 let butEle = document.getElementById('b2') butEle.onclick = function (){alert((456))} </script> </body>
//开关灯 <body> <div id = 'd1' class="c1 c2 c3"></div> <button id = 'b1'>点我变色</button> <script> let butELe = document.getElementById('b1') let divEle = document.getElementById('d1') butELe.onclick = function (){divEle.classList.toggle('c3')} </script> </body>
//搜索框默认文本 <body> <input id='i1' type="text" value="balabala"> <script> let iELe = document.getElementById('i1') iELe.onfocus = function (){iELe.value = ''} iELe.onblur = function () {iELe.value = 'walwalwalwa'} </script> </body>
<body>
<input id="i1" type="text" height="100" width="150px" ><br>
<button id="b1">start</button>
<button id="b2">stop</button>
</body>
<script>
let t = ''
let i1Ele = document.getElementById('i1')
let b1Ele = document.getElementById('b1')
let b2Ele = document.getElementById('b2')
function fun1() {
let dd = new Date()
i1Ele.value = dd.toLocaleString()
}
function fun2(){
clearInterval(t)
t=null
}
b1Ele.onclick = function (){
if (!t) {
t = setInterval(fun1, 1000)
}
}
b2Ele.onclick = fun2
</script>
<body>
<select name="" id="s1">
<option value="" disabled selected>--choice--</option>
</select>
<select name="" id="s2"></select>
</body>
<script>
let s1Ele = document.getElementById('s1')
let s2Ele = document.getElementById('s2')
data= {
'男性':['建国','援朝','志华'],
'女性':['冬梅','秀英','丽娟']
}
for (let gender in data){
let opEle =document.createElement('option')
opEle.value = gender
opEle.innerText = gender
s1Ele.appendChild(opEle)
}
s1Ele.onchange= function (){
let namelist=data[s1Ele.value]
let opEle= '<option disabled selected>-choice-</option>'
//重置名字选项框的数据
s2Ele.innerHTML=opEle
//清空名字选项框的数据
// s2Ele.innerHTML=''
// let opEle = document.createElement('option')
// opEle.innerText='-choice-'
// opEle.setAttribute('disabled','disabled')
// opEle.setAttribute('selected','selected')
// s2Ele.appendChild(opEle)
for (let i=0; i<namelist.length; i++){
let opEle = document.createElement('option')
opEle.innerText= namelist[i]
opEle.value = namelist[i]
s2Ele.appendChild(opEle)
}
}
</script>
