欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

JavaScript 基础(四) -

程序员文章站 2022-07-09 15:08:58
HTML DOM Event(事件) HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。 onclick onload on ......

html dom event(事件)

html 4.0 的新特性之一是有能力使 html 事件触发浏览器中的动作（action），比如当用户点击某个 html 元素时启动一段 javascript。下面是一个属性列表，这些属性可插入 html 标签来定义事件动作。

onclick        // 当用户点击某个对象时调用的事件句柄。
ondblclick     // 当用户双击某个对象时调用的事件句柄。
onfocus        // 元素获得焦点。               
onblur         // 元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       // 域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）
onkeydown      // 某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     // 某个键盘按键被按下并松开。
onkeyup        // 某个键盘按键被松开。
onload         // 一张页面或一幅图像完成加载。
onmousedown    // 鼠标按钮被按下。
onmousemove    // 鼠标被移动。
onmouseout     // 鼠标从某元素移开。
onmouseover    // 鼠标移到某元素之上。
onmouseleave   // 鼠标从元素离开
onselect       // 文本被选中。
onsubmit       // 确认按钮被点击。

onclick

<div onclick="alert('hello')">点点点</div>
<p id="abc">try and try</p>
<script>
    var ele=document.getelementbyid("abc");
    ele.onclick=function(){
        alert("world");
    };
</script>
<div id="abc" onclick="func1(this)">事件绑定方式1</div>
<div id="id123">事件绑定方式2</div>

<script>
    function func1(self){
        console.log(self.id)
    }

    var ele=document.getelementbyid("id123").onclick=function(){
        console.log(this.id);
    }
</script>

onload

onload 属性开发中 只给 body元素加.
这个属性的触发 标志着 页面内容被加载完成.
应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.

<body onload="fun1()">
<p id="ppp">hello p</p>
    <script>
    function fun1(){
        var ele = document.getelementbyid("ppp");
        ele.onclick = function(){
            alert(123);
        };
    }
    </script>
</body>
<head>
    <meta charset="utf-8">
    <title>title</title>
    <script>
        window.onload = function(){
            var p = document.getelementbyid("id1");
            alert(p.nodename);
        }
    </script>
</head>
<body>
<p id="id1">hello p</p>
</body>

onfocus && onblur

<input type="text" onfocus="func1()" onblur="func2()">
<script>
    function func1(){
        console.log(111);
    }
    function func2(){
        console.log(222);
    }
</script>
<input type="text" class="keyword" onfocus="func1()" onblur="func2()" value="请输入用户名">
<script>
    function func1(){
        var ky = document.getelementsbyclassname("keyword")[0];
        ky.value="";
    }
    function func2(){
        var ky = document.getelementsbyclassname("keyword")[0];
        if (ky.value.trim().length==0){
            ky.value="请输入用户名";
        }
    }
</script>

onkeydown && onkeyup

<input type="button" value="press" onkeydown="fun1(event)">
<script>
    function fun1(e){
        alert(e.keycode);
    }
</script>
<input type="button" value="press" onkeydown="fun1()" onkeyup="fun2()">
<script>
    function fun1(e){
        console.log(456);
    }
    function fun2(){
        console.log(123)
    }
</script>

onmousedown && onmousemove && onmouseout && onmouseover

<body>
<div onmousedown="down()" onmousemove="move()" onmouseout="out()" onmouseover="over()">div1</div>
</body>
<script>
    function down(){
        console.log("down");
    }
    function move(){
        console.log("move");
    }
    function out(){
        console.log("out");
    }
    function over(){
        console.log("over");
    }
</script>

onsubmit

是当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.

<form onsubmit="return check()">
    <input type="text" name="username">
    <input type="submit" value="submit">
</form>
<script>
    function check(){
        alert("验证失败!")
        return false;
    }
</script>
<form onsubmit="check(event)">
    <input type="text" name="username">
    <input type="submit" value="submit">
</form>
<script>
    function check(event){
        alert("验证失败!")
        event.preventdefault();
    }
</script>

绑定事件的两种方式

<div id="div1" onclick="func1()">hello div1
    <p class="ppp">hello p</p>
</div>
<script>
    var obj = document.getelementsbyclassname("ppp")[0];
    obj.onclick = function(){
        alert("ppp");
    }

    function func1(){
        alert("div1");
    }
</script>

阻止事件向外层div传播

    <style>
        #div1{
            width: 300px;
            height: 200px;
            background-color: #84a42b;
        }

        #div2{
            width: 100px;
            height: 100px;
            background-color: rebeccapurple;
        }
    </style>
</head>
<body>
<div id="div1" onclick="alert('div1')">
    <div id="div2" onclick="func1(event)"></div>
</div>
<script>
    function func1(e){
        alert("div2");
        e.stoppropagation();
    }
</script>

增删改查

<div id="div1">
    <div id="div2">hello div2</div>
    <p>hello p</p>
</div>
<input type="button" value="添加p" onclick="add()">
<input type="button" value="删除最底的元素" onclick="remove()">
<script>
function remove(){
    var ele = document.getelementbyid("div1");
    var last_son = ele.lastelementchild;
    ele.removechild(last_son);
}
function add(){
    var ele = document.getelementbyid("div1");
    var son = document.createelement("p");
    son.innerhtml = "hello pppp";
    ele.appendchild(son);
}
</script>
    son.innerhtml = "<b>hello pppp</b>";     // 以 html 方式修改文本，字体变粗
    son.innertext = "<b>hello pppp</b>";     // 以纯文本方式修改文本

修改 css 属性

<div id="div1">flish</div>
<input type="button" onclick="changebig()" value="big">
<input type="button" onclick="changesmall()" value="small">
<script>
    function changebig(){
        var ele = document.getelementbyid("div1");
        ele.style.fontsize="30px";
    }
    function changesmall(){
        var ele = document.getelementbyid("div1");
        ele.style.fontsize="10px";
    }
</script>

添加 class 操作

<head>
    <meta charset="utf-8">
    <title>title</title>
    <style>
        .bigger{
            font-size: 34px;
        }
    </style>
</head>
<body>
<div class="div1 div2" id="id">
    hello
    <div>hello2</div>
    <p>hello p</p>
</div>
<script>
    var ele = document.getelementbyid("id");
    ele.classlist.add("bigger");
</script>

上一篇： 宁德小吃有哪些

下一篇： 我给房东打电话

推荐阅读