JavaScript常用的事件及简单应用

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Ljs_cn/article/details/52799565

在网页访问中常见的JavaScript事件大体可以分为:鼠标事件、浏览器事件、键盘事件。

JavaScript事件定义了用户与网页进行交互时产生的各种操作。例如,当用户单击一个超链接或按钮时,就会触发一个事件,告诉浏览器发生了需要进行处理的操作。除了在用户操作的过程中可以产生事件外,浏览器自身的一些动作也可能产生事件。

在JavaScript程序中可以定义一个事件的处理函数,当触发事件时会调用处理函数。

鼠标事件的使用范围:单击按钮、选中复选框checkbox、单选按钮radio,会用到onclick或click事件; 若是鼠标移入、移出,会用到onmouseover和onmouseout。

定义HTML元素时,可以使用on+事件名来指定事件处理函数,若有事件的绑定会应用到,例如 鼠标点击事件,在IE中,是 onclick , 但在 非IE中,则是 click。使用if和else条件判断语句, 就会解决这个事件在浏览器的兼容性问题。

javascript 常见事件的 效果举例:

1、JS 实现下拉菜单的显示隐藏(用到 onmouseover和onmouseout)

js实现下拉菜单的显示隐藏 代码如下:
效果图:
这里写图片描述 这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{margin: 0;padding: 0;list-style: none;}           
            body{padding: 100px;}                           
            .one{height: 40px;width: 100px;line-height: 40px;float: left;text-align: center;margin-right: 2px;background: #d8d8d8;}                         
            .one:hover{cursor: pointer;}                        
            .two{width: 100px;display: none;}                   
            .one:hover .two{display: block;}                    
            .two li:hover{background: gray;}                    
        </style>        
    </head>
    <body>
        <ul>
            <li class="one">一级菜单</li>
            <li class="one" onmouseover="document.getElementById('list').style.display='block'" onmouseout="document.getElementById('list').style.display='none'">一级菜单
                <ul id="list" class="two">
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                </ul>
            </li>
            <li class="one">一级菜单</li>
        </ul>
    </body>
</html>

2、JS 实现点击按钮图片的放大缩小

这里写图片描述

用CSS+JS 在行内式实现效果的方法:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#box{
    width:200px;
    height:200px;
    background-color:#66C;}
</style>
</head>
<body>
<input type="button" class="btn1" value="放大" onclick="document.getElementById('box').style.width='400px';document.getElementById('box').style.height='400px';" />
<input type="button" class="btn1" value="缩小" onclick="document.getElementById('box').style.width='100px';document.getElementById('box').style.height='100px';" />
<div id="box"></div>
</body>
</html>

上面的 行内式的触发事件, 可以 改用 嵌入式 来写,引入函数的定义和调用:

函数:就是具备一定功能的代码段。声明函数 如果不调用 函数是不起作用的。

改用 嵌入式 后的 代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>图片的放大缩小</title>      
        <style type="text/css">
            #box{
                width: 200px;
                height: 200px;
                background: #777;
                -webkit-transition: all 1s linear;
            }
        </style>
        <script type="text/javascript">

            function big(){
                var da=document.getElementById('box');
                da.style.width='400px';
                da.style.height='400px';
            }
            function small(){
                var mini=document.getElementById('box');
                mini.style.width='100px';
                mini.style.height='100px';
            }
        </script>
    </head>
    <body>      
        <input type="button" name="" id="" value="放大" onclick="big()"/>
        <input type="button" name="" id="" value="缩小" onclick="small()"/>
        <div id="box"></div>                    
    </body>
</html>
阅读更多 登录后自动展开
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页