JavaScript相关事件

最新推荐文章于 2024-07-16 20:08:38 发布

向51致敬

最新推荐文章于 2024-07-16 20:08:38 发布

阅读量163

点赞数

分类专栏：前端 js

本文链接：https://blog.csdn.net/Pan_BY/article/details/101911247

版权

前端同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

事件
JavaScript 使我们有能力创建**动态页面**。事件是可以被 JavaScript 侦测到的行为。
网页中的每个元素**都可以产生某些可以触发 JavaScript 函数的事件**。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。

注意：事件通常与函数配合使用，当事件发生时函数才会执行
点击事件: onclick , ondbclick
焦点: onfocus , onblur
鼠标:onmouseout , onmouseover , onmouseup , onmousemove , onmousedown
键盘: onkeydown , onkeypress , onkeyup
body中: onload , onunload , onerror , onresize

<body>
    <script type="text/javascript">
        function fun1(){
            console.log("被点击了....");
        }
        function fun2(){
            console.log('被双击了....');
        }
        function fun3(o){
            //console.log('1');
            // #RRGGBB
            var r1 = parseInt(Math.random()*10);
            var r2 = parseInt(Math.random()*10);
            var r3 = parseInt(Math.random()*10);
            var r4 = parseInt(Math.random()*10);
            var r5 = parseInt(Math.random()*10);
            var r6 = parseInt(Math.random()*10);
            var rgb = ""+r1+r2+r3+r4+r5+r6;
           // console.log(rgb);
            o.style.backgroundColor='#'+rgb;
        }
    </script>
    <!--事件属性中 不用加 JavaScript:前缀 -->
 点击事件:<br>
    <input type="button" value="点击事件" οnclick="alert('被点击了。。。')">
    <input type="button" value="点击事件" οnclick="fun1();">
    <input type="button" value="双击事件" οndblclick="fun2();"><br>
 焦点事件:<br>
    用户名:<input type="text" onfocus="console.log('获取焦点1')" οnblur="console.log('失去焦点1')"><br>
    地址:<input type="text" onfocus="console.log('获取焦点2')" οnblur="console.log('失去焦点2')"><br>
    用户名:<input type="text" value="a" onfocus="this.value='获取焦点'" οnblur="this.value='失去焦点'"><br>
    地址:<input type="text" onfocus="this.value='获取焦点'" οnblur="this.value='失去焦点'"><br>
 键盘事件:<br>
    用户名 onkeyup:<input type="text" onkeyup="console.log(event.keyCode);" ><br>
    <!--
     onkeydown和onkeypress的区别：
         1.onkeypress 火狐浏览器并不支持
         2.onkeypress只对常用操作按键有用
           onkeydown对所有按键都有作用【除了 截图】
     -->
    用户名 onkeydown:<input type="text" onkeydown="console.log(event.keyCode);" ><br>
    用户名 onkeypress:<input type="text" onkeypress="console.log(event.keyCode);"><br>
 鼠标事件:<br>
        <!-- js中的样式 属性名称按照 驼峰命名法  backgroudn-color  backgroundColor -->
        <div style="border: 1px red solid;width: 200px; height: 200px"
             onmouseover="this.style.backgroundColor='#123456';"
             onmouseout="this.style.background='#654321'">
        </div>
        <div style="border: 1px red solid;width: 200px; height: 200px"
                onmouseup="this.style.width='100px'"
                onmousedown="this.style.width='300px'">
        </div>
        <div style="border: 1px red solid;width: 200px; height: 200px"
                onmousemove="fun3(this);">
        </div><br>
</body>
----------
<script type="text/javascript">
    function init(){
        console.log('页面加载完成...');
    }
</script>
<body onload="init();" onresize="console.log('----------')">
    <!---
        body事件:
           onload:在页面元素全都加载完成后执行
     -->
    <script type="text/javascript">
        console.log('1');
    </script>
    <a href="#">aaaa</a>
    <script type="text/javascript">
        console.log('2');
    </script>
</body>