tensorflow package 控制跳转 centos8 fonts sms Browserify jquery的each遍历方法 最新更新国内最快的dns erp项目描述 matlab生成对角矩阵 hash怎么下载 vue与html5 python创建txt文件并写入 python的安装 python中import python数字类型 java字符串 java正则表达 java安装步骤 java安装 java架构 java文件输入输出 vb编程 微信助力软件 pyh 图片生成网址 pr黑场过渡 通讯录管理系统 视频加字幕软件 机械键盘个别键位失灵 视频字幕制作软件 qq飞车刷车 键盘指法练习游戏 勇敢者的游戏3 alert换行 ps字体描边 红巨星插件 网易云听歌识曲电脑版 极速傲引擎
当前位置: 首页 > 学习教程  > 

按钮点击事件的实现方式---原生js

2020/10/16 18:03:46 文章标签: js原生点击事件

这个部分主要来讲解一下按钮点击事件的集中js的实现方式&#xff1a; 方法一&#xff1a; <!DOCTYPE html> <html> <head lang"en"><meta charset"UTF-8"><title>test1</title><script>function buttonClick()…

这个部分主要来讲解一下按钮点击事件的集中js的实现方式:

方法一:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>test1</title>
    <script>
        function buttonClick(){
            alert("你点击了按钮哦");
        }
    </script>
</head>
<body>
<input  id="button" type="button" value="点击" οnclick="buttonClick();">
</body>
</html>

方法二:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>test1</title>

</head>
<body>
<input  id="button" type="button" value="点击" >
<script>
    var btn = document.getElementById("button");
    btn.onclick =function(){
        alert("你点击了按钮哦!");
    }
</script>
</body>
</html>

对于方法二,一定要把script代码块写在body的尾部,但是如果说硬是要写在head标签内的话,一定要在window.load里面,或者在jq的另一种写法$(document).ready()。 如下方代码所示。这个是代码执行顺序的原因。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>test1</title>

    <script>
        window.onload = function(){
            var btn = document.getElementById("button");
            btn.onclick =function(){
                alert("你点击了按钮哦!");
            }
        }
    </script>
</head>
<body>
<input  id="button" type="button" value="点击" >
</body>
</html>
方法三:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>test1</title>
    <script>
        window.onload = function(){
            var btn = document.getElementById("button");
            btn.addEventListener('click',function() {alert('你点击了按钮哦!')},false);
        }
    </script>
</head>
<body>
<input  id="button" type="button" value="点击" >
</body>
</html>






本文链接: http://www.dtmao.cc/news_show_300347.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?