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>
选项框关联

 

posted @ 2021-02-21 00:58  丑矬穷屌  阅读(39)  评论(0)    收藏  举报