JavaScript 基础(四) -

程序员文章站 2022-04-23 08:10:52

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>

上一篇：《钢铁侠》里的“贾维斯”！这正是搜索的未来形态

下一篇：高考建议

JavaScript 基础(四) -

html dom event(事件)

onclick

onload

onfocus && onblur

onkeydown && onkeyup

onmousedown && onmousemove && onmouseout && onmouseover

onsubmit

绑定事件的两种方式

阻止事件向外层div传播

增删改查

修改 css 属性

添加 class 操作

php简单的会话类代码_php基础

javascript - 虎扑屏蔽youku，tudou广告是怎么实现的

从URL中提取参数与将对象转换为URL查询参数的实现代码_javascript技巧

SQL语言查询基础：连接查询联合查询代码

15 个 JavaScript Web UI 库_javascript技巧

javascript - 如何匹配"height:12px;width:56px;background:#fff;"中间的"width:56px;"?

javascript - 网页中的 shell 是真 shell 还是其他？

javascript中call,apply,bind函数用法示例

大四计划

JavaScript编程开发中jquery中post方法用法实例教程

JavaScript 基础(四) -

html dom event(事件)

onclick

onload

onfocus && onblur

onkeydown && onkeyup

onmousedown && onmousemove && onmouseout && onmouseover

onsubmit

绑定事件的两种方式

阻止事件向外层div传播

增删改查

修改 css 属性

添加 class 操作

php简单的会话类代码_php基础

javascript - 虎扑屏蔽youku，tudou广告是怎么实现的

从URL中提取参数与将对象转换为URL查询参数的实现代码_javascript技巧

SQL语言查询基础：连接查询 联合查询 代码

15 个 JavaScript Web UI 库_javascript技巧

javascript - 如何匹配"height:12px;width:56px;background:#fff;"中间的"width:56px;"?

javascript - 网页中的 shell 是真 shell 还是其他？

javascript中call,apply,bind函数用法示例

大四计划

JavaScript编程开发中jquery中post方法用法实例教程

SQL语言查询基础：连接查询联合查询代码