DOM事件操作

Posted 2020-11-19 dk2557

DOM事件：对事件做出反应

当事件发生时，可以执行 javascript，比如：点击时 onClick=""

例：当用户点击时，会改变 <h1> 元素的内容：

<h1 onclick="this.innerhtml=文本更换!‘">点击文本!</h1>

HTML 事件的例子：

onclick=""//点击时
onload=""//页面加载完成时
onchage=""//改变时
onmouseover=""//鼠标移入时
onmouseout=""//鼠标移出时
 onmousedown=""//鼠标点下去时
 onmouseup=""//鼠标松开时

例题事件：

1、页面打开五个窗口，点击按钮，关闭所有窗口

<button onclick="closeAll()">关闭</button>//html页面，点击按钮关闭所有页面
<script>
    var arr = [];
    for (var i = 4; i >= 0; i--) {
        window.open();//打开新页面
    }
    function closeAll(){
        for (var i =4; i >= 0; i--) {
        arr[i].close();//关闭页面
        }
    }
</script>

2、登陆验证

账号：<input type="text"><br>
密码：<input type="password"><br>
<button onclick="denglu()">登录</button>
<script>
function denglu(){
    //获取内容
        //找到元素
    var input =  document.getElementsByTagName("input");//找到input元素，为数组
    var uid = input[0];
    var pwd = input[1];
        //获取元素内容
    var uidval = uid.value;
    var pwdval = pwd.value;
    if(uidval == "" || pwdval == ""){
        console.log("账号或密码不能为空！");
        return;
    }
    //验证内容
    if(uidval == "admin"){
        console.log("登录成功！");
    }
}
</script>

3、表格添加行

<button id = "add">添加一行</button>//添加一行按钮
<table id="tab" border="1">
    <tr>
        <td>
            123
        </td>
    </tr>
</table>

<script>
var addbtn = document.getElementById(‘add‘);//找到添加按钮
var tab = document.getElementById(‘tab‘);//找到表格
addbtn.onclick = function(){
//点击时，运行方法
    var tr = document.createElement(‘tr‘);//添加标签，新建一行
    for (var i = 3; i >= 0; i--) {
        var td = document.createElement(‘td‘);//新建一个单元格
        td.innerHTML = 123;
        tr.appendChild(td);//将新建的td添加到tr中
    }

    tab.appendChild(tr);//将新建的tr添加到table中

}
</script>