码迷,mamicode.com
首页 > 其他好文 > 详细

DOM事件操作

时间:2018-06-23 14:30:51      阅读:182      评论:0      收藏:0      [点我收藏+]

标签:页面   inpu   添加行   min   点击文本   运行   UI   rip   btn   

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>

 

DOM事件操作

标签:页面   inpu   添加行   min   点击文本   运行   UI   rip   btn   

原文地址:https://www.cnblogs.com/dk2557/p/9216954.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!