JS绑定事件

深藏阁楼爱情的钟 2022-03-26 11:20 313阅读 0赞

开发工具与关键技术：DW  
作者：文泽钦  
撰写时间：2019年1月17日

目的：实现一些js简单绑定按钮事件

分享一些简单的js绑定事件给一些刚入门的网友玩玩，代码简单点实现的功能虽然也少点，但不要急，一步一步来，先刷点成就感。学会这一点，也可以做一些好玩的事。  
Js对话框没被绑定前，一打开网页就自动执行，有些用户感觉好玩，有些用户也会嫌它烦，那就要考虑要不要用绑定事件了。具体要用那种方式提醒用户，就要看实际情况而定。

1.没有做任何绑定事件：

###  ###

喜欢的话可以把代码拷贝下来去尝试一下。  
![在这里入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDI1MQ_size_16_color_FFFFFF_t_70]

2.js绑定点击事件：

###  ###

<!doctype html>

<metaname="viewport" content="width=device-width" />
    <title>给老板的一封信</title>

<div>
       <buttononClick="btnClick()">我离开之后你要幸福</button>
       </div>
    <script>
        functionbtnClick(){
        alert("当你看到这封信时，我已经离开公司了。");
        alert("抱歉，我离开不是因为外面的世界很大...");
        alert("也不是因为我想去看看...");
        alert("是因为你发的工资太少了！");
        var mymessage =window.confirm("亲爱的老板我走了，请你以后把我那份工资分给同事吧！");
        if (mymessage ==true) {document.write("你给同事们涨工资的事我已经帮你跟同事说了。");
        } else {document.write("因为我知道你会不同意，所以我在离开前把没完成的项目卖给老王了，日后你也不用日夜为此操劳了..."); }
       }   
    </script>

![在这里插入图片描述][20190117082132869.PNG]  
两者的区别在于：第一个效果，网页加载完成后自动触发，用户必须要执行完，才能进行下一步浏览，否则无法继续往下执行；第二个效果，需要用户点击后才执行，用户点不点击，都可以往下执行。具体效果建议自己个人去尝试，去创新提升自己想要的效果。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDI1MQ_size_16_color_FFFFFF_t_70]: /images/20220326/2709d29512f344cfb859ee3fb17033cd.png
[20190117082132869.PNG]: /images/20220326/25471d00b0244a33883b4f3a826f2cde.png